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 代码将产生以下结果。
图标尺寸列表
网站图标有很多尺寸。
| 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 属性不支持主要浏览器。
