苹果设备主屏幕图标只认，其他写法均无效或已废弃；加了仍显示模糊截图，是因为safari请求后未获合格资源——路径404/302、尺寸非严格180×180、png含alpha通道、相对路径解析失败或缓存未清除，均导致ios静默回退至网页截图。
苹果设备主屏幕图标只认 <link rel="apple-touch-icon">，其他任何写法（包括 rel="icon"、rel="shortcut icon"、rel="apple-touch-icon-precomposed"）都无效或已被废弃。
为什么加了 <link rel="apple-touch-icon"> 还是显示模糊截图
不是代码没写，而是 Safari 请求了但没拿到合格资源。iOS 不报错，只静默 fallback 到网页左上角截图 —— 这就是你看到带文字、发灰、有白边图标的根源。
- 路径返回 404 或 302（比如重定向到登录页），Safari 直接放弃加载
- 文件实际尺寸 ≠ 声明的
sizes，哪怕差 1 像素（如 180×179），iOS 就跳过 - PNG 带 alpha 通道（哪怕只有边缘 1% 透明），iOS 自动填黑底，但渲染发灰；Photoshop/Figma 导出时没关「透明背景」或「杂边」就踩中这个坑
- 用了相对路径（如
./icon.png或icons/icon.png），在子页面（如/blog/或/app/?v=1）下解析失败
href 路径必须是根相对或绝对，不能依赖当前页面上下文
iOS 对路径解析极严格，协议相对路径（//cdn.com/icon.png）、纯相对路径（icon.png）、带 query 的路径（/icon.png?v=1.2 但 CDN 返回空 304）都可能失效。
- 安全写法只有两种：
/icon-180.png（根相对）或https://example.com/icon-180.png（绝对） - 验证方式：直接在 Safari 地址栏访问该 URL，确认看到清晰 PNG 且响应头
Status: 200 OK和Content-Type: image/png - 本地开发用
http://localhost无法触发 iOS 缓存逻辑，真机测试前必须部署到公网可访问地址
尺寸、格式、命名——180×180 PNG 是唯一必要项
网上流传的多尺寸叠加写法（sizes="120x120"、sizes="167x167"）对现代 iOS（14+）主屏幕图标完全无效。Apple 从 iOS 11.3 起就只识别并强制使用 180×180。
- 必须提供 180×180 像素、PNG 格式、RGB 模式、无 ICC 配置文件、无 alpha 通道的文件
- 推荐纯白或纯黑底色，图标居中，留 20px 安全边距（iOS 会自动加圆角和阴影）
- 不要用
type="image/png"或media属性 —— iOS 完全不认，写了反而可能干扰解析 - 别信“导出为 PNG”就完事：用
file icon-180.png（macOS/Linux）检查是否真为 sRGB PNG；在线工具查是否有嵌入 ICC Profile
缓存比代码更难搞，真机清缓存是硬性步骤
iOS Safari 一旦缓存了图标，就不会再重新请求 —— 即使你改了文件、清了网站数据、换了 href，旧图仍会显示。模拟器完全不可信，调试必须用真实设备。
- 最可靠刷新方式：iPhone 进入「设置 → Safari → 清除历史记录与网站数据」
- 上线前更新图标，务必改文件名（如
/icon-180-v2.png）或加版本参数（/icon-180.png?v=2），避免 CDN 或系统级缓存干扰 - 调试时用 macOS Safari 连接 iPhone，在「开发 → iPhone」菜单下打开 Network 面板，过滤
apple-touch-icon，看请求是否发出、状态码是否为 200、响应内容是否为真实 PNG
真正卡住人的从来不是怎么写那行 <link>，而是路径能不能被 Safari 稳稳 GET 到、PNG 文件有没有藏在导出设置里的半透明像素、以及缓存有没有被彻底踢出设备内存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
