📌  相关文章
📜  如何在HTML中添加Favicon(1)

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

在 HTML 中添加 Favicon

Favicon 是网站图标，一般显示在浏览器标签页和书签栏。在 HTML 中添加 Favicon 对于网站品牌的形象和用户体验都有很重要的作用。本文将介绍如何在 HTML 中添加 Favicon。

1. 准备 Favicon 图片

首先需要准备一张 ico 格式的图片作为 Favicon。可以使用在线工具将普通图片转换成 ico 格式，比如 Favicon Generator。

2. 将 Favicon 图片放置在网站根目录下

将准备好的 Favicon 图片放置在网站根目录下，一般命名为 favicon.ico。

3. 在 head 标签中添加 link 标签

在网站的 head 标签中添加 link 标签，指定 rel 属性为 "icon"，href 属性为 Favicon 图片的地址。代码示例：

<head>
  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
</head>
  • href 属性：指定 Favicon 图片的地址，可以使用相对路径或绝对路径。
  • type 属性：指定 Favicon 图片的 MIME 类型，一般为 image/x-icon。
4. 在 iOS 设备上添加 Apple Touch Icon

如果网站需要在 iOS 设备上添加保存到主屏幕的直接访问图标，可以在 head 标签中添加另外一个 link 标签，指定 rel 属性为 "apple-touch-icon"，href 属性为 Apple Touch Icon 图片的地址。代码示例：

<head>
  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
  • href 属性：指定 Apple Touch Icon 图片的地址，可以使用相对路径或绝对路径。
5. 测试 Favicon 和 Apple Touch Icon 是否生效

在浏览器中打开网站，可以看到网站的 Favicon 和 Apple Touch Icon 是否已经生效。

至此，在 HTML 中添加 Favicon 和 Apple Touch Icon 的操作已经完成。

参考资料：