iOS5,6,7のブックマークアイコンのサイズをまとめたPhotoshopデータとhtmlのアイコン設定方法
iOS7がリリースされてiPhone/iPadのホーム画面に追加するブックマークアイコンのサイズが増えたのでPhotoshopのテンプレ作りました。まぁテクノロージーの進化なので仕方のないことなのはわかっていても、こういうキャッシュが絡んでたりするのはテストが面倒なんですよね。
iPhoneとiPadのiOS5〜7で使うアイコンのサイズ、種類
iPhone | iPad | サイズ | 角丸半径 | ||
---|---|---|---|---|---|
iOS5,6 | iOS7 | iOS5,6 | iOS7 | ||
○ | 57 x 57 | 10 | |||
○ | 114 x 114 | 20 | |||
○ | 120 x 120 | 26 | |||
○ | 72 x 72 | 12 | |||
○ | 144 x 144 | 24 | |||
○ | 76 x 76 | 17 | |||
○ | 152 x 152 | 34 |
htmlの”head”に記述するコード。
iPhoneの場合、link要素のrel属性値を「apple-touch-icon」とすれば、光沢などの画像処理が自動的に行われ、「apple-touch-icon-precomposed」とすれば光沢処理は行われません。それに対して、Androidでは「apple-touch-icon」「apple-touch-icon-precomposed」どちらでも光沢処理は行われません
iPhone と Android の apple-touch-icon の違い – Fonland
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="icon76@2x.png"> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="icon72@2x.png"> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="icon60@2x.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="icon@2x.png"> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="icon76.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="icon72.png"> <link rel="apple-touch-icon-precomposed" href="icon.png">
iPhoneは、「apple-touch-icon」「apple-touch-icon-precomposed」ともに、最初に指定したアイコンが有効になるようです。一方Androidは、「apple-touch-icon」の場合は最初に指定したアイコン、「apple-touch-icon-precomposed」の場合は最後に指定したアイコンが有効になるようです。
iPhone と Android の apple-touch-icon の違い – Fonland