apple-touch-icon 的 sizes 属性在 Safari 中不生效，必须为每个尺寸单独声明 rel="apple-touch-icon" 标签，Safari 仅根据 href 路径匹配对应图标，忽略 sizes、type 等属性。
apple-touch-icon 的 sizes 属性不生效？先确认你用对了地方
HTML 中的 sizes 属性在 <link rel="apple-touch-icon"> 标签里**根本不会被 Safari 解析或使用**。Apple 官方文档明确说明：iOS 和 macOS Safari **只认 href 指向的单个图标文件**，完全忽略 sizes、type 甚至 media。所谓“配各种尺寸”，靠的是多个独立的 <link> 标签，而不是一个标签里写多个 sizes。
正确写法：为每个尺寸单独声明一个 apple-touch-icon link
你需要为不同设备像素密度和屏幕尺寸提供多个图标，并用多个 <link rel="apple-touch-icon"> 标签分别声明。Safari 会根据设备能力自动选择最匹配的那个（优先选高分辨率、尺寸最接近的）。
- 必须用
rel="apple-touch-icon"，不能是icon或shortcut icon - 每个
<link>只能有一个href，且路径需可访问（建议绝对路径） -
sizes属性可以写，但纯属“文档标记”，不影响行为；写它只为语义清晰或工具识别（如 Lighthouse 不报错） - 推荐尺寸：
57x57（老 iPhone）、60x60（iPhone）、72x72（iPad）、76x76（iPad Pro）、114x114、120x120、144x144、152x152、167x167、180x180（最新 iPhone）
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-57x57.png" sizes="57x57"><link rel="apple-touch-icon" href="/icons/apple-touch-icon-60x60.png" sizes="60x60"><link rel="apple-touch-icon" href="/icons/apple-touch-icon-76x76.png" sizes="76x76"><link rel="apple-touch-icon" href="/icons/apple-touch-icon-120x120.png" sizes="120x120"><link rel="apple-touch-icon" href="/icons/apple-touch-icon-152x152.png" sizes="152x152"><link rel="apple-touch-icon" href="/icons/apple-touch-icon-167x167.png" sizes="167x167"><link rel="apple-touch-icon" href="/icons/apple-touch-icon-180x180.png" sizes="180x180">
为什么有些尺寸没被加载？检查实际设备和缓存
Safari 不会下载所有 apple-touch-icon 链接，只取它认为当前设备需要的那一个（通常是最匹配的高分屏尺寸）。常见现象：
- 在桌面 Safari 添加到主屏幕，可能只请求
120x120或180x180，而忽略57x57 - iOS 模拟器或旧设备可能 fallback 到较小尺寸，但前提是对应
href返回 200 - 图标返回 404 或 MIME 类型错误（如返回
text/html）会导致整个图标链失效，Safari 可能退回到系统默认图标 - CDN 或代理缓存了早期的
apple-touch-icon.png（根目录默认名），会覆盖你新写的<link>—— 务必清缓存并验证网络面板中实际加载的是哪个 URL
别和 favicon 混用：apple-touch-icon 是独立机制
apple-touch-icon 和标准 favicon 完全无关。即使你写了 <link rel="icon"> 或 <link rel="shortcut icon">，Safari 也不会拿它们当 touch icon。反过来，只写 apple-touch-icon 不影响桌面浏览器 favicon 显示。
- 不要指望
<link rel="icon" sizes="180x180">能替代apple-touch-icon - 不要把 PNG 图标放在
/favicon.ico路径下就以为 iOS 能读到 —— 必须显式声明rel="apple-touch-icon" - 图标必须是 PNG（无透明度问题更稳妥），不能是 SVG 或 ICO；Apple 不支持
png外的格式作为 touch icon
真正起作用的只有 href 路径是否正确、文件是否存在、响应头是否干净（Content-Type: image/png），以及你有没有为关键尺寸（尤其是 180x180）提供高质量资源 —— 其他尺寸只是兼容性兜底，现代设备基本只认这一个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
