📅 最后修改于: 2023-12-03 15:09:16.085000 🧑 作者: Mango
HTML网页中，我们可以设置自定义的收藏夹图标。这可以让用户更加方便地识别网站，并且为网站增加更加专业的外观。
在HTML中，我们可以使用如下的代码片段来设置收藏夹图标：
<head>
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>My Website</title>
</head>
在这个代码片段中，我们使用了 link 标签来引入一个图片文件作为图标，我们使用了 rel="shortcut icon" 来告诉浏览器这个 link 标签是用于设置收藏夹图标的。我们同时也可以设置 type 属性来描述图标的类型，这里我们指定了 image/png 类型。最后，我们使用 href 属性来指定图标文件的路径。
如果我们要设置多种类型的收藏夹图标，我们可以添加多个link标签，例如：
<head>
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<title>My Website</title>
</head>
在这个代码片段中，我们设置了四种不同类型的图标：shortcut icon 用于设定收藏夹图标，apple-touch-icon 用于苹果设备的主屏幕图标，icon 用于多种尺寸的图标。
最后，如果我们要为网站的每个页面设置不同的收藏夹图标，我们可以在每个页面的header中添加一个link标签来设置：
<head>
<link rel="shortcut icon" type="image/png" href="page1-favicon.png"/>
<title>Page 1</title>
</head>
上面这个代码片段设置了一个与全局的收藏夹图标不同的图标。每个页面都可以单独设置自己的图标。
总之，通过上述方法，我们可以为网站设置不同的收藏夹图标，并且为用户带来更好的体验。