苹果触摸图标的正确像素尺寸是多少？

Question

我不确定正确的尺寸应该是多少。

许多网站似乎都重复说 apple-touch-icon 应该是 57x57 像素，但引用了一个断开的链接作为其来源。

Hanselman 和 playgroundblues 的 cmets 建议不同的尺寸，包括 163x163 和 60x60。

Apple 自己的apple.com icon 是 129x129！

查看我的相关问题： How do I give my web sites an icon for iPhone?

Answer 1

2010 年 8 月 3 日的 Apple 指南现在似乎在其“必需”图标大小中包含“高分辨率”图像（适用于 iPhone 4）。

看来我们现在需要同时提供 57x57 和 114x114 的图片，以及 640x960 的标题图片。

参见Custom Icon and Image Creation Guidelines（需要Javascript），它是整个文档的一部分：

• iOS Human Interface Guidelines (2013; by Apple Inc; PDF; 26,3 MB)

Answer 2

取决于你希望它有多少细节，它需要有 1:1 的纵横比（基本上 - 它需要是方形的）

我会选择苹果自己的 129*129

Answer 3

Apple specs 为 iOS7 指定新尺寸：

• 60x60
• 76x76
• 120x120
• 152x152

而 iOS6 及之前的旧尺寸是：

• 57x57
• 72x72
• 114x114
• 144x144

顺便说一句，预先组合的图标已被弃用。

因此，为了支持新设备（运行 iOS7）和旧设备（iOS6 和更早版本），这 8 张图片必须存在，通用代码为：

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">    
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

另外，you should create a 152x152 picture named apple-touch-icon.png。

您可能想知道这个favicon generator 可以一次生成所有这些图片。完全披露：我是这个网站的作者。

Answer 4

官方尺寸为 57x57。我建议使用确切的大小，因为它在加载时占用的内存更少（除非 Apple 缓存缩放的表示）。话虽如此，Rex is right 任何正方形都可以使用

Answer 5

我认为没有“正确的尺寸”。由于 iPhone 确实运行的是 OSX，因此图标渲染系统非常强大。只要您为其提供具有正确纵横比和至少与实际输出一样高的分辨率的高质量图像，操作系统就会非常干净地缩小比例。我的网站使用 158x158，图标在 iPhone 屏幕上看起来像素完美。

Answer 6

2014 年 10 月更新列表，iOS8

适用于带和不带视网膜的 iPhone 和 iPad 的列表

<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">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

2014 年 iOS 8 更新：

适用于 iOS 8 和 iPhone 6 plus

<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png"> 

iPhone 6 使用与 iPhone 4 和 5 相同的 120 x 120 像素图像，其余与 iOS 7 相同

2013 年 iOS7 更新：

对于 iOS 7，建议的分辨率发生了变化：

• 适用于 iPhone Retina 从 114 x 114 像素到 120 x 120 像素
• 适用于 iPad 视网膜从 144 x 144 像素到 152 x 152 像素

其他分辨率还是一样

• 57 x 57 像素默认
• 76 x 76 像素，适用于不带视网膜的 iPad

Answer 7

您不必再为正确的尺寸而烦恼。如果您有图标的 iTunes 艺术文件（即 1024*1024 大小的文件），那么我创建了这个应用程序，它将根据here 提供的信息为您提供所有图标。获取application from here，并按照自述文件中的说明创建iOS应用程序所需的所有图标。