目录
1. 使用自定义Favicon
2. 在vue中设置Favicon
3. 使用Vue插件设置Favicon
网页显示的小图标,通常称为Favicon(Favorites Icon),是网站的标识之一,也是浏览器标签页上显示的图标。
1. 使用自定义Favicon
-
准备图标文件:
首先需要准备好自定义图标文件,通常为.ico、.png、.svg等格式的图像文件。在这里推荐一个下载图标的网站:iconfont-阿里巴巴矢量图标库
-
将图标文件放置在合适的位置:
将图标文件放置在项目中合适的位置,通常放在
public
目录下。 -
在HTML中添加Favicon链接:
在HTML的
<head>
标签中添加以下代码,将图标文件链接到网页。如果图标文件不在项目根目录下,则需要相应调整链接的路径:
<link rel="icon" href="/favicon.ico">
2. 在vue中设置Favicon
在vue工程中是修改index.html文件,即<link>中的链接:
<head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title>
</head>
3. 使用Vue插件设置Favicon
后面学到了再更新