Html 简明教程

HTML - Favicon

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

A favicon stands for favorite icon, it is a small icon associated with a particular website, usually displayed in the browser’s address bar, tab, or bookmarks. HTML allows us to add a favicon to our webpage so that we can display the logo of our business near to webpage title on the browser tab.

Syntax to add Favicon

以下是将 favicon 添加到网页的语法。

Following is the syntax to add favicon to your webpage.

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

What is a HTML Favicon?

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

A favicon is a small image that represents your website and helps users identify it among multiple tabs, bookmarks, and search results. It can be in various formats, such as ICO, PNG, GIF, JPEG, or SVG, but ICO is the most widely supported format. If you have ever visited a website and noticed a small icon next to the page title in your browser’s tab, you have seen a favicon.

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

In the above figure, we can see the favicons of TutorialsPoint, Facebook, and Google highlighted in the red rectangle on the top of each tab.

Step to add Favicon to the Web Page

若要添加 Favicon，我们需要遵循下面提到的简单的步骤：

To add a favicon, we need to follow these simple steps mentioned below:

Step 1: 为您的 Favicon 创建或选择一张图片。它的常见大小为 16x16 像素或 32x32 像素。有几个在线工具可以帮助我们创建 Favicon，例如 Favicon.io 和 ionos.com。

Step 1: Create or choose an image for your favicon. Its common size could be 16x16 pixels or 32x32 pixels. There are a few online tools available that help us in creating a favicon such as Favicon.io and ionos.com.

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

Step 2: Save and upload the favicon image to the website directory. Make sure the image must be in a format that browsers can recognize, such as PNG, GIF, or ICO.

Step 3: 现在使用 * <link>* 元素告诉浏览器在哪里查找 Favicon 图片。请记住， <link> 标记位于标头部分，即 HTML 文档的 * <head>* 元素中。

Step 3: Now use the <link> element which tells the browser where to find the favicon image. Remember, the <link> tag comes inside the header part i.e. <head> element of HTML document.

Example

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

The following example illustrates how to create an HTML favicon. We are using the PNG image format.

<!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>

Output

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

The above HTML code will produce the following result if you run the code locally.

List of Favicon Dimension

有很多 Favicon 尺寸。

There are lots of sizes for favicon.

Favicon Dimension

Used For

32x32

Desktop Browsers

57x57

Mac ios

76x76

Apple ipad

96x96

Google TV

120x120

Iphone Retina Touch Screen

128x128

Chrome Web Store, Windows 8* Screen

144x144

Internet Explorer 10 Metro

152x152

Apple Ipad

167x167

Apple Ipad

180x180

Apple Iphones

192x192

Google Developer Apps

195x195

Opera Speed Dial

196x196

Android Home of Chrome

228x228

Opera Cast Icon

Browser Support for different Favicon File Format

下表说明了不同浏览器支持的各种 Favicon 文件格式。

The table below illustrates the various favicon file formats that are supported by different browsers

Browser

GIF

PNG

JPEG

SVG

ICO

Chrome

Yes

Edge

Yes

Safari

Yes

Firefox

Yes

Opera

Yes