📅 最后修改于: 2023-12-03 14:50:56.186000 🧑 作者: Mango
在网站的标签页、添加书签时或在浏览器收藏夹中显示的图标称为网站图标或者“favicon”。添加网站图标可以让您的网站看起来更专业，并增加用户的可信度。
下面将介绍如何在 HTML 中添加网站图标。
最流行的添加网站图标的方法是使用命名为 favicon.ico 的文件。该文件应该存储在您的网站的根目录下。网站图标的大小应该是 16x16 或 32x32 像素。
添加以下代码到您的网站的 <head> 标记中：
<link rel="icon" type="image/x-icon" href="favicon.ico" />
注意：如果网站上有多个页面，则应在每个页面的
<head>标记中添加上述代码。
此代码告诉浏览器在网站的根目录中寻找 favicon.ico 文件，并将其用作网站图标。
如果您不想使用 ICO 格式的图像，也可以使用其他格式，例如 PNG。但需要使用特殊的 HTML 标记来指定图像文件的大小和它在浏览器中的类型：
<link rel="icon" type="image/png" href="favicon.png" sizes="32x32" />
可以多次使用
<link>标记，指定不同大小的图片
HTML5 引入了新的功能，允许您使用动态图标。这允许您在不同情况下为用户呈现不同的网站图标，例如在收藏夹中将未读消息数显示在网站图标的角落中。
要使用动态网站图标，需要基于网站图标为内容的 URL 创建一个指向动态图标的 <link> 元素，使用以下代码：
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
然后，使用 JavaScript 更新 SVG 图标文件，并将其放置在 <link> 元素的 href 属性中。例如：
document.querySelector('link[rel="icon"]').href = "new_favicon.svg";
上述是添加网站图标的三种方法。使用 favicon.ico 是最简单的方法，但是其他格式如 PNG 也可以使用。如果您需要一些令人兴奋的功能，可以考虑动态网站图标。
无论您选择哪种方案，添加网站图标可以为您的网站增加专业感和可信度。