今回は、iPhoneもしくはiPadのホーム画面にあなたのサイトが追加されたときに表示されるアイコンの設定方法についてお話します。iPhone用のSafariでは、ブックマーク追加メニューから「ホーム画面に追加」を選択すると、ホームにそのサイトのアイコンを追加できます。アップルはこれを「Web Clip（ウェブクリップ）」と呼んでいるようです。
ホーム画面に追加されるアイコンは、何も設定していないと、そのサイトの画面キャプチャになります。画面キャプチャだとものすごく小さく、何のサイトだったか分からなくなってしまいます。
このアイコンを設定しておくことで、何のサイトかわかりやすく表示させることができます。
ホーム画面用アイコンは設定も簡単で、
「apple-touch-icon.png」というファイル名のPNG画像をサイトのルートディレクトリに置いておくだけです。
iPhone用Safariは、その「apple-touch-icon.png」という画像があると、それを勝手に角丸にしたりハイライト/シャドウを付けたりして、iPhone風のアイコンにしてくれます。最終的なアイコンは57px×57pxにリサイズして使われ、透明部分は無視されて黒色になってしまうようです。
ただし、自動処理に任せると、アイコンによっては見づらいアイコンになってしまう場合もあります。そういった場合は、「apple-touch-icon-precomposed.png」というファイル名で画像をアップロードしておくと、「-precomposed」の方を優先して使い、角丸などの処理だけしてアイコン化してくれます。
自動処理をさせたくないなら「apple-touch-icon-precomposed.png」だけ設置しておけば良いと思ってしまいがちですが、iPhone OS 2.0より前のバージョンでは、「-precomposed」は使ってくれません。そのため、両方のファイルを置いておく必要があります。
また、faviconのように、ページ毎に異なるアイコンを指定することもできます。
その場合は、以下のようなコードを<head></head>内に記述します。
<link rel="apple-touch-icon" href="アイコン画像のURL" />
ページ毎にアイコンを作成していて、もし、表示確認などのテストを行う場合は、試すたびにiPhoneのSafariのキャッシュをクリアしないと、うまくいかないのでご注意ください。
Web Clipアイコンの参考文献
Web Clipのアイコン指定方法（Safari Web Content Guide）
Web Clipのアイコンサイズ仕様（iPhone Human Interface Guidelines for Web Applications）
コメント