apple-touch-icon.png に新しいサイズが加わっていた

もふもふあげさん スマートフォン
この記事は約3分で読めます。
スポンサーリンク

このブログのアクセスログなのだけど、何かしらのエラーを吐いた場合は logwatch からのメールで報告してもらうようにしている [01] 。そのメールに記述されていたのが apple-touch-icon で始まる png ファイルへのアクセス。

404 Not Found
 /apple-touch-icon-precomposed.png: 8 Time(s)
 /apple-touch-icon.png: 8 Time(s)

nginx のログをメールするようにしたのは先月のことだったので、まったくのノーチェック。「なんじゃこりゃ」ということで調べてみたら、スマートフォン系デバイスにおけるホーム用ショートカットにて使用される画像だったらしい。正式名称は WebClip Bookmark Icon とのこと。こんなのまったく知らなかった。

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

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

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

というわけで上記サイトを参考に3×2種類のアイコンを用意して Web サーバのルート上に放り込めば良いということらしい。本来であれば縦横 114px、72px、57px のものなのだけど、私の場合は面倒くさかったので Favicon で利用したいつものやつを名称変更するだけで投入。

これで一旦アクセスログからはエラーが消えたのだけど、つい最近になって 144×144 のサイズもリクエストしてくるようになった。iPhone 5 が出てからなので、もしかしたらそれのせいかもしれない。iPhone は所持してないからわからなかったのですよね。

そういうことで、Web サーバのルート上に設置するファイルは Android 用も含めて以下のようになった。

  1. apple-touch-icon-144×144-precomposed.png
  2. apple-touch-icon-144×144.png
  3. apple-touch-icon-114×114-precomposed.png
  4. apple-touch-icon-114×114.png
  5. apple-touch-icon-72×72-precomposed.png
  6. apple-touch-icon-72×72.png
  7. apple-touch-icon-precomposed.png
  8. apple-touch-icon.png
  9. android.png

これで想定してなかったファイルへのアクセス対応はできたから良かったのだけど、このまま放置しておくとまた Apple が新しいサイズのものを要求するかもしれないわけで面倒くさい話だよな、とか。画像解像度が上がっていくと、こういうことが続くらしい。

タイトルとURLをコピーしました