apple-touch-icon：完整指南
当有人把你的网站添加到 iPhone 主屏幕时，iOS 会去找一个标签。弄错了，它就会改抓一张你页面的模糊截图。
apple-touch-icon 是什么
apple-touch-icon 是当用户点击添加到主屏幕时 iOS 所使用的图标。它独立于你的 favicon，也独立于 web app manifest。它之所以存在，是因为 iOS 想要一个完整质量、类似 app 的图标，而不是把小小的标签页 favicon 放大。
一个 180x180 的 PNG 就足够了。当前的 iOS 会把这一个文件缩小以适应它需要的每个场景，所以你不必发布旧的 57、72、114 和 152 尺寸阶梯。
link 标签
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- You can pin the size, but iOS defaults to the 180 file fine: -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">即使没有标签，iOS 也会在站点根目录查找 /apple-touch-icon.png，但显式声明它在各种配置下更可靠。
规格一览
| 属性 | 值 |
|---|---|
| 尺寸 | 180x180 |
| 格式 | PNG |
| 透明度 | 被忽略，合成到黑色上 |
| 圆角 | 方形源图，iOS 会替你把它变圆 |
| 文件名 | 站点根目录下的 apple-touch-icon.png |
常见陷阱
完全没有 apple-touch-icon 是最糟的情况。当 iOS 找不到时，它会退回到页面的缩小截图，既模糊又不符合品牌形象。一个标签就能解决。
自己把圆角处理掉是个错误。iOS 会应用它自己的圆角方形遮罩，所以一个预先做了圆角的源图会被圆角两次，并在图标周围显示一圈细细的背景边框。请给它一张方形、满幅的图像。
刷新不是即时的。一旦有人把你的网站添加到了主屏幕，在你服务器上更改图标并不会更新他们已有的快捷方式。他们必须先删除它再重新添加，才能获取新图标。
常见问题
apple-touch-icon 是多大尺寸？
180x180 像素，采用 PNG 格式。当前的 iOS 会把这一个文件缩放到每个场景，所以你不需要旧的 57、72、114 或 152 尺寸。
为什么我的 apple-touch-icon 显示黑色背景？
iOS 会忽略 apple-touch-icon 的透明度，并把它合成到黑色上。请用纯色背景而不是透明背景来导出 PNG。
为什么 iOS 为我的网站显示一个模糊的图标？
你很可能没有 apple-touch-icon。没有它，iOS 会使用页面的缩小截图。添加一个 180x180 的 PNG 和正确的 link 标签。
为什么我更改了图标后主屏幕图标没有更新？
已有的主屏幕快捷方式会缓存它们创建时的图标。用户必须删除该快捷方式并重新添加网站，才能获取新的 apple-touch-icon。