怎么在vue项目中的浏览器网页标题添加小图标

1.项目需求:在网页标题处添加小图标

如下所示

2.在Vue项目文件夹目录中找到index.html

如下所示

3.将所需图标放在static目录下

如下所示

为什么放在static目录下,而不是放在src目录下呢?

因为放在src下浏览器会找不到的,网页把根域名作为相对文件的根目录了,但是我们的文件的路径是相对于我们的项目文件的根目录的,因此找不到了。

反正不用管这么多了,不放在src下就是因为浏览器找不到,找不到就加载不了,就不会有效果

还有这里推荐大家用.ico格式的图标,而不是.jpg和.png格式的图片,改个格式而已,不紧要的。为什么这样用呢?因为方便,省空间。

4.在index.html的head标签中添加<link rel="icon" type="image/x-icon" href="static/favicon.ico" />

如下所示

5.保存,启动项目检查效果

ok,fine

猜你喜欢

转载自blog.csdn.net/StephenO_o/article/details/84063013