苹果设备主屏图标必须使用180×180像素、无透明通道、纯色背景的png文件，通过精准配置，否则ios safari将静默回退至截图生成模糊图标。
苹果设备图标不是靠 <link rel="apple-touch-icon"> 一个标签就能搞定的，必须配尺寸、格式、路径和 fallback 逻辑，否则 iOS Safari 会退化到截屏生成图标，效果极差。
为什么 <link rel="apple-touch-icon"> 经常不生效
常见错误是只放一个未指定尺寸的图标，或用 PNG 但没加透明背景，或路径返回 404。iOS 不会报错，而是静默 fallback 到页面截图 —— 这就是你看到图标模糊、带文字、有白边的原因。
- 必须提供
180×180像素（iPhone 主屏唯一强制识别尺寸），推荐使用 PNG 格式，无边框、纯色背景（#000000 或 #FFFFFF）、无透明毛边 - 不要依赖
sizes属性做多尺寸声明：iOS 仅识别180x180，其他尺寸（如120x120）在旧系统可能被忽略 - 路径必须可直接访问：浏览器会 GET 请求该 URL，不能是 302 跳转、不能需要 Cookie、不能是相对路径且当前页 URL 有 query 参数时出错
- 避免使用
<link rel="apple-touch-icon-precomposed">：iOS 7+ 已废弃，加了反而干扰解析
正确写法与最小必要配置
只需一行，但必须精准：
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
其中：
-
/apple-touch-icon.png必须是根路径下的静态文件，HTTP 状态码为200 - 文件必须是
180×180像素，PNG 格式，RGB 模式（非索引色），无 alpha 通道（即不能有半透明像素） - 不要加
sizes、type或media属性 —— 它们对苹果设备无效，还可能触发 bug
如何验证是否生效
真机测试最可靠，模拟器不行；步骤如下：
- 用 iPhone Safari 打开网页 → 点击分享按钮 → 滚动到底部点「添加到主屏幕」→ 观察弹出预览图标的清晰度
- 如果图标模糊、有白色圆角背景、或显示成网页缩略图，说明
<link>未命中，检查 Network 面板里apple-touch-icon.png是否返回200和真实 PNG 内容（可用 curl -I 检查） - 注意：Safari 会缓存图标，改完后需清除「设置 → Safari → 清除历史记录与网站数据」才能重载
最容易被忽略的是 PNG 文件的导出设置：Sketch/Figma 导出时勾选「导出为 PNG」但没关「透明背景」，结果图标边缘发灰；Photoshop 保存为 PNG-24 时没取消「杂边」选项，导致黑底变灰底。这些细节一错，整个图标就废了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
