Vue项目favicon在iOS Chrome及Safari浏览器中无法更新问题排查

iOS 端的 Safari 和 Chrome 并不会像桌面端浏览器那样自动识别 favicon.ico 作为标签栏或主屏幕图标，你需要在 index.html 中添加专门针对 iOS 的图标配置：

1. 准备多尺寸的 iOS 专用图标
   按照 Apple 的规范，生成以下尺寸的 PNG 图标（命名建议清晰区分尺寸），放到 public 文件夹中：

   • 180×180px（适配 iPhone 6 及以上机型）
   • 152×152px（适配 iPad Retina）
   • 120×120px（适配 iPhone Retina）
   • 76×76px（适配普通 iPad）

2. 在 public/index.html 的 <head> 中添加 meta 标签
   插入以下链接标签，指定每个尺寸的图标路径：

   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
   <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
   <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
   <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
   

   如果你不希望系统自动给图标添加圆角和高光效果，可以把 rel 属性改为 apple-touch-icon-precomposed。

3. 验证路径与缓存

   • 确保图标文件名和路径与标签中的 href 完全匹配，Vue CLI 中 public 文件夹下的资源可以直接通过根路径 / 访问。
   • 完成配置后，重新打包部署，再用 iOS 设备的无痕模式测试（避免旧缓存干扰）。

另外，iOS 端的 Chrome 会优先读取 apple-touch-icon 系列图标，而非 favicon.ico，所以必须添加上述配置才能生效。

内容的提问来源于stack exchange，提问作者hellokidding