React应用在Safari中自定义Favicon不生效仍显示默认图标如何解决？

常见解决办法 #

• 强制清除浏览器缓存
  浏览器会自动缓存旧图标，按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）强制刷新页面，或者用隐私模式打开站点，排除缓存干扰。

• 核对文件位置与命名
  确认favicon.ico和logo192.png放在项目的public目录下，文件名、后缀完全匹配（注意区分大小写，比如别写成Favicon.ico）。

• 检查额外配置冲突

  • 若用Create React App，查看public/manifest.json里的"icons"字段，默认图标配置可能会覆盖你的设置，替换成自己的图标路径即可。
  • 确认index.html里没有残留的React默认图标<link>标签，避免优先级冲突。

• 验证图标文件可用性
  在浏览器地址栏直接访问/favicon.ico和/logo192.png，如果无法显示，说明文件损坏或路径错误，重新上传正确的图标文件。

• 清除Service Worker缓存（若启用）
  打开浏览器开发者工具的Application面板，找到Service Workers选项，点击Unregister注销旧缓存，再刷新页面。

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