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

画像: Matthew Guay

2010.06.29

IT・WEB

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

安田 英久
株式会社インプレスビジネスメディア Web担当者Forum編集長

今日は、「Webサイトを作ったらまずやるべきこと」に追加する内容をお伝えします。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は企業ホームページ作りとネットマーケティングに関する情報サイトで、解説記事、コラム、ニュース記事などを毎日更新でお届けしています。
毎週月曜日発行のメールマガジンもありますので、興味のある方はぜひご登録ください。

続きは会員限定です。無料の読者会員に登録すると続きをお読みいただけます。

Ads by Google

この記事が気に入ったらいいね!しよう
INSIGHT NOW!の最新記事をお届けします

安田 英久

株式会社インプレスビジネスメディア Web担当者Forum編集長

企業のウェブサイト活用やウェブマーケティングに関するメディア「Web担当者Forum」(http://web-tan.forum.impressrd.jp/)を運営しています。

フォロー フォローして安田 英久の新着記事を受け取る

一歩先を行く最新ビジネス記事を受け取る

ログイン

この機能をご利用いただくにはログインが必要です。

ご登録いただいたメールアドレス、パスワードを入力してログインしてください。

パスワードをお忘れの方

フェイスブックのアカウントでもログインできます。

INSIGHT NOW!のご利用規約プライバシーポリシーーが適用されます。
INSIGHT NOW!が無断でタイムラインに投稿することはありません。