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はそちらを優先して使い、角丸などの処理だけしてアイコン化してくれます。

自動処理の画像は気に入らないけど、のっぺりしたアイコンもちょっと……という人は、アイコン自動処理サービス「iPhone / iTouch icon generator」がオススメです。

iPhone / iTouch icon generator（英語サイト）
→ http://www.flavorstudios.com/iphone-icon-generator

英語サイトですが、難しくありません。「Upload Image」タブをクリックして、ボタンのスタイルを選んでから下の「Upload Your Image」で元画像をアップロードすると、iPhoneボタン風にした画像を作ってくれます。