apple-touch-icon桌面端Safari显示正常 移动端不显示问题求助

• 缓存问题排查
  移动端Safari对apple-touch-icon的缓存周期极长，预发布环境迭代后容易读取旧缓存失效。可先清理Safari的「历史记录与网站数据」，再给图标路径加版本号后缀强制拉取新资源，示例：

  <link rel="apple-touch-icon" sizes="180x180" href="/build/favicon/apple-touch-icon-180x180.png?v=2" />
  

• 图标文件本身校验
  确认所有touch-icon符合要求：
  • 尺寸严格和sizes属性声明一致，不是拉伸生成的图片
  • 采用非隔行扫描（non-interlaced）格式的PNG文件，避免压缩损坏
  • 预发布环境如果有防盗链/访问鉴权，要确认图标资源支持匿名访问：iOS添加到主屏幕时发起的资源请求不会携带当前页面的Cookie，若预发布需要登录才能访问资源，会导致图标拉取失败
• 路径适配问题排查
  若你的预发布站点部署在域名二级目录下，根路径开头的/build/xxx会直接请求域名根目录对应的资源，而非站点部署目录。可修改为相对路径，或填写预发布环境的完整绝对路径测试。
• manifest 冲突排查
  iOS对Web App Manifest的支持存在兼容性问题，若manifest内配置的icons字段和link标签声明的touch-icon冲突，会优先读取manifest内的配置导致加载失败。可先临时注释manifest的引用代码，单独测试touch-icon是否能正常显示，排查是否是配置冲突导致。
• 基础meta标签校验
  确认页面已添加iOS Web App适配的基础meta标签：

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  测试时优先使用系统自带的Safari浏览器，避免第三方iOS浏览器（如Chrome、Edge）的自定义逻辑干扰排查。

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