MobileSafari

Web Clip Icons サイズまとめ

More than 3 years have passed since last update.

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