如何在 HTML 中添加网站图标

在浏览网站时，我们通常会在浏览器标签或地址栏上看到一个小图标。这个小图标被称作网站图标（也叫作 favicon）。

在本文中，我们将介绍如何在 HTML 中添加网站图标。让我们一起来看看吧！

实现方法

添加网站图标可以通过以下两种方式实现：

1. 使用 link 标签

在 HTML 的 head 部分添加以下代码片段：

<link rel="icon" type="image/png" href="path/to/icon.png">

其中，href 属性指向你的网站图标的路径，可以是相对路径或绝对路径。type 属性表示图标的文件类型，通常使用 PNG 格式。

如果你想指定不同尺寸的图标，可以使用如下代码片段：

<link rel="icon" type="image/png" href="path/to/icon-16.png" sizes="16x16">
<link rel="icon" type="image/png" href="path/to/icon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="path/to/icon-48.png" sizes="48x48">

其中，sizes 属性指定了图标的宽度和高度，以像素为单位。

2. 将图标文件命名为 favicon.ico

这是一种传统的方法，也是最简单的方法。将网站图标文件命名为 favicon.ico，并将其放置在网站根目录下。

这样浏览器会自动将其作为网站图标，并在浏览器标签或地址栏中显示。

结论

以上就是在 HTML 中添加网站图标的两种方法。第一种方法可以自定义不同尺寸的网站图标，更加灵活，而第二种方法则非常简单，只需将文件命名为 favicon.ico 即可。

希望这篇文章能够帮助你添加自己的网站图标。