Apple Touch 图标：尺寸、格式与代码

180×180 像素常用作高分辨率源图。iOS 可以将它缩小用于更小的显示位置，因此大多数项目只需保留一个声明。

过去的建议列出了从 57×57 到 152×152 的八个文件，每个文件都有独立的 sizes 属性。这些版本如今已无必要，只会使 HTML 臃肿，并为相同效果增加请求。

文件必须是 PNG。对于此类图标，iOS 不读取 SVG 或 WebP，而 JPEG 会破坏扁平图形的清晰边缘。

透明背景可能因系统版本和显示场景而产生意外效果。为了控制主屏幕上的外观，请使用自己选定的不透明背景。

解决方法是在导出前，将图标合成到不透明背景上。选择品牌色；如果图形本身色彩丰富，也可以使用纯白，并在图形周围保留约 10% 的留白，使画面更舒展。

但不要自行添加圆角：iOS 会施加自己的圆角遮罩。文件已有圆角时，会形成双重圆角，边角效果不佳。

在页面 head 中添加一行即可：link rel="apple-touch-icon" href="/apple-touch-icon.png"。只提供一个文件时，sizes 属性可省略。

还可选择添加 meta name="apple-mobile-web-app-title" content="Your brand"，以控制图标下方显示的名称。没有此标签时，iOS 会使用页面标题，而页面标题通常过长，会被截断。

同时在根目录放置一份名为 apple-touch-icon.png 的文件：与 favicon.ico 类似，找不到标签时，iOS 会尝试从这个地址读取。

iOS 会强力缓存图标，已添加到主屏幕的快捷方式不会自行更新。测试新版本时，请删除快捷方式、清除 Safari 数据，然后重新添加网站。

如果仍然缺少图标，请检查三点：文件返回 200 而非 404，内容类型为 image/png，且未被 robots.txt 规则或身份验证阻止。

LFFavicon 检测工具会针对任意公开 URL 检查这些情况，并显示实际获取到的图标。