HTML 网站图标
网站图标是一个显示在浏览器选项卡中页面标题旁边的小图像。
如何在 HTML 中添加网站图标
您可以选择任何您喜欢的图像作为您的网站图标。您也可以在类似 https://www.favicon.cc 这样的网站上创建自己的网站图标。
提示： 网站图标是一个小图像，所以它应该是一个对比度高且简单的图像。
网站图标图像会显示在浏览器选项卡中页面标题的左侧，如下所示：
要为您的网站添加网站图标，请将您的网站图标图像保存在 Web 服务器的根目录中，或者在根目录中创建一个名为 images 的文件夹，并将您的网站图标图像保存在该文件夹中。网站图标图像的常用名称是 "favicon.ico"。
接下来，在您的 "index.html" 文件中，在 <title> 元素之后，添加一个 <link> 元素，如下所示：
示例
<!DOCTYPE html>
<html>
<head>
<title>我的页面标题</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body>
</html>
现在，保存 "index.html" 文件并在浏览器中重新加载。您的浏览器选项卡现在应该会在页面标题的左侧显示您的网站图标图像。
网站图标文件格式支持
下表显示了网站图标图像的文件格式支持：
| 浏览器 | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | 是 | 是 | 是 | 是 | 是 |
| Chrome | 是 | 是 | 是 | 是 | 是 |
| Firefox | 是 | 是 | 是 | 是 | 是 |
| Opera | 是 | 是 | 是 | 是 | 是 |
| Safari | 是 | 是 | 是 | 是 | 是 |
Chapter Summary
- 使用 HTML
<link>元素插入网站图标
HTML Link 标签
| 标签 | 描述 |
|---|---|
| <link> | 定义文档与外部资源之间的关系 |
有关所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。
