ios的apple-touch-icon是通过指定的png格式主屏幕图标，必须为180×180px、srgb色彩空间、绝对或根相对路径，且需清除缓存才能生效。
什么是 iOS 的 apple-touch-icon？
移动端主屏幕快捷图标在 iOS 上靠 <link rel="apple-touch-icon"> 指定，Android Chrome 则优先读取 <link rel="icon">（带 sizes），但 iOS 完全忽略标准 favicon.ico 和普通 rel="icon"。不加这行，Safari 会截屏生成模糊图标；加了但尺寸不对，iOS 会强行缩放导致锯齿。
- 必须放在
内，且建议放在所有其他<link>之前 - 路径需为绝对 URL 或根相对路径（如
/icons/icon-180.png），相对路径（./icon.png）在某些 iOS 版本中失效 - iOS 不支持 SVG，只认 PNG；推荐尺寸为
180×180px（对应 iPhone X+ 的 @3x 屏幕）
Android 和 PWA 需要哪些 manifest.json 字段？
仅靠 HTML <link> 不足以让 Android 正确显示主屏幕图标，尤其启用 PWA 后。Chrome 会读取 manifest.json 中的 icons 数组，而非 HTML 标签。
-
manifest.json必须通过<link rel="manifest" href="/manifest.json">声明，路径同样要求根相对或绝对 -
icons数组里至少包含一个192×192和一个512×512的 PNG（Chrome 要求这两档尺寸） -
purpose字段设为"any maskable"可兼容圆角裁剪（如 Pixel 手机），但若设计含边框或文字，慎用maskable
为什么加了 apple-touch-icon 还是显示默认图标？
常见原因不是代码没写，而是服务端或缓存干扰：
- iOS Safari 会缓存图标长达数天，修改后需手动长按主屏幕图标 → “删除”，再重新添加
- 服务器返回非 200 状态码（如 404、403）时，Safari 静默失败，不报错也不 fallback —— 用 Safari 开发者工具的“网络”面板确认图标请求状态
- 图片格式看似是 PNG，实则带 alpha 通道的 CMYK 模式或非 sRGB 色彩空间，iOS 渲染异常；用
file icon-180.png或在线工具检查是否为标准 RGB PNG
要不要为不同设备提供多套 apple-touch-icon？
没必要。iOS 自动适配所有机型：它只读取一个 <link rel="apple-touch-icon" href="/icon-180.png">，然后内部缩放。提供多个尺寸（如 60×60、76×76）反而可能因标签顺序混乱被误读。
- 唯一需要多尺寸的场景是旧版 iPad（iOS 7–9），但已无实际维护价值
- 如果想兼顾 Windows 8/10 的磁贴图标，需额外加
<meta name="msapplication-TileImage" content="/tileicon.png">，和 iOS 无关 - 注意：加
precomposed（如rel="apple-touch-icon-precomposed"）是 iOS 6 以前的写法，现代系统忽略，还可能干扰解析
<link> 更影响结果。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
