准备步骤:
(1)制作一个.ico类型的图片文件 一般尺寸为16*16
也可以在网上找 图片转换icon 的在线工具
(浏览器会首先在网页的根目录下找favicon.ico文件)
(2) 将favicon放在根目录下
1、原生
在html的 < head >< /head > 标签中引入
<!--浏览器地址栏icon-->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!--收藏时显示icon-->
<link rel="shortcut" href="favicon.ico" type="image/x-icon">
<!--<link rel="icon shortcut" href="favicon.ico" type="image/x-icon">-->
2、vue引入favicon.ico
需要修改webpack的配置项
// build---> webpack.dev.conf.js
var path=require('path') ; //没有path的话 先引入
plugins: [
// ……
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
favicon:path.resolve('favicon.ico'), //新增
}),
]
// build---> webpack.prod.conf.js
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon:path.resolve('favicon.ico'), //新增
})
修改之后 重新运行 即可
项目打包之后,也会在根目录下生成favicon.ico文件