Web Clip Icons とは
サイズまとめ
| iPhone | iPhone retina | @3x | iPad | iPad retina | |
|---|---|---|---|---|---|
| iOS 6.x と以前 | 57*57 | 114*114 | N/A † | 72*72 | 144*144 |
| iOS 7.x と以降 | 60*60 | 120*120 | 180*180 | 76*76 | 152*152 |
(単位：pixels)
†: @3x is for iPhone 6 Plus (and its ongoing models), which is started from iOS 8, no need to prepare the icon for iOS 6 and before.
ファイルネーム
apple-touch-icon-[長]x[寬].png
例：
apple-touch-icon-57x57.png
使い方
<head></head> のの中に使ってください：
<html>
<head>
... 略 ...
<!-- iOS Webapp -->
<!-- iPhone - iOS 6 -->
<link rel="apple-touch-icon" sizes="57x57" href="/path/to/apple-touch-icon-57x57.png">
<!-- iPhone - iOS 7 -->
<link rel="apple-touch-icon" sizes="60x60" href="/path/to/apple-touch-icon-60x60.png">
<!-- iPhone (Retina) - iOS 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/path/to/apple-touch-icon-114x114.png">
<!-- iPhone (Retina) - iOS 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/path/to/apple-touch-icon-120x120.png">
<!-- iPhone @3x -->
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/apple-touch-icon-180x180.png">
<!-- iPad - iOS 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="/path/to/apple-touch-icon-72x72.png">
<!-- iPad - iOS 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="/path/to/apple-touch-icon-76x76.png">
<!-- iPad (Retina) - iOS 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/path/to/apple-touch-icon-144x144.png">
<!-- iPad (Retina) - iOS 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/path/to/apple-touch-icon-152x152.png">
</head>
<body>
... 略 ...
</body>
</html>
面倒くさいなら ...
じゃ、 最大サイズの 180x180 だけ使ってもオッケ