vue项目修改浏览器图标以及标题

favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo,如图红圈的位置， 目前主要的浏览器都支持favicon.ico图标.

目前vue-cli搭建的vue项目里面已经有了一个static文件夹，存放静态文件。

然后去index.html在head下添加：

<link rel="icon" href="static/img/logo/logo.jpg" type="logo/logo.jpg">
<link rel="shortcut icon" href="static/img/logo/logo.jpg" type="logo/logo.jpg">	 <!-- 必须 -->

    

然后保存刷新浏览器，就会更新。（需重新运行项目npm run dev）

如果没有效果，则查看你的build文件夹下：build/webpack.dev.conf.js中。（到这个步骤之前我的是出现了，并且正常显示，如果不显示，则配置一下吧。）添加： favicon:'static/bitbug_favicon.ico'

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
	  // favicon图标(这里需要图标的路径与页面中的路径一样)
	  // favicon: 'static/bitbug_favicon.ico' 
	  // favicon: path.resolve('static/bitbug_favicon.ico')
	  favicon:'static/bitbug_favicon.ico'
    }),

到这里重新启动程序，页面的favicon已经可以正常显示了。(重新运行项目）

如果对你有用，关注一下博主的小程序，登录一下给予支持，以后有什么开源好用的源码都会上传到小程序

​​​​​​​