Webpack 配置: 自定义网站图标 favicon

文章目录

Webpack 配置: 自定义网站图标 favicon
实现核心技术: html-webpack-plugin 插件
完整代码示例
参考连接

实现核心技术: html-webpack-plugin 插件

我们可以透过 html-webpack-plugin 来实现自定义 favicon 的配置

从原生的角度来说，我们要自定义 favicon 需要在 html 文件的 <head> 标签内加上这句话

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

在使用 webpack 打包的场景下我们则通过 html-webpack-plugin 插件来实现 icon 注入

完整代码示例

https://github.com/superfreeeee/Blog-code/tree/main/front_end/webpack/webpack_html_favicon

配置方式

webpack.config.js

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      // filename, titile, template ...
      
      favicon: './public/favicon32.ico',
    }),
  ],
}

效果如下

参考连接

Title	Link
jantimon/html-webpack-plugin - Github	https://github.com/jantimon/html-webpack-plugin#options
React 中使用 webpack 动态添加 favicon 图标	https://blog.csdn.net/m0_37128507/article/details/83269084
ico 图标制作	https://www.dute.org/ico-converter

原文链接：https://blog.csdn.net/weixin_44691608/article/details/123271402