网站的 Apple Touch 图标
到目前为止，我一直在脑海中包含 Apple Touch 图标的行，如下所示：
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
但是，在 the Q&A "What are the correct pixel dimensions for an apple-touch-icon?" 中，已接受的答案中指出，根据 Apple 的指南，现在需要三张图像。
那么如何将这些插入到代码的头部呢？
极简主义解决方案 - 推荐
一种常见的做法是创建一个 180x180 图标，这是预期的最高分辨率，并让 iOS 设备根据需要将其缩小。它声明为：
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
详尽的解决方案 - 不推荐
Apple specs 为 iOS7 指定新尺寸：
60x60
76x76
120x120
152x152
180x180
此外，不推荐使用预先组合的图标。
因此，为了同时支持新设备（运行 iOS7）和旧设备（iOS6 和更早版本），通用代码为：
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
此外，you should create a 180x180 picture named apple-touch-icon.png。
请注意，iOS 会寻找类似 /apple-touch-icon-76x76.png 的 URL，如果它在 HTML 代码中找不到有趣的东西（有点像 IE 对 /favicon.ico 所做的事情）。所以保持文件名在上面很重要。考虑 Android/Chrome is also using these pictures 也很重要。
您可能想知道这个 favicon generator 可以一次创建所有这些图片。完全披露：我是本网站的作者。
给你，希望这有帮助。
如果您希望 Apple 为您做一些美学方面的工作（添加光泽），那么您可以将这些放入 <head> 标记中：
<link rel="apple-touch-icon" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-ipad-retina.png" />
如果您想预先合成图像，以便 Apple 显示它而没有光泽，那么您可以这样做：
<link rel="apple-touch-icon-precomposed" href="apple-touch-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-iphone4.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-ipad-retina.png" />
如果您包含多个图像，iOS 设备将寻找正确的尺寸并自动使用该图像。从示例中的图像名称可以看出，具有视网膜显示屏的 iPad 需要一个 144x144px 的图标，iPhone 4/4S/5 需要一个 114x114px 的图标，原来的 iPad（和 iPad 2，作为屏幕分辨率没有什么不同）需要一个 72x72px 的图标，而原始 iPhone 不需要尺寸规格，但供您参考，它是 57x57px。
由于其中一些答案已经过时，我建议使用 http://realfavicongenerator.net/ 来生成所有图像和标记 - 我每次使用它时都会捐赠几欧元，希望它能让他们及时了解目前在 iOS、Android 和 Android 上有效的内容窗户，所以我不必。
自 2018 年起，Apple Developers Website 为 iOS 设备推荐以下内容：
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-startup-image" href="/launch.png">
<meta name="apple-mobile-web-app-title" content="AppTitle">
应用标题将替换您的网站标题。通常，你会想要那个。启动图像是应用程序启动时将出现的图像。
为 Web Clip 指定网页图标
您可能希望用户能够将您的 Web 应用程序或网页链接添加到主屏幕。这些由图标表示的链接称为 Web Clip。按照这些简单的步骤指定一个图标来代表您在 iOS 上的 Web 应用程序或网页。
要为整个网站（网站上的每个页面）指定一个图标，请在名为 apple-touch-icon.png 的根文档文件夹中放置一个 PNG 格式的图标文件
要为单个网页指定图标或将网站图标替换为特定于网页的图标，请向网页添加链接元素，如下所示：
<link rel="apple-touch-icon" href="/custom_icon.png">
在上面的示例中，将 custom_icon.png 替换为您的图标文件名。要为不同的设备分辨率指定多个图标（例如，同时支持 iPhone 和 iPad 设备），请为每个链接元素添加 size 属性，如下所示：
<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">
使用最适合设备大小的图标。如果未设置尺寸属性，则元素的尺寸默认为 60 x 60。如果没有与设备推荐尺寸匹配的图标，则使用大于推荐尺寸的最小图标。如果没有大于建议大小的图标，则使用最大的图标。
如果没有使用链接元素指定图标，则会在网站根目录中搜索带有 apple-touch-icon... 前缀的图标。例如，如果设备的适当图标大小为 60 x 60，则系统按以下顺序搜索文件名：
apple-touch-icon-76x76.png
apple-touch-icon.png
有关网页图标指标，请参阅图标和图像大小。
注意：iOS 7 上的 Safari 不会为图标添加效果。旧版本的 Safari 不会为以 -precomposed.png 后缀命名的图标文件添加效果。有关详细信息，请参阅第一步：在 iTunes Connect 中识别您的应用程序。
从我的拉取请求到 https://github.com/h5bp/mobile-boilerplate（带有 iPhone 6 图标）：
<!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">
<!-- iPad 3+ (with @2× display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">
<!-- iPad (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">
<!-- iPhone (with @2× display) iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">
<!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<!-- Fallback for everything else -->
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
<!--
Chrome 31+ has home screen icon 192×192 (the recommended size for multiple resolutions).
If it’s not defined on that size it will take 128×128.
-->
<link rel="icon" sizes="192x192" href="img/touch/touch-icon-192x192.png">
<link rel="icon" sizes="128x128" href="img/touch/touch-icon-128x128.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">
我必须承认，我从未阅读过任何苹果规格，但根据我网站上的日志，这些图像在 root 中是必需的：
apple-touch-icon-72x72.png
apple-touch-icon-76x76.png
apple-touch-icon-120x120.png
apple-touch-icon-152x152.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-76x76-precomposed.png
apple-touch-icon-120x120-precomposed.png
apple-touch-icon-152x152-precomposed.png
关注公众号
不定期副业成功案例分享
<link>标记中的文件不在客户端的缓存中，它们是否都已下载？无论请求页面的位置如何（手机、平板电脑、PC、Windows、Android...）？我有点担心性能影响......<link rel="apple-touch-icon" href="/apple-touch-icon.png" type="image/png" />就足够了。即使您创建不同大小的图片，据我所知，您只需删除所有 apple-touch-icon 链接，iOS 就会自行查找文件，从首选大小开始（如 apple-touch-icon-180x180. png），如果没有找到其他文件，则使用 apple-touch-icon.png。apple-touch-icon的任何信息，还会在根目录中查找特定大小）。