什么是 HTML 图标？
在 HTML 中，HTML图标Favicon（Favorites Icon）是显示在浏览器标签页、书签栏、收藏夹和历史记录中的小图标。
它通常是 16x16 或 32x32 像素的小图标，会显示在浏览器标签页中页面标题的左侧，像下图这样：
注意：Favicon 是网站的小图标，要设计简单、高分辨率，避免细节过多导致图标模糊不清。
HTML 如何添加图标
为网站添加Favicon非常简单，只需几步即可完成。以下是详细步骤：
1. 准备Favicon图标
你可以使用在线Favicon图标生成器或图像编辑软件（如Photoshop）创建一个16x16或32x32像素的图标。
常见的Favicon图标格式包括.ico、.png、.svg等。
- .ico：这是最传统的 Favicon 图标格式，兼容性最好。
- .png：现代浏览器也支持 PNG 格式的 Favicon 图标，且图像质量更好。
- .svg：矢量格式，适合高分辨率显示。
2. 将Favicon文件放入项目目录
将你准备好的 Favicon 图标放入你的网站项目目录中，通常放在根目录或images文件夹中。
your-website/
│
├── index.html
├── images/
│ └── favicon.ico
└── css/
└── style.css3. 在HTML文件中添加 Favicon 图标链接
接下来，你需要在HTML文件的<head>部分添加一个<link>标签，告诉浏览器在哪里找到 Favicon 图标文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>开创者教程(kaicz.com)</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个简单的网站示例。</p>
</body>
</html>- rel="icon"：指定这是一个图标。
- type="image/x-icon"：指定图标的MIME类型。如果是PNG格式，可以改为type="image/png"。
- href="/images/favicon.ico"：指定Favicon文件的路径。根据你的文件位置调整路径。
跨平台使用 Favicon 图标
- 多平台支持：为了在不同设备和平台上获得最佳效果，你可以提供多种尺寸和格式的 Favicon图标。例如：
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">- 缓存问题：有时浏览器会缓存旧的Favicon。如果你更新了 Favicon 图标但没有看到变化，可以尝试清除浏览器缓存。
Favicon 图标支持的浏览器
浏览器
ICO
PNG
GIF
JPEG
SVG
Chrome
支持
支持
支持
支持
支持
Edge
支持
支持
支持
支持
支持
Firefox
支持
支持
支持
支持
支持
Safari
支持
支持
支持
支持
支持
评论区 0
发表评论
教程介绍
HTML 超文本标记语言，一种用于创建网页的标准标记语言，在浏览器上运行和解析。
60
章节
241
阅读
0
评论