Posted at

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