投稿者:

iPhone

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">

間違っていれば、ご指摘ください。