iPhone / iPad サイズ別 apple-touch-icon.png 作成

iOS 4.2以降、iPhoneやiPadのSafariで、ホーム画面にブックマークを登録する際に表示される「Webクリップブックマークアイコン」を、デバイスの解像度別に指定することができるようになったようです。

まず、端末別のアイコンサイズは次のとおりです。

デバイス	サイズ
iPhone 3G	57×57ピクセル
iPhone 4	114×114ピクセル
iPad	72×72ピクセル

アイコン（PNG）を指定するには、linkタグで指定する方法と、特定のファイル名で保存する方法の2種類があります。

アイコン画像をlinkタグで指定する

全てのデバイス共通のアイコンを指定するには、次のコードをHTMLのheadタグ内に記入します。

<link rel="apple-touch-icon" href="apple-touch-icon.png" />

さらに、デバイス別にアイコンを変更するには、「sizes」属性でサイズを指定します。iPhone 4（Retinaディスプレイ）の記入例は次のとおりです。

<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />

このようにして3種類のサイズのアイコンを指定すると、次のようなコードになります。

<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />

ちなみに、「rel」属性の値が「apple-touch-icon」の場合は「光沢処理あり」、「apple-touch-icon-precomposed」の場合は「光沢処理なし」です。

link要素

属性	値
rel	apple-touch-icon, apple-touch-icon-precomposed
href	アイコン画像のURL
sizes	57x57, 72x72, 114x114

アイコン画像を特定のファイル名で保存する

全てのデバイス共通のアイコンを指定するには、アイコン画像を「apple-touch-icon.png」というファイル名で、Webサーバーのルートディレクトリに保存（絶対パス「/apple-touch-icon.png」）します。

デバイス別のアイコンは、「apple-touch-icon」の後ろにサイズを記したファイル名にします。

iPhone 3G	apple-touch-icon-57x57.png
iPad	apple-touch-icon-72x72.png
iPhone 4	apple-touch-icon-114x114.png

ファイル名の最後（拡張子の前）に「-precomposed」を付ける（例「apple-touch-icon-57x57-precomposed.png」）と、光沢処理がされません。

ホーム画面にブックマークを追加しようとすると、Safariは次のような順序でアイコンファイルを探し出します。

1. GET /apple-touch-icon-57x57-precomposed.png
2. GET /apple-touch-icon-57x57.png
3. GET /apple-touch-icon-precomposed.png
4. GET /apple-touch-icon.png

このような方法で、デバイス別のアイコンを指定できますが、画像サイズが異なっていても自動的にリサイズされます。なので、リサイズすると画像が乱れる場合や、デバイス別に異なる絵柄のアイコンを指定する場合などを除いては、大きめのサイズの共通アイコンを1つだけ用意しておけば十分だと思います。

参考ページ

• Specifying a Webpage Icon for Web Clip