ico的作用

当咱们进入某些网站的时候，会发现浏览器最上方的标题栏的左侧有一个带logo的图标，这就是ico的作用。应用ico图标能够能够让读者更容易辨认您的网站，减少流量支出；其次，更容易产生业余的美感，还能肯定程序上加重服务器的流量带宽费用

favicon.ico

favicon是Favorites Icon的缩写，翻译成中文就是网站头像或者是网站徽标。而ico是文件的后缀名。Favicon是与某个网站或网页相关联的图标。如咱们相熟的百度

加载favicon

1.生成ico文件

通过在线网站生成ico。如比特虫, ico51

文件名： 强烈推荐favicon.ico
文件目录： 强烈推荐放在我的项目的根目录

2.批改webpack配置文件

同步更新webpack.dev.conf.js 和 webpack.prod.conf.js文件。此处须要用到html-webpack-plugin插件.

webpack.dev.conf.js: 开发环境配置

new HtmlWebpackPlugin({  filename: 'index.html',  template: 'index.html',  inject: true,  // 配置favicon  favicon: path.resolve('favicon.ico')}),

webpack.prod.conf.js: 生产环境配置

new HtmlWebpackPlugin({  filename: config.build.index,  template: 'index.html',  inject: true,  // 配置favicon  favicon: path.resolve('favicon.ico')  ...}),
留神：从新加载后失效

3.重启后，就会发现浏览器最上方的标题栏的左侧有一个带logo的图标了。

参考资料

  1. html-webpack-plugin
  2. webpack