网站小图标 (favicon) 的正确设置

1. 直接使用favicon.ico

生成 favicon.ico 文件，直接放到服务器项目根目录下就可以了。

• 这种方式只能使用 ico 文件，而且必须命名为 favicon.ico
• 在 index.html 中没有指定 favicon 的情况下才会生效。

图片在线生成ico

2. 使用图片

1️⃣方式一

在 index.html 中指定使用的图片 (不仅限于 ico 文件)

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

由于 webpack 不会对 index.html 引用的图片进行编译处理，你需要在 webpack 中配置将文件拷贝到引用的路径。

new CopyWebpackPlugin([
   { from: __dirname + '/src/favicon.ico', to: 'favicon.ico' },
])

2️⃣方式二

还有一种就是直接在 HtmlWebpackPlugin 中配置，这样就可以将图片打包生成到指定目录，并将引用注入到 index.html

plugins: [
    new HtmlWebpackPlugin({
        favicon: './src/image/myfavicon.png'
    })
]

3. 使用Base64编码图片

也可以直接将图片转成 Base64 编码形式，这种方式可以减少 img 请求，但缺点就是编码比较长。

<link rel="icon" href="base64-encode-image" type="image/x-icon">