iPhone/iPadのホーム画面用アイコンをサイトに設定しよう

このサービスを使って作った256pxバージョンの画像を「-precomposed」として使えばいいのです。大きな画像をアップしておけば自動的にリサイズしてくれます。iPhoneではアイコンのサイズは57px×57pxですが、iPadでは72px×72pxのようですから、大きめの画像を作ってアップしておくのがいいでしょう。57と72の最小公倍数をとると1368pxになってしまうので、ここは256pxで作っておきましょう。

あと、処理済みのファイルを使わせるなら「apple-touch-icon-precomposed.png」だけでいいかと思ってしまいがちですが、残念ながらiPhone OS 2.0より前のバージョンでは、「-precomposed」のほうは使ってくれません。ですので、両方のファイルを置いておく必要があるのです。

ちなみに、faviconでもそうですが、ページごとに異なるアイコンを指定することも可能です。次のようなHTMLタグをページのhead要素内に書いて、好きなアイコン画像を指定すればいいのです。

----------------------------------------------------------------------

----------------------------------------------------------------------

また、テスト時には、試すたびにiPhoneのSafariのキャッシュをクリアしないと、うまくいかないのでご注意くださいませ。

こんな話題今さら、と言われそうですが、まぁ、私もいまごろになって404ログを眺めていてこのアイコンを設定してないのに気づいたので、遅い情報ではありますが、お役に立てましたら。

その他、オフィシャルのドキュメントなどへのリンクを紹介しておきましょう（英語）。

・ Web Clipのアイコン指定方法（Safari Web Content Guide）
・ Web Clipのアイコンサイズ仕様（iPhone Human Interface Guidelines for Web Applications）
・ iPad のアイコンサイズ仕様（iPad Human Interface Guidelines）

※この記事は、Web担当者Forum（Web担）に掲載した編集部コラムを転載しています。
元記事：iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう
Web担当者Forumは企業ホームページ作りとネットマーケティングに関する情報サイトで、解説記事、コラム、ニュース記事などを毎日更新でお届けしています。
毎週月曜日発行のメールマガジンもありますので、興味のある方はぜひご登録ください。