Vue项目中修改不了网页图标？？？

前言

由于每次都会忘记更换的步骤，所以记录一下。

今天给大家分享的是如何在网页标题中加入小图标，就像掘金前面那个蓝色的logo。

主要介绍两种方法：

一、普通HTML修改

1. 在html文件的head部分添加下面代码（注意href的路径）。

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

你的图标格式最好是.ico格式的，手贱试了一下，发现png，jpg的格式都可以，而且浏览器会自动帮你把图片尺寸缩放到16*16。

不过.ico格式体积要小很多，另外注意透明度的问题，jpg和bmp格式的图片会失去透明度，所以还是建议转一下。如果不想下载图片格式转换工具或者icon图标制作工具，这里给一个在线转换地址

2. 制作一个ico格式的图标

为了兼容性考虑，使用的颜色不要超过16色，这里这个图标的命名要求必须为favicon.ico。把这个图标放到网站的根目录下就可以了，页面加载时浏览器会自动检索这个图标然后把它加到标题上。

以后会分享更多实际开发问题的解决方案。

二、在VueCli3中修改

初次使用更改icon图标的时候，可能会根据脚手架搭建完成后的public中修改index.html中的link,如下:

但是，会发现即使修改了之后，重新刷新也没有任何作用。那么接下来我来讲一下解决的方法。一、先将自己的icon直接替换原的图标二、在根目录创建一个vue.config.js文件，然后写下之前

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

这边有个GitHub上的详细讲解pwa

记得修改完成之后需要重启项目，这样图标才会生效。