必须使用180×180像素、无透明通道的PNG图标，通过绝对或根相对路径的声明，且服务端返回200状态码，否则iOS将回退到模糊截图。
只用一行 <link rel="apple-touch-icon"> 就能生效，但必须满足四个硬性条件：180×180 像素、PNG 格式、无透明通道、绝对路径且返回 200 —— 少一个，iOS 就静默 fallback 到网页截图。
为什么加了 <link rel="apple-touch-icon"> 还是显示模糊缩略图
这不是 Safari 没读到标签，而是它读到了、请求了、但服务端没给合格资源。常见失效链路：
-
href指向的路径返回 404 或 302（比如重定向到登录页） - 图片实际尺寸不是 180×180，比如导出时选了「适配画布」导致留白或拉伸
- PNG 文件带 alpha 通道（哪怕只是 1% 透明像素），iOS 会自动填黑底但边缘发灰；Photoshop 导出没关「杂边」、Figma 没关「透明背景」都踩这个坑
- 用了相对路径如
./icon.png，而当前页面 URL 带 query 参数（如/home?ref=abc），浏览器解析后拼出错误地址 - 误加
sizes、type或media属性 —— iOS 完全不认这些，某些旧版 WebKit 还会因此跳过整个标签
href 路径必须是根相对或绝对，不能是协议相对
iOS 对路径解析非常严格。以下写法全部危险：
-
//cdn.example.com/icon-180.png—— 协议相对路径，在 iOS 15–16 某些补丁版本中静默失败 -
icons/icon-180.png—— 纯相对路径，依赖当前页面 URL 的 base，极易错位 -
/icons/icon-180.png?v=1.2—— 版本参数本身没问题，但若 CDN 缓存了 304 响应，可能返回空内容
安全写法只有两种：/icon-180.png（根相对）或 https://example.com/icon-180.png（绝对）。验证方式很简单：在 Safari 地址栏直接访问该 URL，确认看到清晰 PNG 且响应头 Status: 200 OK。
立即学习“前端免费学习笔记（深入）”；
别信多尺寸声明，180×180 是唯一需要的尺寸
网上流传的 sizes="120x120"、sizes="167x167" 等写法，对现代 iOS（14+）主屏幕图标完全无效。Apple 从 iOS 11.3 开始就只识别并强制使用 180×180 —— 其他尺寸标签只会增加 HTML 体积、干扰解析逻辑，甚至在某些构建工具里被自动去重或乱序。
你真正要做的只有一件：<link rel="apple-touch-icon" href="/icon-180.png">。放在 最顶部，不要包裹在 JS 动态插入逻辑里，也不要藏在条件注释中。
真机测试前必须清缓存，模拟器完全不可信
iOS 一旦缓存了图标，就不会再重新请求，哪怕你改了文件、清了网站数据、换了 href。最可靠重载方式是：
- 在 iPhone 上进入「设置 → Safari → 清除历史记录与网站数据」
- 删除已添加的主屏幕快捷方式（长按图标 → “移除”）
- 重新访问网页 → 分享 → 添加到主屏幕
桌面 Safari 连接真机后可在「开发 → [设备名] → [页面] → Network」里过滤 apple-touch-icon，看请求是否发出、状态码是否为 200、响应内容是否为真实 PNG（不是 HTML 或重定向）。注意：模拟器不会触发任何图标下载行为，所有测试必须在 iPhone SE（2nd）到 iPhone 15 Pro 真机上完成。
最容易被忽略的是 PNG 文件本身的导出设置 —— 尺寸和路径都对了，但用 Sketch 导出时勾了「透明背景」，或用 Photoshop 存为 PNG-24 时开了「杂边：黑色」，结果系统渲染时边缘出现半灰半黑的毛边，整个图标就废了。这不是代码问题，是设计交付环节的硬门槛。
