HTML 网站图标

网站图标（Favicon）是出现在浏览器标签页、书签栏和历史记录中的小图标，它有助于增强品牌的识别度和用户体验。本教程将详细介绍什么是网站图标、网站图标的设置，以及图标图片的大小和支持的图片格式。

什么是网站图标？

网站图标（Favicon）是一个小图标，通常尺寸为16x16像素或32x32像素，用于在浏览器标签页、书签栏和历史记录中显示。它可以帮助用户快速识别网站，并增加网站的专业性和品牌认知度。

网站图标的设置

设置网站图标非常简单，只需要在HTML文档的<head>部分添加一个<link>标签即可。以下是一个基本示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is an example of setting a website icon using HTML.</p>
</body>
</html>

在这个示例中，<link rel="icon" href="favicon.ico" type="image/x-icon">指定了网站图标的路径和类型。

网站图标图片的大小

网站图标的标准尺寸通常是16x16像素，但现代浏览器也支持更大的图标尺寸，如32x32像素。使用较大的图标可以提高显示质量，尤其是在高分辨率屏幕上。以下是一些建议的图标尺寸：

  • 16x16像素：适用于大多数浏览器和设备。
  • 32x32像素：适用于高分辨率屏幕和某些特殊用途。
  • 192x192像素：适用于Android主屏幕图标。
  • 180x180像素：适用于iOS主屏幕图标。

网站图标支持的图片格式

网站图标支持多种图片格式，以下是一些常见的格式：

  • ICO：这是最传统的格式，广泛支持于所有浏览器。ICO文件可以包含多个尺寸和颜色深度的图像。
  • PNG：PNG格式支持透明背景，适用于需要透明效果的图标。现代浏览器普遍支持PNG格式。
  • JPEG：虽然不常用，但某些情况下也可以使用JPEG格式。
  • SVG：SVG格式支持矢量图形，可以在不同尺寸下保持清晰。虽然不是所有浏览器都支持SVG图标，但它的使用正在逐渐增加。
BrowserICOPNGGIFJPEGSVG
EdgeYesYesYesYesYes
ChromeYesYesYesYesYes
FirefoxYesYesYesYesYes
OperaYesYesYesYesYes
SafariYesYesYesYesYes

示例代码

以下是一个完整的示例，展示了如何设置不同格式和尺寸的网站图标：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <!-- 16x16像素 ICO 图标 -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <!-- 32x32像素 PNG 图标 -->
    <link rel="icon" href="favicon-32.png" type="image/png" sizes="32x32">
    <!-- 192x192像素 PNG 图标，适用于 Android 主屏幕 -->
    <link rel="icon" href="favicon-192.png" type="image/png" sizes="192x192">
    <!-- 180x180像素 PNG 图标，适用于 iOS 主屏幕 -->
    <link rel="apple-touch-icon" href="favicon-180.png" sizes="180x180">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is an example of setting different types and sizes of website icons using HTML.</p>
</body>
</html>

在网站程序中设置网站图标

每一种网站程序（网站CMS系统）的配置有所不同，比如一些国内开源程序并没有在程序后台设置网站图标项，这时则需要我们在相应的模板文件中手动添加。

像WordPress这样的程序在后台有专门的网站图片设置项，只需要我们简单的上传图片、点击设置即可完成，WordPress网站程序将自动配置网站图片。就像这样：

QQ浏览器截图20241122192721

通过本教程，您应该已经了解了什么是网站图标、网站图标的设置，以及图标图片的大小和支持的图片格式。合理设置网站图标可以提升用户的浏览体验，增强品牌的识别度。希望这篇教程对您有所帮助！