別冊webメモ

自分用リファレンス&アウトプット

[ iOS7〜]apple-touch-icon(Webクリップアイコン)のサイズ

サイト用にfaviconをつくるときに、一緒にapple-touch-iconもつくってしまいましょう。
 

apple-touch-icon(Webクリップアイコン)とは

webサイトへのショートカットを、スマホのホーム画面につくることのできます。*1
その際にアイコンとして表示されるのが「apple-touch-icon」です。
このアイコンをタップする事で、コンテンツに簡単にアクセスすることができます。*2
 

どのサイズでつくるのか

推奨サイズは以下です。

iPhone / iPod touch

120×120 px(Retina)
60×60 px(標準解像度)

とりあえず一番大きいサイズをつくればOK

デバイスごとにリサイズしてくれるようなので、
一番画像サイズの大きい、iPad Retina用「152×152 px」で
1個つくってしまえば対応できそうです。
 

iOS7からサイズがかわりました!152×152 px!

ググると、iPad Retinaのapple-touch-iconのサイズは「144 x 144 px」だ、
という記事が多くでてきますが、iOS7の登場で「152×152 px」に変更になりました。

f:id:aoicotori:20131209131746j:plain
ということで、今つくるなら「152×152 px」です。(2013年12月現在)
 

iOS7から角丸のサイズがかわりました!

f:id:aoicotori:20131209132748j:plain
iOS7以前より、角の丸みが増しました。
iOS6、iOS7両方に対応したデザインにしましょう。
 

apple-touch-iconのファイル名

apple-touch-iconは自分で角丸にする必要はありません。
正方形で制作して「apple-touch-icon.png」というファイル名でアップすれば、
自動的に角丸にしてくれます。 ファイル形式は「.png」です。

iOS7でフラットデザインになったため、
以前使われていたテリッとした効果をなしにするファイル名
apple-touch-icon-precomposed.png」にしなくても、効果はつかなくなったようです。*3


各サイズ対応とかAndroid対応などもありますが、ひとまず。

*1:iOSSafariのブックマークにもWebクリップアイコンを表示します。

*2:iPhone/iPadの対応を基準に書いています。Androidは端末ごとで仕様が違うようです。 (要別対応)

*3:IOS7以降は