vue配置网站标签favicon.ico图标

一.首先可以使用在线工具将普通png或jpg转化为ico图标。

工具地址：https://www.bitbug.net/?rsv_upd=1

推荐使用3232或者4848，16*16比较模糊。

二.保证根目录index.html里面有ico设置，如：

<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" rel="external nofollow" />

三.在vue工程目录build文件夹下webpack.dev.conf.js与webpack.prod.conf.js文件中的HtmlWebpackPlugin中添加一条favicon:'favicon文件的相对路径’。

1.favicon内填写路径一定要是相对路径

2.修改的文件，dev是开发环境下，prod是生产环境下，两个都进行修改才能保证本地和通过服务器访问都有小图标

如：

    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon: './favicon.ico'  //此处是ico配置项
    })

来源：http://www.qubiancheng1024.com/details/623fc6c68fe8934aa4300888