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

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

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 が新しいサイズのものを要求するかもしれないわけで面倒くさい話だよな、とか。画像解像度が上がっていくと、こういうことが続くらしい。

はてなブックマーク - apple-touch-icon.png に新しいサイズが加わっていた
Pocket


  1. nginx のログを logwatch で監視する | 脳無しの呟き《土鍋と麦酒と炬燵猫》』を参照してください。 []

関連してるかもしれないエントリ

dullahan

About dullahan

[ 猫 ] [ 料理 ] [ 飲んだくれ ] [ いい加減 ] Web 広告関連とかもしてるフリーランス。寝だめするわビール飲むわうるさいわ黙れ。メアド等の情報は About に。家族の猫は『あげ&まろ』だもの。飲み会予約するなら前日までに。
This entry was posted in WordPress, スマートフォン, ネット and tagged , , , , . Bookmark the permalink.

Comments are closed.