編集長ブログ―安田英久
iPhone/iPadのホーム画面用アイコンapple-touch-icon.pngをサイトに設定しよう

iPhone/iPadのホーム画面にあなたのサイトが追加されたときに表示されるアイコンの設定方法

今日は、「Webサイトを作ったらまずやるべきこと」に追加する内容をお伝えします。iPhone/iPadのホーム画面にあなたのサイトが追加されたときに表示されるアイコンの設定方法です。

Webサイトを作ったらまずやるべきことチェックリストという、はてブ2000ブクマ以上の大人気記事がありますが、そこに追加すべき内容が1つ増えていました。iPhone/iPad用のアイコン設定です。

iPhone用のSafariでは、ブックマーク追加メニューから「ホーム画面に追加」を選ぶと、ホームにそのサイトのアイコンを追加できます。アップルはこれは「Web Clip(ウェブクリップ)」と呼んでいるようです。

iPhoneでは見づらかったPC向けサイトもiPadでは比較的見やすくなるため、お気に入りのサイトをiPadのホームに追加する人が増えているのではないでしょうか。

こうしてホーム画面に追加されたときに表示されるアイコンは、何もしなければそのサイトの画面キャプチャになります。

標準のWeb Clipアイコンは画面キャプチャになる。

これでは、何のサイトかわかりませんね。しかし、そこはアップル、表示するアイコンをWeb担当者が指定する方法を用意しています。

アイコンを、

  • 「apple-touch-icon.png」というファイル名の
  • PNG画像として
  • サイトのルートディレクトリに置いておく

だけです。faviconのようなものですね。iPhone用Safariは、その名前の画像があると、それを勝手に角丸にしたりハイライト/シャドウを付けたりして、iPhone風のアイコンにして使ってくれます。最終的なアイコンは57px×57pxにリサイズして使われ、透過色は無視されて黒色になってしまうようです。

とりあえず適当に作ってアップしたアイコン。
iPhone風アイコンに勝手に処理してくれる。

ただ、自動処理に任せると、意外と見づらいアイコンになってしまう場合もあります。そういった場合は、「apple-touch-icon-precomposed.png」というファイル名で画像をアップロードしておくと、iPhoneはそちらを優先して使い、角丸などの処理だけしてアイコン化してくれます。

ファイル名を-precomposed.pngにするとハイライト系の処理はされない。

自動処理の画像は気に入らないけど、のっぺりしたアイコンもちょっと……という人は、アイコン自動処理サービス「iPhone / iTouch icon generator」がオススメです。

iPhone / iTouch icon generator(英語サイト)
http://www.flavorstudios.com/iphone-icon-generator

英語サイトですが、難しくありません。「Upload Image」タブをクリックして、ボタンのスタイルを選んでから下の「Upload Your Image」で元画像をアップロードすると、iPhoneボタン風にした画像を作ってくれます。

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

※2010-06-15追記 iPhone 4(iOS 4)では114px×114pxとのこと。

自分で好きな処理をかけたものを-precomposed.pngのファイル名で使うのがいいでしょう。

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

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

<link rel="apple-touch-icon" href="アイコンファイル名" />

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

ホーム画面に設定されたWeb担のWeb Clipアイコン

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

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

tweet139このエントリーをはてなブックマークに追加
日本赤十字社 東日本大震災 義援金募集
Web担メルマガでラクラク情報ライフを
注目記事が毎週手もとに届いて見逃さない
要チェックのセミナー情報もゲットできる
編集長コラムを一足先に読める
―― 10万人が読んでいる、Web担必読メルマガです

今日の用語

XMLサイトマップ
検索エンジンに対して、サイト内にあるページをリストアップして伝えるファイル。XM ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスHP Softwareトランスコスモス株式会社株式会社ハイパーボックスDomain Keeperアドビ システムズ 株式会社
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社SitecoreYahoo!プロモーション広告Oracle