1、最好把favicon.ico放到 index.html放到同一目录
2、在webpack 配置文件里面配置
// 在webpack.dev.conf.js 里面的 plugins配置
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon: './favicon.ico' //增加这条
}),
//和
//在 webpack.prod.conf.js 里面 plugins 配置 ,不然build的时候也找不到favicon.ico
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: './favicon.ico', //增加这条
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
3、在index.html 中引入代码
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
4、修改完配置文件最好 npm run dev 一下
如果这样小图标还是没有显示,最好 清空一些缓存
作者:xilong
链接:https://www.jianshu.com/p/1f7a096b61c2
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
本文详细介绍了如何在项目中正确配置favicon.ico图标,包括将其放置于正确目录、在webpack配置文件中添加必要插件设置、在index.html中引入代码以及清除缓存的方法,确保浏览器能正确显示网站图标。

被折叠的 条评论
为什么被折叠?



