ふとNginxのログを見てみると404エラーがずらずらと

「apple-touch-icon-152×152-precomposed.png」という画像が無いという404エラーが発生。
「そもそも、そんな画像を指定した覚えがないな」と思いつつ検索してみると、iPhoneやiPadで「Web Clip」の際に使う「Webpage Icon」が無いというエラーのようです。

そもそも作ってないんだから見つからなくてあたりまえですが、「俺好みのアイコンがねーぞー！どこだー！！」とログに404を残しまくる仕様は、まるでちょっとしたチ◯ピラのようですねｗ

以下Nginxのエラーログ

2014/09/17 18:50:04 [error] 6246#0: *164 open() "/var/www/html/aqwiki/apple-touch-icon-152x152-precomposed.png" failed (2: No such file or directory), client: 198.162.0.0, server: aqwiki.net, request: "GET /apple-touch-icon-152x152-precomposed.png HTTP/1.0", host: "aqwiki.net"

話題の会社で採用されるWebpage Icon

せっかく記事にするので、思いつくままWebサイトを選んで、どのようなWebpage Iconを作成しているのか調べてみました。

（順不同・敬称略）

URL	Iconサイズ	アイコン
DeNA	129×129
Pocket	144×144
Gunosy	213×188
価格.com	129×129
日本マクドナルド	114×114
mixi	129×129
note	256×256
SPIKE	128×128
SUZURI	154×154
Dropbox	152×152
Facebook	57×57
Google	120×120
スタートトゥデイ	144×144
東京ディズニーランド	144×144

こうして並べてみると、名前は「apple-touch-icon」としながらもサイズはバラバラですね。Appleの仕様変更に振り回されてたまるかとばかりに、大きな画像のみを用意するところが多かったのが印象的です。

それでは、せっかくWeb Clipに登録していただいた方のためにも、アイコンを作成しようと思います。

Web Clipアイコンのフォーマットと作り方

公式ページである「iOS Developer Library」には複数の記述方法が書いてあります。アイコンの作成方法を検索したところ、この辺の仕様を勘違いして解説しているサイトがおおいようです。

単一のアイコンを利用する場合は「サイトのルートディレクトリにapple-touch-icon.pngというファイルを置く」だけで表示されます。

ちなみにiOS8がリリースされましたが、仕様の変更はないようです。

厳密に言えばiPhone 5とiPod touchは120×120、iPadとiPad miniは152×152です。しかし公式には「適当なサイズの画像が見つからない場合は、大きなサイズの画像を縮小して表示する」と書いてあります。
また、複数のサイズを用意した場合はHTMLに以下のように指定しないといけません。

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

さらにツヤなし用、ツヤあり用という指定もあります。こうした細かな仕様に合わせるとなるとAndroid用、GALAXY用と増えていき、2014年現在23個もの画像が必要になるようです。
とても付き合ってられませんねｗ

大は小を兼ねると言わんばかりに、152×152のアイコンだけ作成します。

アイコン作成用のひな形ですが、なぜかApple側で用意されていません。そこでPhotoshop形式でパスまで付いているDIGLOGさんの配布しているデータを元に作成します。

よいしょ、と作成したのが以下のアイコンです。

一番上が76×76、真ん中が120×120、一番下が152×152

縮小する際にエイリアスをかけてくれれば、わざわざ小さなアイコンを作る必要はなさそうですね。

faviconとたいして変わらないですが、Webサイトのアイコンなんてこんなもんですｗ