iOS5,6,7のブックマークアイコンのサイズをまとめたPhotoshopデータとhtmlのアイコン設定方法

icon_format

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
  • このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

6 + 7 =