HTML - 网站图标

Favicon图标代表收藏夹图标，它是与特定网站相关的小图标，通常显示在浏览器的地址栏、选项卡或书签中。HTML 允许我们在网页上添加网站图标，以便我们可以在浏览器选项卡上的网页标题附近显示我们的业务徽标。

添加 Favicon 的语法

以下是将网站图标添加到网页的语法。


<head>
	 <link rel="icon" 
				 href="link/to/icon" 
				 type="image/x-icon">
</head>

什么是 HTML 网站Favicon图标？

网站Favicon图标是代表您的网站的小图像，可帮助用户在多个选项卡、书签和搜索结果中识别它。它可以是各种格式，例如 ICO、PNG、GIF、JPEG 或 SVG，但 ICO 是支持最广泛的格式。如果您曾经访问过一个网站，并注意到浏览器选项卡中的页面标题旁边有一个小图标，那么您已经看到了一个网站图标。

在上图中，我们可以看到 Qikepu、Facebook 和 Google 的网站图标在每个选项卡顶部的红色矩形中突出显示。

将 Favicon图标添加到网页的步骤

要添加网站Favicon图标，我们需要遵循下面提到的这些简单步骤：

步骤1：为您的网站图标创建或选择图像。其常见大小可以是 16x16 像素或 32x32 像素。有一些在线工具可以帮助我们创建网站图标。

步骤2：保存网站图标图像并将其上传到网站目录。确保图像必须采用浏览器可以识别的格式，例如 PNG、GIF 或 ICO。

步骤3：现在使用 <link> 元素，它告诉浏览器在哪里可以找到图标图像。请记住，<link> 标签位于 HTML 文档的标题部分，即 <head> 元素。

例

以下示例说明如何创建 HTML 网站图标。我们使用的是PNG图像格式。


<!DOCTYPE html>
<html>
<head>
	 <title>七科普</title>
	 <link rel = "icon" 
				 type = "image/png" 
				 href = "images/faviconTP.png">
</head>

<body>
	 <h1>Adding Favivon</h1>
	 <p>
			This is an example of including 
			favicon to the web page.
	 </p>
	 <p> 
			Favicon will be displayed in the browser 
			tab to the left of the page title.
	 </p>
</body>
</html>

输出

如果在本地运行代码，上面的 HTML 代码将产生以下结果。

Adding Favicon

图标尺寸列表

网站图标有很多尺寸。

Favicon图标尺寸	用于
32×32	桌面浏览器
57×57	Mac ios操作系统
76x76	苹果iPad
96×96	谷歌电视
120×120	Iphone 视网膜触摸屏
128×128	Chrome 网上应用店，Windows 8* 屏幕
144×144	Internet Explorer 10 Metro
152×152	苹果iPad
167×167	苹果iPad
180×180	苹果 Iphone
192×192	Google 开发者应用
195×195	Opera 快速拨号
196×196	Chrome的Android主页
228×228	Opera 演员表图标

浏览器支持不同的网站Favicon图标文件格式

下表说明了不同浏览器支持的各种网站图标文件格式

浏览器	GIF	PNG	JPEG	SVG	ICO
Chrome	Yes	Yes	Yes	Yes	Yes
Edge	Yes	Yes	Yes	Yes	Yes
Safari	Yes	Yes	Yes	Yes	Yes
Firefox	Yes	Yes	Yes	Yes	Yes
Opera	Yes	Yes	Yes	Yes	Yes

注意：网站图标的 sizing 属性不支持主要浏览器。

打印本页