React项目npm start启动时Favicon无法正常显示的问题求助

两种打开场景的表现差异，本质是资源解析规则的底层区别：

• 直接双击打开index.html时，浏览器使用file://协议加载页面，会按照本地文件系统的相对路径，在index.html的同层级目录查找favicon文件，只要路径匹配就能正常加载
• 执行npm start启动项目时，是webpack-dev-server在本地托管项目访问，它的静态资源访问逻辑和本地文件系统完全不同：Create React App默认只会把public目录下的所有文件，映射为网站根路径下可直接访问的网络资源。如果你的favicon.ico是放在和package.json同级的项目根目录，dev-server根本不会把这个文件暴露成可访问的网络地址，自然会请求失败、图标无法显示。

• 调整favicon存放路径：把当前放在项目根目录的favicon.ico移动到项目内的public文件夹下，确保最终文件位置为项目根目录/public/favicon.ico
• 修正index.html中的引用写法：将原有的favicon标签替换为CRA规范写法

  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  

  其中%PUBLIC_URL%是CRA内置的路径占位符，会在开发环境和生产构建阶段自动替换为正确的静态资源根路径，从根源上避免路径错配
• 强制清缓存验证：修改完成后不要依赖开发服务器的热更新生效，直接按Ctrl+Shift+R（Windows）/Cmd+Shift+R（Mac）强制刷新页面，跳过浏览器对favicon的强缓存。

• 不要把favicon文件放到src目录下：src目录下的文件需要经过webpack编译打包才能被浏览器访问，没有配置对应静态资源loader规则的话，直接把ico文件放在src里是无法正常加载的
• 若修改后仍然无法显示，打开浏览器开发者工具的「网络」面板，筛选关键词favicon查看请求状态：返回404就核对文件存放位置、路径拼写是否正确；返回200但图标不展示，就检查favicon.ico文件本身是否损坏、格式是否为浏览器可识别的图标格式。

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