iOS7でapple-touch-iconのサイズが変わっていたので調べてみました。
機種 | iOS | Retina | 非Retina |
---|---|---|---|
iPhone | ~6 | 114x114 | 57x57 |
iPhone | 7~8 | 120x120 | なし *1 |
iPhone6Plus | 8 | 180x180 | なし *1 |
iPad *2 | ~6 | 144x144 | 72x72 |
iPad *2 | 7~8 | 152x152 | 76x76 |
*1 RetinaでないiPhone(3GS/3G)はiOS7にアップグレードできない
*2 iPad/iPad miniは画面サイズは違うが解像度は同じ
linkタグの書き方
Safari Web Content Guide: Configuring Web Applications より引用。サイズごとに別のファイルを指定できる。
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
sizes属性を省略すると60x60とみなされ、デバイスに最適なサイズがHTMLに明示されていない場合は最適なサイズより大きいものの中で最小のものが選択される。
結論
めんどくさいからもう256pxぐらいで作っとけばいいんじゃないですかね?