如何修改网页显示的小图标(Favicon)

目录

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

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

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


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

1. 使用自定义Favicon

  1. 准备图标文件

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

  2. 将图标文件放置在合适的位置

    将图标文件放置在项目中合适的位置,通常放在**public**目录下。

  3. 在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

后面学到了再更新

相关推荐
云动雨颤2 分钟前
流量分发代码实战|学会用JS控制用户访问路径
javascript
欢乐时光c3 分钟前
常见请求头响应头的含义
前端·面试
wzyoung3 分钟前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
用户73087011793083 分钟前
使用 CSS background-blend-mode 创造惊艳的视觉效果
前端
高端章鱼哥4 分钟前
Python 项目快速部署到 Linux 服务器基础教程
前端
李剑一5 分钟前
前端使用Web Cryptography API进行内容加密,几乎无法破解
前端
搬砖码5 分钟前
优雅实现!自定义滚动刻度选择器,精准选择无压力
前端
盏茶作酒296 分钟前
打造自己的组件库(二)CSS工程化方案
前端
mwq301237 分钟前
AI编程工具:Claude Code安装和使用
前端·claude
gnip23 分钟前
项目开发流程之技术调用流程
前端·javascript