📅 最后修改于: 2023-12-03 15:08:38 🧑 作者: Mango
现代网站通常都有自己的网站图标，也称为 favicon。这个图标通常是浏览器标签页上的小图标，用于标识网站。本文将介绍如何在 HTML 中更改网站图标。
可以通过在 HTML 文件的 head 标签中使用 link 标签来更改网站图标。示例如下：
<head>
<link rel="icon" type="image/png" href="path/to/favicon.png">
</head>
其中，rel 属性值为 icon 表示这是网站图标，type 属性指定了图标的 MIME 类型，href 属性指定了图标的路径。
网站图标可以是任何图片格式，但推荐使用 PNG 格式，因它的透明背景可以更好地适应不同的主题色。
现代浏览器支持不同尺寸的网站图标，可以通过添加多个 link 标签来定义不同尺寸的图标。示例如下：
<head>
<link rel="icon" type="image/png" sizes="16x16" href="path/to/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="path/to/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="path/to/favicon-96x96.png">
</head>
其中 sizes 属性指定了图标的尺寸，多个 link 标签可以定义不同尺寸的图标。如果没有使用 sizes 属性，则默认使用 32x32 的图标。
如果没有自己设计网站图标，也可以使用在线图标生成工具生成网站图标。常用的在线生成工具有 Favicon Generator（https://www.favicon-generator.org/）、Favicon.io（https://favicon.io/） 等。这些工具可以根据输入的图像生成多种尺寸和格式的网站图标，并且支持多种浏览器和平台。
通过 link 标签可以轻松地更改网站图标，也可以使用在线图标生成工具生成网站图标。在设计网站图标时，要注意透明背景和多尺寸适配。