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

Question

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

许多网站似乎重复苹果触摸图标应该是 57x57 像素，但引用断开的链接作为其来源。

Hanselman和playgroundblues的评论建议使用不同的尺寸，包括 163x163 和 60x60。

Apple 自己的apple.com 图标是 129x129！

请参阅我的相关问题： 如何为我的网站提供 iPhone 图标？

Answer 1

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

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

请参阅作为整个文档的一部分的自定义图标和图像创建指南（需要 Javascript）：

• iOS 人机界面指南（2013 年；Apple Inc；PDF；26,3 MB）

Answer 2

来自Apple Developer Connection - Web Apps Dev Center - Designing Content的 Google 缓存...

创建 Web Clip 书签图标

iPhone 和 iPod touch 允许用户在其主屏幕上将 Web Clip 书签保存到您的站点。

要为网站的所有页面指定书签图标，请将名为“apple-touch-icon.png”的 PNG 图像放置在您的 Web 服务器的根目录中 - 类似于站点图标的“favicon.ico”。

要覆盖特定网页上的站点书签图标，请在页面的 <head> 元素中插入类似于 <link rel="apple-touch-icon" href="/customIcon.png"/> 的 <link> 元素.

书签图标尺寸应为 57x57 像素。 如果图标的大小不同，它将被缩放和裁剪以适应。

Safari 会自动将图标与标准的“玻璃状”覆盖层合成，使其看起来像一个内置的 iPhone 或 iPod 应用程序。

Answer 3

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

我会用苹果自己的 129*129

Answer 4

Apple 规范为 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">

此外，您应该创建一个名为apple-touch-icon.png的 152x152 图片。

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

Answer 5

我无法引用这些尺寸的来源，因为官方参考已被 ADC 锁定。

但是，许多非保密协议站点都有关于如何创建图标的教程。 例如这里：

• HOWTO：iPhone Webclip 图标（2008 年 1 月；Dan Dickinson）

Answer 6

作为 Safari Web 内容指南的一部分，Apple 实际上有一个名为“ 为 Web Clip 指定网页图标”（需要 Javascript）的公开页面，其中涵盖了所有分辨率及其实现。

• Safari Web 内容指南（2012 年；Apple Inc；PDF；6,91 MB）

Answer 7

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

Answer 8

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

Answer 9

更新列表 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 px 图像，其余与 iOS 7 相同

更新 2013 iOS7：

对于 iOS 7，推荐的分辨率已更改：

• iPhone Retina 从 114 x 114 px 到 120 x 120 px
• iPad Retina 从 144 x 144 px 到 152 x 152 px

其他分辨率还是一样

• 默认 57 x 57 像素
• 76 x 76 px 适用于没有视网膜的 iPad

Answer 10

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

Answer 11

NilObject的链接导致我伟大的博客帖子上的图标追赶在makentosh.com

...当然，所有这些不一致最终都必须处理，对吗？ 2.0 很好地处理了它！ 最后 57x57 实际上意味着 57x57。

...每一个像素...完美呈现。