适用于iPad和iPhone的apple-touch-icon.png应该是什么尺寸？

是否支持大于60x60的Apple touch图标？如果支持，我应该为iPad和iPhone使用什么尺寸？

更新列表2019年12月，iOS13 一个图标适用于iOS 180x180 px，一个图标适用于android 192x192 px（在site.webmanifest中声明）。

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

#### site.webmanifest
{
    "name": "",
    "short_name": "",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],
    "display": "standalone"
}

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 Pro

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

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

更新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和iPhone 5相同的120 x 120 px图像，其余与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像素
• 对于没有视网膜的iPad为76 x 76像素

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

使用以下尺寸的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" />

在所有苹果设备上看起来都不错。;）

在iPad（第三代）中，现在有四个图标尺寸57x57、72x72、114x114、144x144。

由于视网膜图标的大小恰好是标准图标的两倍，我们实际上只需要制作2个图标：114 x 114和144 x144。通过将视网膜大小的图标设置为相应的标准图标，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" />

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

希望这能回答你的问题。

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

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

方法的细节

截至2020-04年，苹果公司的规范反应反映在他们关于iOS的文档中。

规范正式说：

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

实际上，这些大小差异很小，因此性能节省实际上仅在流量非常高的站点上才有意义。

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

我已经开发和设计iOS应用程序已有一段时间了，这是目前最好的iOS设计备忘单！

玩得开心 ：）！

更新： 对于iOS 8+和新设备（iPhone 6、6 Plus，iPad Air），请参阅此更新的链接。

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

这是本文新版本的图像：

Apple网站上的相关文档“ 为Web Clip指定网页图标”。

无需在文档的开头放置任何内容。如果未使用link元素指定任何图标，则在网站根目录中搜索带有apple-touch-icon或apple-touch-icon-precomposed前缀的图标。

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

• apple-touch-icon-57x57-precomposed.png
• apple-touch-icon-57x57.png
• apple-touch-icon-precomposed.png
• apple-touch-icon.png

是。如果大小不匹配，系统将重新缩放它。但是最好制作两个版本的图标。

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

您可以通过服务器上的用户代理来区分iPad和iPhone。如果您不想在服务器上编写脚本，也可以通过以下方式使用Javascript更改图标：

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

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

之所以可行，是因为仅在添加Web剪辑时才查询图标。

（还没有公开的方法可以用Javascript区分iPhone≥4和iPhone≤3GS。）

是的，支持大于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-touch-icon-<size>.png，如果找不到，则接下来将查找default file: apple-touch-icon.png。最好定义链接，因为这样可以最大程度地减少浏览器查询服务器的次数。

图标必需品：

- use PNG, avoid interlaced
- use 24-bit PNG
- not necessary to use web-safe colors

在低于iOS 7的版本中，如果您不希望它为图标添加效果，则只需-precomposed.png在文件名中添加后缀即可。（即使没有iOS 7，它也不会添加效果）。

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

从好的方面来说，如果您在iPad上使用较大的图标（仍然使用我的512x512测试），那么iPad上的图标确实看起来质量更好。希望iPhone 4渲染是一个错误。

我已经在雷达上打开了一个与此有关的错误。

编辑：

我目前正在使用114x114图标，希望它在iPhone 4上发布时看起来不错。如果iPhone 4推出时仍存在错误，则我将优化iPad的图标（酥脆且在72x72时不调整大小），然后将其缩小以用于旧iPhone。

对于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)