文章导航
1.直接使用favicon.ico2. 使用图片3. 使用Base64编码图片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">
