vue项目--favicon设置以及动态修改favicon(浏览器顶部小图标)

动态更新favicon之前需要有一个默认的favicon。

项目里会有一个static文件夹或者其它文件夹，存放静态文件。

favicon图片放到该文件夹下。

然后再index.html中添加：

vue-cli2.0

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

vue-cli3.0

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

然后刷新浏览器，就会更新。

vue-cli2.0

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

new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true,
      favicon:'../stastic/favicon.ico'
    }),

到这个时候，页面的favicon已经可以正常显示了。

如何从服务器动态获取图片呢，这样以来就可以像上传文件一样，随意更换favicon。

在index.html文件里
动态创建link标签，然后添加元素

<script>
    window.onload = function(){
      var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
      link.type = 'image/x-icon';
      link.rel = 'shortcut icon';
      link.href = '这里是图片的地址xxxx';
      document.getElementsByTagName('head')[0].appendChild(link);
    }
  </script>