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	支持	支持	支持	支持	支持

本章总结

使用 HTML <link> 元素插入网站图标

HTML 链接标签

标签	描述
<link>	定义文档与外部资源之间的关系。

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考。