[React] 如何在React 项目中添加 favicon.ico

一、使用 create-react-app 搭建的项目

如果将文件放入 public 文件夹，Webpack 将不会处理它。相反，它将被复制到构建文件夹中。要引用 public 文件夹中的资源，需要使用名为 PUBLIC_URL 的特殊变量。

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

注意：

1、favicon.ico 或者 png 等其他格式的图片，必须放在 public 文件夹下（也就是跟 index.html 同级）

2、设置 favicon 后发现浏览器里的图标并没有改变，可能是缓存问题，需要强制清除缓存。

官方文档详细解释：https://www.html.cn/create-react-app/docs/using-the-public-folder/

二、未使用脚手架搭建的项目

修改 Webpack.config.js 文件中的 HtmlWebpackPlugin 配置，目的是在webpack 打包之后在 index.html 中写入favicon.ico 文件

   new HtmlWebpackPlugin({
        template: 'src/index.html',
        chunks: ['main'],
        ENV_ID: ENV_ID ? `?env_id=${ENV_ID}` : '',
        CLIENT_ID,
        // favicon: path.resolve('favicon.ico'),   注意这里的路径
        favicon: path.join(__dirname, ('public/favicon.ico')),
      }),

HtmlWebpackPlugin 插件配置项指南

path.resolve 与 path.join 的区别： https://juejin.cn/post/6844903861920989198