如何自定义favicon.ico请求URL？React项目图标加载失败问题

先修正代码里的两处关键错误 #

你提供的link标签存在两个明显问题：

• 属性误用：应该是rel="icon"，而非ref="icon"（ref是React组件的引用属性，和页面图标配置无关）
• 文件后缀不匹配：你的实际文件是favicon.ico，但href里写的是/img/favicon.icon，后缀不一致导致无法匹配文件

修正后的link标签代码：

<head>
  ...
  <link rel="icon" href="/img/favicon.ico" type="image/x-icon">
  ...
</head>

处理浏览器默认Favicon请求 #

即使修正了标签，Chrome可能仍会默认请求根目录的favicon.ico，这是浏览器的固有行为。可以通过以下方式彻底解决：

• 确认public/img/favicon.ico文件确实存在，路径和文件名完全匹配（Linux/macOS环境下注意大小写敏感）
• 若使用Create React App，检查public/manifest.json里的icons数组，确保配置的图标路径正确
• 清除浏览器缓存：按Ctrl+Shift+R强制刷新页面，或在开发者工具Network面板勾选「Disable cache」后刷新

完成以上操作后，浏览器会正确请求http://localhost:3000/img/favicon.ico。

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