📅 最后修改于: 2023-12-03 15:30:44.920000 🧑 作者: Mango
在 HTML 中，我们可以通过设置 favicon 和桌面快捷方式图标来增强网站的用户体验。favicon 是网站网页标签和书签上显示的小图标，而桌面快捷方式图标是用户将网站添加到桌面时显示的图标。
设置 favicon 可以修改网站的标签栏图标和书签的默认图标。在 HTML 中，我们使用 <link> 标签将 favicon 链接到网页上。例如：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
其中，rel 属性设置为 shortcut icon 表示这是一个网站的 favicon。href 属性指定了 favicon 的 URL，通常是 .ico 格式的图片文件。type 属性指定了图片的 MIME 类型。
此外，我们可以在 <head> 标签的内部添加以下代码，使得网页在被收藏时自动选择当前页面中第一张图片作为 favicon：
<link rel="icon" type="image/png" href="/path/to/image.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/image.png" sizes="32x32">
<link rel="icon" type="image/png" href="/path/to/image.png" sizes="64x64">
其中，sizes 属性指定了不同尺寸的图标，以适配不同的设备。
除了 favicon，我们还可以利用 HTML5 中的 App Manifest 功能，为网站设置桌面快捷方式图标。桌面快捷方式图标是用户将网站添加到桌面时显示的图标。在 HTML 中，我们可以通过以下代码为网站设置桌面快捷方式图标：
<link rel="manifest" href="/path/to/manifest.json">
其中，href 属性指定了 App Manifest 文件的 URL。下面是一个示例的 Manifest 文件：
{
"name": "MyApp",
"short_name": "MyApp",
"icons": [
{
"src": "/path/to/icon.png",
"sizes": "144x144",
"type": "image/png"
}
],
"start_url": "/path/to/index.html",
"display": "standalone",
"theme_color": "#2196F3"
}
其中，name 和 short_name 属性指定了应用的名称。icons 属性指定了不同尺寸的图标，以适配不同设备。start_url 属性指定了应用的起始页面。display 属性指定了应用的展示方式，standalone 表示应用在桌面上独立展示。theme_color 属性指定了应用的主题颜色。
以上就是 HTML 中设置 favicon 和桌面快捷方式图标的方法。通过设置 favicon 和桌面快捷方式图标，我们可以增强网站的用户体验。