1. 简介
网站的页面图标是指在浏览器标签页或书签等位置显示的小图标，通常也称为网站logo。它能够提升网站的品牌形象，使用户能够更快速地辨认出自己需要的网站。在HTML中设置页面图标也非常简单。
2. 页面图标的种类
在设置页面图标之前，了解一下页面图标的种类也是很有必要的。
2.1 Favicon.ico
这是最经典的一种页面图标。大多数网站都使用这种文件格式，它的大小为16×16像素。
2.2 png格式
这种格式通常用于高清的视网膜屏幕，也非常适合用于平板电脑和手机等移动设备。png格式的图标最好使用透明背景。png格式的大小可以根据需要调整，但不要超过100KB。
2.3 svg格式
这种格式也适合用于高清的视网膜屏幕，但是与png格式不同的是，svg格式的图标可以无限缩放而不失真。但是，浏览器的兼容性方面可能存在问题。
3. 设置网站页面图标
3.1 使用Favicon.ico
要在网站上使用Favicon.ico文件格式的页面图标，只需要在网站的根目录下添加favicon.ico文件，并且在HTML文件的<head>标签内添加如下代码即可：
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
在代码中首先定义了一个名为“shortcut icon”的关系，它告诉浏览器使用该图像作为网站的主页图标。第二个链接元素定义了一个自定义的favicon.ico文件。这两个链接元素都要放在<head>标签之间。其中，href属性按需修改为自定义的favicon.ico文件路径。
如果希望在不同设备上使用不同的图片作为网站图标，可以使用html标签中的“sizes”属性设置不同尺寸的图片:
<link rel="icon" href="/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-48.png" sizes="48x48" type="image/png">
3.2 使用png格式
如果希望在不同设备上使用不同尺寸的png格式的图片作为网站图标，可以设置多个link元素。下面的代码定义了三个图像大小：
<link rel="icon" href="/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon-64.png" sizes="64x64" type="image/png">
3.3 使用svg格式
如果网站需要使用SVG格式的图标，则可以使用如下代码：
<link rel="icon" href="/favicon.svg" type="image/svg+xml">4. 总结
设置网站的页面图标虽然比较简单，但是很多网站却没有设置。设置页面图标可以使您的网站在浏览器标签页和书签等位置更加醒目，同时也提升了网站的专业性。无论您是使用Favicon.ico、PNG格式还是SVG格式，都可以根据需求选择最合适的方式。