今日は、「Webサイトを作ったらまずやるべきこと」に追加する内容をお伝えします。iPhone/iPadのホーム画面にあなたのサイトが追加されたときに表示されるアイコンの設定方法です。

Webサイトを作ったらまずやるべきことチェックリストという、はてブ2000ブクマ以上の大人気記事がありますが、そこに追加すべき内容が1つ増えていました。iPhone/iPad用のアイコン設定です。

iPhone用のSafariでは、ブックマーク追加メニューから「ホーム画面に追加」を選ぶと、ホームにそのサイトのアイコンを追加できます。アップルはこれは「Web Clip（ウェブクリップ）」と呼んでいるようです。



iPhoneでは見づらかったPC向けサイトもiPadでは比較的見やすくなるため、お気に入りのサイトをiPadのホームに追加する人が増えているのではないでしょうか。

こうしてホーム画面に追加されたときに表示されるアイコンは、何もしなければそのサイトの画面キャプチャになります。



これでは、何のサイトかわかりませんね。しかし、そこはアップル、表示するアイコンをWeb担当者が指定する方法を用意しています。

アイコンを、

・ 「apple-touch-icon.png」というファイル名の
・ PNG画像として
・ サイトのルートディレクトリに置いておく

だけです。faviconのようなものですね。iPhone用Safariは、その名前の画像があると、それを勝手に角丸にしたりハイライト/シャドウを付けたりして、iPhone風のアイコンにして使ってくれます。最終的なアイコンは57px×57pxにリサイズして使われ、透過色は無視されて黒色になってしまうようです。



ただ、自動処理に任せると、意外と見づらいアイコンになってしまう場合もあります。そういった場合は、「apple-touch-icon- precomposed.png」というファイル名で画像をアップロードしておくと、iPhoneはそちらを優先して使い、角丸などの処理だけしてアイコン化してくれます。




続きはこちら