HTML 网站图标

图标是浏览器选项卡中页面标题旁边显示的小图片。

如何在 HTML 中添加网站图标

您可以使用任何您喜欢的图片作为您的网站图标。您还可以在以下网站上创建自己的网站图标https://www.favicon.cc。

提示：网站图标是一个小图片，因此它应该是一个具有高对比度的简单图片。

网站图标图片显示在浏览器选项卡中页面标题的左侧，如下所示：

要将网站图标添加到您的网站，请将您的网站图标图片保存到网络服务器的根目录中，或者在根目录中创建一个名为 images 的文件夹，并将您的网站图标图片保存在此文件夹中。网站图标图片的常用名称是"favicon.ico"。

接下来，添加一个<link>元素添加到您的 "index.html" 文件中，位于<title>元素，像这样：

示例

<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

现在，保存 "index.html" 文件并将其重新加载到浏览器中。您的浏览器选项卡现在应该在页面标题的左侧显示您的网站图标图片。

Favicon 文件格式支持

下表显示了网站图标图片的文件格式支持：

Browser	ICO	PNG	GIF	JPEG	SVG
Edge	Yes	Yes	Yes	Yes	Yes
Chrome	Yes	Yes	Yes	Yes	Yes
Firefox	Yes	Yes	Yes	Yes	Yes
Opera	Yes	Yes	Yes	Yes	Yes
Safari	Yes	Yes	Yes	Yes	Yes

章节总结

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

HTML练习

HTML 链接标签

Tag	Description
<link>	Defines the relationship between a document and an external resource

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

码农教程 - 一技在手,衣食无忧!