Apple Touch Icon：尺寸、标签与 iOS 行为
Apple touch icon 是当有人从 Safari 把你的网站添加到主屏幕时 iOS 所使用的图像。你把它做成一张 180x180 的 PNG，放在 /apple-touch-icon.png，并用 rel="apple-touch-icon" 的 link 标签指向它。iOS 会忽略这张图像中的透明度并将其合成到黑色之上，所以要给它一个不透明的背景，并让 iOS 自己去做圆角，而不是把圆角烘焙进图里。
iOS 拿它做什么
当用户在 Safari 里点击分享再点添加到主屏幕时，iOS 需要一个启动器图标。它会去找带 rel="apple-touch-icon" 的 link 标签，如果没有，就直接从站点根目录请求 /apple-touch-icon.png 和 /apple-touch-icon-precomposed.png。如果什么都找不到，它就回退到页面的一张截图，而那看起来永远不像是刻意设计的。
你提供的图像应当是方形、满幅出血的。iOS 在绘制图标时会应用它自己的圆角遮罩，所以一张已经带圆角的源图像最终会被双重圆角处理，边缘出现可见的瑕疵。
标签
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">一个标签加一个文件就是全部的现代配置。把同一个文件也放在 /apple-touch-icon.png，好让无标签的后备路径也能解析到。
该发布什么
| 项目 | 取值 |
|---|---|
| Dimensions | 180x180 像素 |
| Format | PNG，不需要 alpha |
| Path | /apple-touch-icon.png |
| Background | 不透明：透明部分会被合成到黑色上 |
| Corners | 方形源图；圆角由 iOS 自己遮罩 |
| Safe margin | 让标志避开最外围的百分之几，以免被遮罩裁掉 |
Apple touch icon 常见问题
我需要全部九种旧版 apple-touch-icon 尺寸吗？
不需要。当前的 iOS 使用 180x180，并在更小的场景中向下缩放它。57、60、72、76、114、120、144 和 152 这些变体只对非常老的 iPhone 和 iPad 才有意义。
apple-touch-icon-precomposed 是什么？
一个遗留的退出选项。老版 iOS 会给主屏幕图标加一层光泽高光，而 precomposed 变体告诉它不要加。iOS 多年前就停止添加这层光泽了，所以普通的 rel="apple-touch-icon" 就是你需要的全部。
Android 会使用 apple-touch-icon 吗？
如果你的网站没有 web app manifest 图标，Android 上的 Chrome 会把它当作后备来用，但这并不是可以依赖的行为。为 Android 在 manifest 中声明 192x192 和 512x512 的 PNG，让 apple-touch-icon 只服务 iOS。