苹果设备仅识别rel="apple-touch-icon"，sizes="180x180"必须严格匹配文件真实尺寸、路径为根相对或绝对url、png格式无透明背景，ios 14+仅使用该尺寸，其他声明冗余。
苹果设备只认 rel="apple-touch-icon"，sizes 在这里才真正起作用
你写的 sizes="180x180" 只有在 rel="apple-touch-icon" 这个上下文中才会被 Safari（iOS/macOS）实际读取并用于主屏幕图标选择。它不是可有可无的标注，而是强制匹配条件：文件真实尺寸必须严格等于声明值，差 1 像素（比如 180×179）或带 alpha 通道，iOS 就直接跳过该条声明，不报错也不 fallback。
- 必须写
sizes，且格式只能是"180x180"（英文小写 x，不能是"180×180"、"180px"或180） - 每个
sizes值对应一个物理文件，不能复用同一张图改名后反复声明 - iOS 14+ 实际只用
180x180，其他尺寸（如 152×152、120×120）仅对旧系统有意义，现代部署可精简为单条 -
type="image/png"推荐加上，虽非强制，但部分 iOS 版本会因缺失 type 而忽略 PNG
rel="icon" 里的 sizes 对苹果设备完全无效
你在 <link rel="icon"> 里写的 sizes="180x180"，Safari 会静默忽略——它根本不看这个属性。iOS/macOS 完全不解析 rel="icon" 的任何 sizes，哪怕你声明了十次，也不会影响主屏幕图标加载。它只识别 rel="apple-touch-icon"，别的都当空气。
- 别把
rel="icon"和rel="apple-touch-icon"混用同一张图还指望自动适配 - 写了
rel="icon" sizes="180x180"却没写rel="apple-touch-icon"→ iOS 主屏图标默认回退到网页截图，不是模糊，是彻底没图标 - 苹果设备从不读
manifest.json的icons数组来渲染主屏幕图标，只认 HTML 中显式声明的apple-touch-icon
路径和格式比 sizes 更容易出问题
即使 sizes 写对了，路径或格式一错，iOS 就找不到图。它对资源加载极其严格，不走容错逻辑。
- href 必须是根相对路径（
/apple-touch-icon-180x180.png）或绝对 URL（https://example.com/...），不能是./icon.png或icons/icon.png - 必须是 PNG 格式，RGB 模式，无 ICC 配置文件，无透明背景（alpha 通道）；Photoshop/Figma 导出时务必关掉「透明背景」和「杂边」
- 本地开发用
http://localhost无法触发 iOS 缓存机制，真机测试前必须部署到公网可访问地址 - 验证方式只有两个：在 Safari 地址栏直接打开该 URL，确认返回 200 +
Content-Type: image/png；添加到主屏后截图检查是否清晰无灰边
别信“多尺寸堆砌”，现代 iOS 只要 180x180
网上流传的 sizes="120x120"、sizes="167x167" 等写法，在 iOS 14+ 上已无实际意义。Apple 自 iOS 11.3 起就锁定使用 180×180，其余尺寸仅用于兼容极老设备（如 iOS 7），当前主流部署中纯属冗余。
- 写多条
apple-touch-icon不会提升兼容性，反而增加 HTML 体积和解析负担 - 如果只提供
180x180，且满足格式与路径要求，就能覆盖全部现代 iOS 设备 - 想支持 iPad Pro 的 1668×2388 分辨率？不需要更大尺寸图，iOS 会自动缩放 180×180，前提是它能成功加载
sizes 本身，而在于它和文件物理尺寸、路径解析、导出设置三者必须严丝合缝——少一个条件，iOS 就静默失败，连控制台都不会提示。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
