Webクリップ(Web Clip)アイコン apple-touch-iconの設定の仕方 iOS7版 まとめ
apple-touch-iconの設定の仕方については、いろんなサイトに記述がありますが、間違っているのか、古いのか、実際の決められた仕様にのっとっていない情報が多かったので、書いておきます。
apple-touch-iconを設定したけどぼやけた画像になってしまう！とお悩みの方は、おそらく古い解像度で作ってます。
ちなみにこれは2014年3月7日時点の情報です。
作るべきapple-touch-iconのサイズは、次の通りです。
iPhoneおよびiPod touch
120×120ピクセル
60×60ピクセル（標準解像度）
iPad
152×152ピクセル
76×76ピクセル（標準解像度）
ここまでのWebクリップ(Web Clip)アイコンに関するiOSの公式サイトのリンクは下記。
https://developer.apple.com/jp/devcenter/ios/library/documentation/userexperience/conceptual/mobilehig/WebClipIcons/WebClipIcons.html
で、それらのアイコンを作って、
apple-touch-icon-76x76.png
という名前をつけておいてWebサーバーのルートにおいておけばも、デバイスが勝手に認識してくれるようですが、より確実を期したい場合は、htmlにリンクを張った方がいいですね。
次のように書きます。
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
HTMLのリンクに関する書き方はこちら
Configuring Web Applications
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4
ですが、サーバーのエラーログで、
File does not exist: /public_html/apple-touch-icon-precomposed.png
とかが出まくったりします。
apple-touch-icon-precomposed.pngというのも用意しないといけないようです。
precomposedとは何かというと、ツヤなしのアイコンです。
「ツヤは勝手にiPhoneがつけるのに？ツヤなしの画像をおかないといけないの？」
と疑問に思いますが、ツヤあり、ツヤなしで画像を分けたい人はともかく、そうでなければapple-touch-icon.pngをコピペして、apple-touch-icon-precomposed.pngとリネームすればいいと思います。
で、それをサイズ別に作ります。
サーバーのルートにアップロードし、リンクを張ります。
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png">
だいぶ面倒ですね。
まとめ
まとめますと、作る画像は次の通り。
apple-touch-icon.png apple-touch-icon-76x76.png apple-touch-icon-120.png apple-touch-icon-152x152.png
張るリンクは次の通りです。
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/apple-touch-icon-76x76-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/apple-touch-icon-120-precomposed.png"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png">
間違っていれば、ご指摘ください。