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

2023-07-18 02:59| 来源: 网络整理| 查看: 265

文章导航 1.直接使用favicon.ico2. 使用图片3. 使用Base64编码图片

1.直接使用favicon.ico

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

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

图片在线生成ico

2. 使用图片

1️⃣方式一在 index.html 中指定使用的图片 (不仅限于 ico 文件)

由于 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 请求，但缺点就是编码比较长。

【本文地址】

今日新闻