HTML 网站图标

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

如何在 HTML 中添加网站图标

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

提示： 图标是小图像，因此它应该是具有高对比度的简单图像。

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

要将网站图标添加到您的网站，请将您的网站图标图像保存到根目录目录，或在根目录中创建一个文件夹调用图像，并将您的网站图标图像保存在此文件夹中。网站图标图像的通用名称是“favicon.ico”。

接下来，将元素添加到“index.html”文件中，在元素之后，如下所示：<link>``<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”文件并将其重新加载到浏览器中。您的浏览器选项卡现在应该在页面标题的左侧显示您的网站图标图像。

网站图标文件格式支持

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

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 链接标签

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

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