iPad 和 iPhone 的 apple-touch-icon.png 应该多大？

Question

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

Answer 1

更新列表 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 px 图像，其余与 iOS 7 相同

更新 2013 iOS7：

对于 iOS 7，推荐的分辨率已更改：

• iPhone Retina 从 114 x 114 px 到 120 x 120 px
• iPad Retina 从 144 x 144 px 到 152 x 152 px

其他分辨率还是一样

• 默认 57 x 57 像素
• 76 x 76 px 适用于没有视网膜的 iPad

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

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

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

方法详情

截至 2020 年 4 月，Apple 的规范响应反映在其 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 6

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

玩得开心 ：）！

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

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

这是文章新版本的图片：

Answer 7

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

无需在文档的头部放置任何内容。 如果没有使用链接元素指定图标，则会在网站根目录中搜索带有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
• 苹果触摸图标.png

Answer 8

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

• 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。）

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 ），如果未找到，则下一步寻找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 也不会添加效果）。

Answer 10

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

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

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

编辑：

我目前正在使用 114x114 的图标，希望它在发布时在 iPhone 4 上看起来不错。 如果 iPhone 4 出来的时候还是有 bug，我会优化 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)