apple-touch-icon.png をサイトに設定する意味のまとめ

サーバ上の過去の不要なファイルをお掃除したので、久々にアクセスログで 404 の解析をしていたら、案の定消しすぎていたファイルの他に、見慣れないログを見かけました。

"GET /apple-touch-icon-114x114-precomposed.png HTTP/1.1" 404 962 "-" "MobileSafari/6533.18.5 CFNetwork/485.13.9 Darwin/11.0.0"
"GET /apple-touch-icon-114x114.png HTTP/1.1" 404 962 "-" "MobileSafari/6533.18.5 CFNetwork/485.13.9 Darwin/11.0.0"
"GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 962 "-" "MobileSafari/6533.18.5 CFNetwork/485.13.9 Darwin/11.0.0"
"GET /apple-touch-icon.png HTTP/1.1" 404 962 "-" "MobileSafari/6533.18.5 CFNetwork/485.13.9 Darwin/11.0.0"

調べてみたところ、昨今のスマートフォン主流の時代においては、とっても重要なファイルであるようです。いろいろ知らないことばかりだったので、まとめ記事を書きました。

- スポンサーリンク -

iPhone、iPad では、ホーム画面にウェブサイトへのショートカットを置くことができます。ショートカットを設置するとホーム画面に並ぶアイコンと同様のサイズのアイコンが設置されます。Favicon にちょっと役割が似ているこのアイコンのことを WebClip Bookmark Icon （ウェブクリップアイコン）と呼びます。

デフォルトでは表示中のページを縮小した画像が、アイコンとしてホーム画面に登録されます。クリップ向けアイコンがサーバ上に設置されている場合は、そのアイコンがホーム画面に登録されます。サイトを縮小したアイコンをみても潰れて何が何だかわからない画像になっちゃうので、クリップ画像は是非とも用意しておきたいところです。

WebClip Bookmark Ico の作成について

WebClip Bookmark Ico は幾つか約束事があるのでまとめました。
最終的に用意するファイルは全部で６種類になります。

iPhone4,4S （Retina対応機種）は114 x 114 px のアイコン画像（PNG形式）
　1. apple-touch-icon-114x114-precomposed.png
　2. apple-touch-icon-114x114.png

iPad は72 x 72 px のアイコン画像（PNG形式）
　3. apple-touch-icon-72x72-precomposed.png
　4. apple-touch-icon-72x72.png

それ以外は 57 x 57 px のアイコン画像（PNG形式）
　5. apple-touch-icon-precomposed.png
　6. apple-touch-icon.png

表示優先順位は、iPhone 系であれば、1,2,5,6 の順です。iPad 系であれば、3,4,5,6 の順です。（多分そうです・・・。ウソ着いてたらごめんなさい。）
*icon,png と *icon-precomposed.png の違いは、前者がよく見かけるガラスの光沢加工を行うのに対して、後者は光沢加工を行いません。またどちらも四隅の角丸加工が行われます。

つまり何も考えずにサイトのロゴなどをベースに 114 px, 72px, 57px の三種類のアイコン画像を作成して、それぞれ複製して *icon,png と *icon-precomposed.png の２種類を作成しちゃえばＯＫです。またサイズが異なる際にはリサイズ処理も行われるため、手抜きするなら全て 114 px のアイコンを複製するだけでもよいでしょう。
また透明色は全て黒に変換されるので注意が必要です。

なおいろいろ設置して検証してみたところ、上記６つのファイルが揃っていないと 404 エラーを全て消すことができなかったので、404 が気持ち悪い人は全て揃えましょう。気持ち悪くない人は、5,6 のみでかまわないでしょう。

WebClip Bookmark Ico の設置について

設置方法は二種類あります。サーバ上に設置する方法が圧倒的に楽です。

1. サーバのドキュメントルートにファイルを設置する

このエントリの読者層なら敢えて説明することもないと思うので説明は割愛しますが、前項で説明した６つのファイルを / 配下に設置するのみです。あとは iPhone など端末側が勝手に読みに来てくれます。

2. 任意の場所に設置してコンテンツ内にリンクを規定する

別に 1 の方法をとれば良いだけの気もしますが、下記のようなタグを <head>～</head> 内に埋め込むことで任意のパスの画像を指定することが可能となります。size 属性で機種毎に適用する画像を切り分けることができることもメリットです。下記のタグを設置すれば Android 2.3 以降であればホーム画面にアイコンを表示できるようになると思います。

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

なお、「iPhone と Android の apple-touch-icon の違い - Fonland:」　によれば、複数指定した場合に下記のような挙動の違いが iPhone と Android で発生するようです。

iPhoneは、「apple-touch-icon」「apple-touch-icon-precomposed」ともに、最初に指定したアイコンが有効になるようです。一方Androidは、「apple-touch-icon」の場合は最初に指定したアイコン、「apple-touch-icon-precomposed」の場合は最後に指定したアイコンが有効になるようです。

最後に参考にした情報はこちらです。