📌  相关文章
📜  html favicon 标记 - Html (1)

📅  最后修改于: 2023-12-03 15:01:10.563000             🧑  作者: Mango

HTML Favicon 标记 - HTML

HTML Favicon 标记是一种网页图标，也称为浏览器标签上的网站标识图标。Favicon 必须是一个正方形的图片，通常是 16x16 像素大小的 .ico 格式。通过使用 Favicon 标记，网站可以展示其品牌标识和更好地与用户交互。

如何添加 Favicon 标记

在 HTML 中添加 Favicon 标记非常简单，只需要在 head 标签中添加以下代码即可：

<head>
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

以上代码指定了链接到 Favicon 图片的 URL 并且指定了该文件的 MIME 类型。

更多关于 Favicon 的属性

除了 rel 和 href 属性之外，Favicon 还具有其他属性，如下所示：

  • type：MIME 类型。可选。默认为 image/x-icon；
  • sizes：指定 Favicon 图片的大小。如果可以提供不同尺寸的 Favicon 图片，可以使用这个属性。格式为“WidthxHeight”；
  • 16x16、32x32、48x48：分别指定 Favicon 在各自尺寸下的图片链接，可替代 href 属性。如果要使用这些属性，href 属性将不会被使用。

下面是一个完整的 Favicon 标记的例子：

<head>
  <link rel="icon" href="favicon.ico" sizes="16x16" type="image/x-icon">
  <link rel="icon" href="favicon-32x32.png" sizes="32x32">
  <link rel="icon" href="favicon-48x48.png" sizes="48x48">
</head>
总结

Favicon 标记是一个非常有用的网站标识工具，可以方便地展示品牌标识，并更好地与用户交互。通过添加简单的代码，网站可以在浏览器标签上展示一个有吸引力的图标。