React应用添加Favicon遇问题：构建报错及路径异常求助

1. 修复构建冲突（Multiple assets emit different content to the same filename index.html） #

你的webpack配置中，htmlOverlay已经内置了HtmlWebpackPlugin的功能，手动重复添加该插件会导致生成两个index.html文件，引发资源冲突。解决方案是移除手动声明的HtmlWebpackPlugin实例，直接在htmlOverlay配置项中添加favicon参数：

修改webpack.config.js：

const { webpackConfig, webpackMerge, htmlOverlay } = require('just-scripts');
const webpack = require('webpack')

module.exports = webpackMerge.merge(
  webpackConfig({}),
  htmlOverlay({
    template: 'public/index.html',
    favicon: './public/favicon.ico' // 直接在此配置favicon
  }),
  {
    output: {
      publicPath: '/'
    },
    devServer: {
      historyApiFallback: true
    },
    plugins:[
      new webpack.DefinePlugin({ 
        'process.env.API_URL': JSON.stringify(process.env.API_URL)
      })
      // 移除手动添加的HtmlWebpackPlugin
    ]
  }
);

2. 修正index.html中的favicon路径 #

你当前使用的./public/favicon.ico是相对路径，在非根路由下会自动拼接当前路由前缀，导致请求路径错误（比如/home/public/favicon.ico）。直接使用根相对路径即可解决跨路由404问题：

修改index.html中的link标签：

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

此路径会让浏览器始终从网站根目录请求favicon，不受当前路由影响。

3. 验证打包结果 #

修改配置后执行npm run build，dist目录根路径下会自动生成favicon.ico文件，同时生成的index.html中会自动保留正确的icon引用。

额外排查点 #

• 强制清理浏览器缓存：按Ctrl+Shift+R刷新页面，或在浏览器开发者工具的网络面板勾选「Disable cache」测试。
• 检查favicon文件有效性：确保public目录下的favicon.ico是完整可用的图标文件，避免因文件损坏导致不显示。

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