如何修改网页显示的小图标(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

后面学到了再更新

相关推荐
Summer_Xu9 分钟前
模拟 Koa 中间件机制与洋葱模型
前端·设计模式·node.js
李鸿耀11 分钟前
📦 Rollup
前端·rollup.js
小kian13 分钟前
vite安全漏洞deny解决方案
前端·vite
时物留影15 分钟前
不写代码也能开发 API?试试这个组合!
前端·ai编程
试图感化富婆17 分钟前
【uni-app】市面上的模板一堆?打开源码一看乱的一匹?教你如何定制适合自己的模板
前端
卖报的小行家_17 分钟前
Vue3源码,响应式原理-数组
前端
牛马喜喜17 分钟前
如何从零实现一个todo list (2)
前端
小old弟21 分钟前
jQuery写油猴脚本报错eslint:no-undef - '$' is not defined
前端
Paramita21 分钟前
实战:使用Ollama + Node搭建本地AI问答应用
前端
一天睡25小时23 分钟前
前端の骚操作代码合集 (二)| 让你的网页变得有趣
前端·javascript