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

Question

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

iphonefaviconapple-touch-icon

73

我不确定正确的大小是多少。

许多网站似乎都在重复说，apple-touch-icon应该是57x57像素，但他们的来源链接却已经失效了。

Hanselman和playgroundblues的评论提出了不同的尺寸，包括163x163和60x60。

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

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

- Zack Peterson

相关内容：为什么我的apple-touch-icon-precomposed.png会出现错误？另外一个好的在线资源似乎是: Everything you always wanted to know about touch icons (Mar 2011; by Mathias Bynens) - hakre

现在 Apple.com 的图标尺寸为 152x152 ... - Wick

https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html - Blazemonger

7个回答

3

苹果规格指定了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图片。

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

- philippe_b

3

根据您需要的详细程度，它需要具有1:1的宽高比（基本上 - 它需要是正方形）

我建议使用苹果自己的129*129

- saniul

1

官方尺寸为57x57。我建议使用确切的尺寸，因为加载时需要更少的内存（除非苹果缓存了缩放后的表示）。话虽如此， Rex是正确的，任何正方形尺寸都可以使用。

- Ecton

0

2014年10月更新列表，iOS8

iPhone和iPad的列表，包括有和没有Retina屏幕的设备。

<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 Retina从144 x 144像素变为152 x 152像素

其他分辨率仍然相同

默认57 x 57像素
iPads无视网膜76 x 76像素

- felipep

0

你不用再为正确的尺寸烦恼了。如果你有iTunes艺术品文件（即1024*1024大小的文件）作为你的图标，我已经开发了这个应用程序，将根据所提供的信息为你提供所有的图标在这里。从这里获取应用程序，并按照自述文件中的说明创建所需的iOS应用程序的所有必需图标。

- rptwsthi

0

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

- Rex M

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- OtomoBill · Accepted Answer

根据2010年8月3日的苹果指南，现在包括“高分辨率”图像（适用于iPhone 4）在其“所需”的图标尺寸中。

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

请参阅自定义图标和图像创建准则（需要JavaScript），该准则是完整文档的一部分：

iOS人机界面指南（2013;由Apple Inc; PDF; 26.3 MB）