在 iPad 和 iPhone 上，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
}

这是因为图标只有在您添加网页剪辑时才会被查询。

(目前在 Javascript 中还没有公开的方法来区分 iPhone ≥4和 iPhone ≤3GS。)

我认为这个问题是关于网络图标的。我曾经尝试给出一个512x512的图标，在 iPhone4模拟器上它看起来很棒(在预览版中) ，但是当添加到主屏幕时，它的像素化很差。

从好的方面来说，如果你在 iPad 上使用一个更大的图标(仍然是我的512x512测试) ，它似乎在 iPad 上的质量更好。希望 iPhone4的渲染是一个 bug。

我在雷达上装了窃听器。

编辑:

我目前使用的是一个114x114的图标，希望它在 iPhone4发布时看起来不错。如果 iPhone4出来的时候还有缺陷，我会优化 iPad 的图标(72x72的清晰度和不调整大小) ，然后让它适用于旧的 iPhone。

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

希望这能回答你的问题。

使用这些尺寸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" />

这在所有的苹果设备上都很好看

苹果网站上的相关文档 为 Web 剪辑指定网页图标。

没有必要把任何东西放在文档的头部。如果没有使用 link 元素指定图标，则在网站根目录中搜索具有 苹果触摸图标或 苹果-触摸-图标-预先组合前缀的图标。

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

• Apple-touch-icon-57x57-预组合. png
• Apple-touch-icon-57x57. png
• Apple-touch-icon-预组合
• 苹果触摸图标

IPad (第三代)现在有四种图标尺寸: 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" />

2019年12月更新名单，iOS13 一个是 iOS180x180px 的图标，一个是 android 192x192px 的图标(在 site.webManifin 中声明)。

<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: 检查 iOS11，推出 iPhone X 和 iPhone 8

2016年11月更新 iOS 10: 新的 iOS 版本 iPhone 7和 iPhone 7 plus 推出，它们的显示分辨率、 dpi 等等与 iPhone 6s 和 iPhone 7 plus 相同，直到现在还没有发现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: 适用于 iOS9和 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像素，其他分辨率仍然相同。

更新2014 iOS 8:

适用于 iOS8和 iPhone6以上版本

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

Iphone6使用与 iphone4和 iphone5相同的120x120px 图像，其余的与 iOS7相同

更新2013 iOS7:

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

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

另一个分辨率还是一样

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

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

是的，支持大于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

在 iOS7以前的版本中，如果您不希望它为您的图标添加效果，那么只需将后缀 -precomposed.png添加到文件名中即可。(即使没有 iOS7也不会添加特效)。

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

我已经开发和设计 iOS 应用程序有一段时间了，这个是最好的 iOS 设计小抄！

玩得开心:) ！

更新: 对于 iOS8 + 和新设备(iPhone 6,6 Plus，iPad Air) ，请参阅 此更新的连结。

元更新: iPhone 6s/6s Plus 的分辨率分别与 iPhone 6/6 Plus 相同

这是文章最新版本中的一张图片:

DR: 使用一个180x180px@150ppi 的 PNG 图标，然后像这样链接到它:

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

进场详情

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

官方说法是:

• IPhone 180px × 180px (60pt × 60pt@3x)
• IPhone 120px × 120px (60pt × 60pt@2x)
• IPad Pro 167px × 167px (83.5 pt × 83.5 pt@2x)
• IPad，iPad mini 152px × 152px (76pt × 76pt@2x)

实际上，这些大小差异很小，因此性能节省只有在流量非常高的站点上才真正起作用。

对于流量较低的站点，我通常使用 一个180x180px@150ppi 的 PNG 图标，并在所有设备上获得非常好的结果，即使是大小合适的设备。