Html 简明教程
HTML - Favicon
favicon 代表 favorite icon ，它是一个与特定网站关联的小图标，通常显示在浏览器的地址栏、标签或书签中。HTML 允许我们在网页中添加 favicon，以便在浏览器标签上在网页标题附近显示我们企业的徽标。
Syntax to add Favicon
以下是将 favicon 添加到网页的语法。
<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。
在上面的图中，我们可以看到 TutorialsPoint、Facebook 和 Google 的 favicon 以红色矩形突出显示在每个标签的顶部。
Step to add Favicon to the Web Page
若要添加 Favicon，我们需要遵循下面提到的简单的步骤：
Step 1: 为您的 Favicon 创建或选择一张图片。它的常见大小为 16x16 像素或 32x32 像素。有几个在线工具可以帮助我们创建 Favicon，例如 Favicon.io 和 ionos.com。
Step 2: 将 Favicon 图片保存并上传到网站目录。确保图片必须采用浏览器可以识别的格式，例如，PNG、GIF 或 ICO。
Example
以下示例说明如何创建 HTML Favicon。我们使用 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>
List of Favicon Dimension
有很多 Favicon 尺寸。
Favicon Dimension |
Used For |
32x32 |
Desktop Browsers |
57x57 |
Mac ios |
76x76 |
Apple ipad |
96x96 |
Google TV |
120x120 |
Iphone Retina Touch Screen |
128x128 |
Chrome 网上应用店、Windows 8* 屏幕 |
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 |