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

更新列表 2019 年 12 月，iOS13 一个图标用于 iOS 180x180 像素，一个用于 android 192x192 像素（在 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 像素大小的图像，其他分辨率仍然相同。

更新 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 视网膜从 144 x 144 像素到 152 x 152 像素

其他分辨率还是一样

57 x 57 像素默认

76 x 76 px 适用于不带视网膜的 iPad

来源：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 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" />

---

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

希望这能回答你的问题。

---

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

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

该方法的详细信息

截至 2020 年 4 月，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 图标，并在所有设备上获得非常好的结果，即使是加大尺寸的设备也是如此。

---

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

玩得开心 ：）！

https://i.stack.imgur.com/tcqsu.png

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

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

这是文章新版本的图片：

https://i.stack.imgur.com/54bQw.png

---

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

---

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

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
}

之所以有效，是因为仅在添加 Web 剪辑时才会查询该图标。

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

---

是的，支持大于 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），如果没有找到，那么它接下来会查找 default file: {3 }。最好定义链接，因为这将最小化浏览器查询您的服务器。

图标必需品：

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

---