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

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

许多网站似乎重复苹果触摸图标应该是57x57像素，但引用了一个破碎的链接作为他们的来源。

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

苹果自己的 苹果网站的图标是129x129！

请看我的相关问题: 我如何给我的网站一个 iPhone 的图标？

51334 次浏览
小开

我不认为有一个“正确的尺寸”。由于 iPhone 实际上运行的是 OSX，图标渲染系统相当健壮。只要你给它一个高质量的图像与正确的纵横比和分辨率至少高的实际输出将是，操作系统将缩小非常干净。我的网站使用158x158，图标在 iPhone 屏幕上看起来像素完美。

小开

取决于你想要它有多少细节，它需要有1:1的高宽比(基本上-它需要是正方形)

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

小开

官方的尺寸是57x57。我建议使用精确的大小，仅仅是因为它在加载时占用较少的内存(除非苹果缓存缩放表示)。也就是说，任何正方形大小的 雷克斯说得对都可以工作

小开
最佳答案

看起来苹果的指导方针在2010年8月3日的时候已经包含了“高分辨率”的图片(对于 iPhone4来说)在他们的“必需”图标尺寸中。

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

参见 自定义图标和图像创建指南(需要 Javascript) ，它是整个文档的一部分:

小开

更新名单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:

适用于 iOS8和 iPhone6以上版本

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

IPhone6和 iPhone4使用相同的120x120px 图像，而 iPhone5使用相同的120x120px 图像，其余的和 iOS7一样

更新2013 iOS7:

对于 iOS7，推荐的解决方案发生了变化:

  • 视网膜从114x114px 到120x120px
  • 视网膜从144x144px 到152x152px

另一个分辨率还是一样

  • 默认值为57x57px
  • 没有视网膜的 iPad 76x76px
小开

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">

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

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

小开

你不必再为正确的尺寸而烦恼了。如果您有 iTunes 艺术品文件(即1024 * 1024大小的文件)的图标，那么我已经创建了这个应用程序，它将提供给你所有的图标的基础上提供 给你的信息。获取 申请表，并按照自述文件中的说明创建 iOS 应用程序所需的所有图标。


提交答案