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 的图标了。
参考资料
- html-webpack-plugin
- webpack