如何修改网页显示的小图标（Favicon）

努力的派大星星2024-04-03 16:14

[1. 使用自定义Favicon](#1. 使用自定义Favicon)

[2. 在vue中设置Favicon](#2. 在vue中设置Favicon)

[3. 使用Vue插件设置Favicon](#3. 使用Vue插件设置Favicon)

网页显示的小图标，通常称为Favicon（Favorites Icon），是网站的标识之一，也是浏览器标签页上显示的图标。

1. 使用自定义Favicon

准备图标文件：

首先需要准备好自定义图标文件，通常为**.ico** 、.png、.svg等格式的图像文件。在这里推荐一个下载图标的网站：iconfont-阿里巴巴矢量图标库
将图标文件放置在合适的位置：

将图标文件放置在项目中合适的位置，通常放在**public**目录下。
在HTML中添加Favicon链接：

在HTML的<head>标签中添加以下代码，将图标文件链接到网页。如果图标文件不在项目根目录下，则需要相应调整链接的路径：

html 复制代码

<link rel="icon" href="/favicon.ico">

2. 在vue中设置Favicon

在vue工程中是修改index.html文件，即<link>中的链接：

html 复制代码

<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

后面学到了再更新