HTML - 网站图标

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

添加网站图标的语法

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

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

什么是 HTML 网站图标？

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

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

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

要添加网站图标，我们需要按照下面提到的这些简单步骤操作

**步骤 1：** 创建或选择网站图标的图片。其常用大小可以是 16x16 像素或 32x32 像素。有一些在线工具可以帮助我们创建网站图标，例如 Favicon.io 和 ionos.com。

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

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

示例

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

<!DOCTYPE html>
<html>
<head>
   <title>Tutorialspoint</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 代码将产生以下结果。

网站图标尺寸列表

网站图标有很多尺寸。

网站图标尺寸	用途
32x32	桌面浏览器
57x57	Mac ios
76x76	苹果 iPad
96x96	Google TV
120x120	iPhone Retina 触摸屏
128x128	Chrome 网上应用商店，Windows 8* 屏幕
144x144	Internet Explorer 10 Metro
152x152	苹果 iPad
167x167	苹果 iPad
180x180	苹果 iPhone
192x192	Google 开发者应用
195x195	Opera 快速拨号
196x196	Android Chrome 主页
228x228	Opera Cast 图标

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

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

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

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

打印页面