21
21

More than 5 years have passed since last update.

apple-touch-iconの機種/OS別サイズとlinkタグの書き方

Last updated at Posted at 2013-12-21

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ぐらいで作っとけばいいんじゃないですかね?

参考文献

21
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
21