vue自定义网页标签图标不生效的原因和解决办法

正常情况下，自定义网页标签图标我们只需要更换下图中的favicon.ico即可，但是最近做项目遇到直接替换favicon.ico有不生效的问题

用.jpg或.png格式制作成.ico图标的网站有很多，这里推荐一个比特虫：https://www.bitbug.net/

发现问题原因

后来发现项目使用了@vue/cli-plugin-pwa插件https://www.npmjs.com/package/@vue/cli-plugin-pwa

打开上面链接后可以看到插件更改了网页标签图标的路径

我们项目中多了一个public/img/icons文件夹

 所以，我们需要在vue.config.js中更改pwa.iconPaths的路径，favicon.ico才能生效，配置如下：

module.exports = {
  pwa: {
    iconPaths: {
      favicon32: 'favicon.ico',
      favicon16: 'favicon.ico',
      appleTouchIcon: 'favicon.ico',
      maskIcon: 'favicon.ico',
      msTileImage: 'favicon.ico'
    }
  }
}

注意：修改了vue.config.js文件需要重启一下项目，如果图标还是没有改变，清除一下浏览器缓存即可生效。