Web Clip Icons とは

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 だけ使ってもオッケ