苹果设备仅识别，必须置于中，使用绝对或根相对路径，推荐180×180 png（srgb、无透明底、无icc配置文件），ios不支持ico或rel="icon"。
苹果设备访问网页时不会自动识别普通 favicon，必须显式声明 apple-touch-icon 才能在主屏幕添加图标并正确显示——漏掉 link 标签或尺寸/格式不对，图标就会变成白底灰图或直接不显示。
怎么写正确的 link 标签
苹果设备（iOS/iPadOS）只认 <link rel="apple-touch-icon">，不读 favicon.ico 或 rel="icon"。必须放在 里，且建议指定尺寸和类型：
-
href必须是绝对路径或根相对路径（如/apple-touch-icon.png），不能是页面相对路径（./icon.png在子页面会 404） - 推荐加
sizes属性，例如sizes="180x180"；iOS 会优先匹配最接近的尺寸，但即使不写也能 fallback 到默认逻辑 - 不用写
type="image/png"，iOS 只支持 PNG，写了也无用 - 如果想适配旧版 iOS（≤7），可额外加
precomposed：rel="apple-touch-icon-precomposed"，但现代系统已忽略该属性，不建议混用
图标尺寸和命名到底要几个文件
iOS 不强制要求多尺寸，但单一文件容易在不同设备上被拉伸或裁切。真实场景中只需提供 1–2 个关键尺寸即可覆盖绝大多数情况：
-
180x180（iPhone 主屏幕图标）——必须有，这是 iOS 11+ 的首选尺寸 -
167x167（iPad Pro 主屏幕图标）——可选，若站点主要面向 iPad 用户建议加上 - 不需要为每个设备单独命名（如
apple-touch-icon-60x60.png），iOS 不按文件名匹配，只看sizes和实际像素 - 不要用透明背景：iOS 会自动加圆角和阴影，但底层会填充白色，透明区域可能显得发灰；推荐纯白底 + 图标居中，留 20px 安全边距
为什么加了标签还是显示默认图标
常见原因不是代码写错，而是资源加载失败或缓存干扰：
- 检查浏览器开发者工具 Network 面板，过滤
apple-touch-icon，确认返回状态码是200，不是404或301（尤其注意大小写、.png 后缀是否拼错） - iOS Safari 会强缓存图标，改完后需清除 Safari 缓存（设置 → Safari → 清除历史记录与网站数据），仅刷新页面无效
- 如果服务器启用了内容安全策略（CSP），确保
img-src允许从当前域加载（self） - 图标文件不能是 CMYK 模式或带配置文件的 PNG，需保存为标准 sRGB、无嵌入 ICC Profile 的 PNG；可用
file icon.png命令验证（Linux/macOS）或用在线工具检查
要不要用 apple-touch-icon-precomposed
这个属性在 iOS 7 之前用于禁用系统自动添加反光效果，但现在所有新系统都忽略它。如果同时写两个 link（一个 apple-touch-icon，一个 apple-touch-icon-precomposed），iOS 可能随机选一个，导致行为不可控。
结论：只保留 rel="apple-touch-icon" 即可。所谓“precomposed”现在是默认行为，无需声明。
真正容易被忽略的是图标渲染细节：哪怕 link 正确、尺寸合规、路径可访问，只要 PNG 内部 alpha 通道处理异常（比如半透明边缘未做预乘），在某些 iOS 版本上仍会显示模糊或色偏——建议用 Sketch/Figma 导出时勾选「Convert to sRGB」和「Remove profile」，而非依赖 Photoshop 默认导出设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
