如何为iPhone正确设置Favicon？iPhone 6S Safari图标不显示求助

嘿，我之前也踩过iPhone Safari不加载自定义图标的坑，结合你的情况，给你几个实用的排查和解决步骤：

• 先确认文件本身和路径正确性
  直接在浏览器地址栏输入https://你的域名/apple-touch-icon.png，看看能不能正常打开这个图片：

  • 如果打不开，说明文件没放在网站根目录，或者路径写错了，把图标文件移到根目录，或者修正href里的路径。
  • 确认图片确实是180x180像素的PNG格式，哪怕你在link标签里写了sizes，文件本身尺寸不对也会被Safari忽略。

• 移除冗余的旧标签
  你同时添加了apple-touch-icon和apple-touch-icon-precomposed，后者是iOS 6及更早版本的旧用法，现在iOS已经不再需要它，反而可能导致冲突。建议删掉precomposed那一行，只保留：

  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  

• 检查服务器的Content-Type响应头
  有时候服务器会把PNG图片的Content-Type错误设置成text/plain或者其他类型，这会让Safari拒绝加载。你可以用Safari的开发者工具（先在设置里开启“开发”菜单），查看请求图标时的网络响应：

  • 找到apple-touch-icon.png的请求，检查响应头里的Content-Type是否为image/png。如果不对，需要在服务器配置里修正（比如Nginx的mime.types文件，或者Apache的.htaccess）。

• 强制Safari重新抓取图标
  单纯清除历史记录可能不够彻底，试试这两个方法：

  • 打开你的网站，点击Safari底部的「分享」按钮，选择「添加到主屏幕」，这时候Safari会主动重新请求图标。如果添加后主屏幕显示了正确图标，说明之前是系统缓存没清干净。
  • 直接重启iPhone，有时候系统级的缓存需要重启才能彻底刷新。

• 排查Web App Manifest的影响
  如果你网站里还配置了manifest.json，里面的icons字段也可能和apple-touch-icon冲突。可以暂时移除manifest的link标签，测试是否是它导致的问题。如果是，需要修正manifest里的iOS图标配置。

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