アクセスログに「apple-touch-iconが見つからない」という404エラーが大量に出ているのに気づいた。
apple-touch-iconって何？
apple-touch-iconはWebクリップと呼ばれるアイコンのことだ。iPhoneやiPadでは好きなページをホーム画面に置いておくおことができる。「ホーム画面に追加」で出来るあれだ。ホーム画面に追加したときに表示されているアイコンがWebクリップだ。
公式ドキュメントへのリンクを貼っておく。
apple-touch-iconのエラーを回避する
正しい対応は公式ドキュメントに沿った形で設定すれば良い。しかし、ろWebクリップアイコンの重要性はサイト管理者によってまちまちだろう。例えば自分のサイトは今のところ必要ないと感じている。。。そこで404エラーがスタックされないように 最低限の対応 をする。
apple-touch-iconを作成する
apple-touch-iconを作成します。
まず、サイズはデバイス・解像度ごとに異なるが、最適なサイズのものが自動的に選ばれるから、適当なものを一つ作成すれば良い。App Storeでは1024×1024のサイズで表示されるが、アプリではなくApp Storeに掲載する予定もないので大きいサイズは不要。次に大きいのがiPhoneで解像度が高い場合に使われる180x180pxだ。
180x180pxで作成しておけばiPad含め他の全サイズに対応できる。適当な画像を作成してapple-touch-icon.pngとして保存した。
apple-touch-iconを設置する
次に、作成したapple-touch-icon.pngを設置する。
ファビコンと同じようにドキュメントルートに直接設置すれば良い。
ところで、apple-touch-icon.png以外にも似たようなリクエストがたくさん来ていた。apple-touch-icon-120×120.png, apple-touch-icon-150×150.png, apple-touch-icon-120×120-precomposed.png などだ。これらは同じアイコンのバージョン違いで、デバイスやOSごとに適切なアイコンが見つかるまで順にリクエストが飛んできているというわけだ。
apple-touch-icon.pngだけを設置しても他のバージョンへのリクエストは404エラーになってしまう。そこで、これらのリクエストに対して全てapple-touch-icon.pngを返すような設定をした。
RewriteRule ^/apple-touch-icon-.*?\.png$ /apple-touch-icon.png [L]
Apacheの設定ファイルに上記の設定を追加することで、apple-touch-icon-で始まるpngファイルのリクエストは全てapple-touch-icon.pngが返されることになった。試しに複数のデバイスでwebクリップの表示を確認したところ問題なく設定されており、アクセスログからもエラーが消えてステータス200を返すようになっていた。
おわりに
より正確に対応するためには各デバイスごとのアイコンを用意しよう。
apple-touch-iconを設定する方法は、この記事で紹介したようにドキュメントルートに置いてサイトの前ページに反映する他に、各ページのヘッダのリンク要素でアイコンファイルを指定することもできる。サイズ毎にどのファイルを使うかを個別に設定することもできる。
