对于iPad和iPhone，apple-touch-icon.png的尺寸应该是多大？

Question

支持的Apple触控图标是否大于60x60，如果支持，我应该为iPad和iPhone使用哪些尺寸？

Answer 1

2017年10月更新列表，iOS11

带和不带视网膜的iPhone和iPad列表

<!-- iPhone(first generation or 2G), iPhone 3G, iPhone 3GS -->
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone.png">
<!-- iPad and iPad mini @1x -->
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<!-- iPhone 4, iPhone 4s, iPhone 5, iPhone 5c, iPhone 5s, iPhone 6, iPhone 6s, iPhone 7, iPhone 7s, iPhone8 -->
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<!-- iPad and iPad mini @2x -->
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<!-- iPad Pro -->
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<!-- iPhone X, iPhone 8 Plus, iPhone 7 Plus, iPhone 6s Plus, iPhone 6 Plus -->
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6-plus.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices Normal Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">

2017年10月更新iOS 11： iOS 11已经检查，iPhone X和iPhone 8已经推出

2016年11月更新iOS 10： 推出新的iOS版iPhone 7和iPhone 7plus，它们具有与iPhone 6s和iPhone 7plus相同的显示分辨率，dpi等，直到现在没有发现尊重更新2015的更改

更新2016年中期Android： 将Android设备添加到列表中，因为Apple-touch链接被Google标记为已弃用，并且不会随时为其设备提供支持

<!-- Android Devices High Resolution -->
<link rel="icon" sizes="192x192" href="icon-hd.png">
<!-- Android Devices High Resolution -->
<link rel="icon" sizes="128x128" href="icon.png">

更新2015 iOS 9： 适用于iOS 9和iPad专业版

<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">

新的iPhone（6s和6s Plus）使用与iPhone相同的尺寸（6和6 Plus），新的iPad pro使用尺寸为167x167像素的图像，其他分辨率仍然相同。

更新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相同的120 x 120像素图像，其余5与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 px default
• 76 x 76 px for iPads without retina

来源： https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/app-icon/

Answer 2

使用这些尺寸57x57,72x72,114x114,144x144然后在文档的头部执行此操作：

<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />

这对所有苹果设备都很好看。 ;）

Answer 3

随着iPad（第3代），现在有四个图标尺寸57x57,72x72,114x114,144x144。

因为视网膜图标的尺寸恰好是标准图标的两倍，我们只需要制作 2个图标：114 x 114和144 x 144.通过将视网膜尺寸图标设置为相应的标准图标iOS会相应地缩放它们。

<!-- Standard iPhone --> 
<link rel="apple-touch-icon" sizes="57x57" href="touch-icon-iphone-114.png" />
<!-- Retina iPhone --> 
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-114.png" />
<!-- Standard iPad --> 
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad-144.png" />
<!-- Retina iPad --> 
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-144.png" />

Answer 4

Apple网站上的图标为152x152像素 http://www.apple.com/apple-touch-icon.png

希望能回答你的问题。

Answer 5

我一直在开发和设计iOS应用程序，This是最好的iOS设计备忘单！

玩得开心：）！

<强>更新 对于iOS 8+和新设备（iPhone 6,6 Plus，iPad Air），请参阅this updated link。

元更新： Iphone 6s / 6s Plus的分辨率与iPhone 6/6 Plus相同

这是该文章新版本的图片：

Answer 6

TL; DR：以180 x 180像素@ 150 ppi 使用一个PNG图标，然后链接到它：

<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

方法细节

截至2018年10月2日，Apple的典型回应反映在their documentation on iOS中。

官方说，规范说：

• iPhone 180px×180px（60pt×60pt @ 3x）
• iPhone 120px×120px（60pt×60pt @ 2x）
• iPad Pro 167px×167px（83.5pt×83.5pt @ 2x）
• iPad，iPad mini 152px×152px（76pt×76pt @ 2x）

实际上，这些尺寸差异很小，因此性能节省实际上只对非常高流量的网站有用。

对于流量较低的网站，我通常使用一个180 x 180 px @ 150 ppi 的PNG图标，并在所有设备上获得非常好的效果，即使是加大尺寸的设备也是如此。

Answer 7

Apple网站上的相关文档Specifying a Webpage Icon for Web Clip。

没有必要在文档的头部放置任何内容。如果未使用链接元素指定图标，则会在网站根目录中搜索带有 apple-touch-icon 或 apple-touch-icon-precomposed 前缀的图标。

例如，如果设备的相应图标大小为57 x 57，系统将按以下顺序搜索文件名：

• 苹果触摸图标-57x57-precomposed.png
• 苹果触摸图标-57x57.png
• 苹果触摸图标-precomposed.png
• 苹果触摸的icon.png

Answer 8

是。 If the size does not match, the system will rescale it。但是制作2个版本的图标会更好。

• iPad - 72x72。
• iPhone（≥4） - 114x114。
• iPhone≤3GS - 57x57 - 如果可能的话。

您可以在服务器上differentiate iPad and iPhone by the user agent。如果您不想在服务器上编写脚本，也可以使用Javascript更改图标

<link ref="apple-touch-icon" href="iPhone_version.png" />
...

if (... iPad test ...) {
  $('link[rel="apple-touch-icon"]').href = 'iPad_version.png'; // assuming jQuery
}

这样做是因为只有在添加网络剪辑时才会查询图标。

（在Javascript中没有公开的方法可以将iPhone≥4与iPhone≤3GS区分开来。）

Answer 9

是的，支持大于60x60。为简单起见，请创建以下4种尺寸的图标：

1) 60x60  <= default
2) 76x76
3) 120x120
4) 152x152

现在，最好将它们添加为HTML中的链接：

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

您可以选择不声明上面的4个链接，只是声明一个链接，在这种情况下，提供最大的152x152或甚至更大的尺寸，比如说196x196。它总是会缩小尺寸以便重新定位。确保您提及size。

您也可以选择不申报单个链接。 Apple提到在这种情况下，它会首先查找服务器根目录，其大小要高于它想要的大小（命名格式：apple-touch-icon-<size>.png），如果找不到，那么它接下来会查找{{1 }} default file:。您最好将链接定义为最小化浏览器查询服务器的链接。

图标必需品：

apple-touch-icon.png

在早于iOS 7的版本中，如果您不希望它为图标添加效果，则只需将后缀- use PNG, avoid interlaced - use 24-bit PNG - not necessary to use web-safe colors 添加到文件名即可。 （即使没有它，iOS 7也不会添加效果）。

Answer 10

我认为这个问题与网络图标有关。我试过在512x512上给出一个图标，在iPhone 4模拟器上看起来很棒（在预览中）但是，当它被添加到主屏幕时它的像素化很差。

好的一面是，如果你在iPad上使用更大的图标（仍然使用我的512x512测试），它似乎在iPad上的质量更好。希望iPhone 4渲染是一个错误。

我在雷达上打开了一个关于此事的错误。

编辑：

我目前正在使用114x114图标，希望iPhone 4在发布时看起来不错。如果iPhone 4出现时仍然有一个错误，我将优化iPad的图标（清晰，没有调整大小为72x72），然后让它缩小旧iPhone的尺寸。

Answer 11

对于 iPhone 和 iPod touch ，请创建衡量标准的图标：

    57 X 57 pixels
    114 X 114 pixels (high resolution @2X)

对于 iPad ，请创建一个衡量标准的图标：

    72 x 72 pixels
    144 X 144 pixels (high resolution @2X)