Main Contents

iPhone & iPad Web Clip icon

January 22, 2011 / Smart Phone, Web / icon

Post

2011 年に突入したので、WEB っぽいこと書くようにします。頑張ります。

で、ちょっと最近仕事でやってみたので、備忘録として書きます。
ネタとしては今更感漂ってますけど。。。

iPhone & iPad の Safari のブックマーク追加に、「ホーム画面に追加」がありますが、これ、何も設定していないとサイトの画面キャプチャになっちゃうんですよね。Web Clip という機能だそうです。
↓↓ こんな風に。充電残り 35% ・・・

でもこんな表示でホームに置きたくない！ですし、なんのサイトって感じです。。

そこで、iPhone & iPad 用のアイコン画像を png で用意します。
画像の名前は apple-touch-icon.png にしてください。
↓↓ 今回用意した画像はこれ。
※用意する画像のサイズについては後述します。

あとは Favicon を設定するノリで <head> タグ内にちょちょっと一行付け足します。

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

画像のパスは任意で変更してください。
上記はルートにある想定です。

↓↓ ここまでで確認するとこうなります。

勝手にグロス加工と角丸処理してくれちゃいます。

でも、グロス加工されていないサイトもありますよね？
というかむしろ、グロス具合も自分で調整したい！
だとか、グロス加工しないでーー！とかっていう場合もあると思います。

そんなときは apple-touch-icon-precomposed.png という名前の画像を用意して、下記のように書いてください。

<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />

↓↓ 結果を確認するとこうなります。

これでデザインした通りの角丸処理された icon ができます。
ちなみにですが、iPhone OS 2.0 以前では apple-touch-icon-precomposed.png が使えないようです。
どれだけシェアがあるのかわかりませんが、2つ用意すれば安心？

icon 画像のサイズですが、正方形で [ iPhone :: 57px ] [ iPad :: 72px ] です。
ちなみに、iPhone4 は Retina ディスプレイを搭載しているため、ディスプレイが [ iPhone 3GS :: 480×320 ] であるのに対して [ iPhone 4 :: 960×640 ] ですので、[ iPhone 4 :: 114px ] になります。
1つの画像で設定したいので、出来れば最小公倍数がいいかなーと思いましたが、1,368px に。。。
縮小と角丸処理をしてくれるので、大きめに 256px くらいがいいかもしれません。

↓↓ その他のアイコンサイズについてここにきれいにまとめられています。
The Icon Reference Chart is one of Hicksdesign's Goodies

ちなみに透過 png を使うとどうなるかというと、透過部分は黒くなってしまいます。