📅 最后修改于: 2023-12-03 15:39:15.904000 🧑 作者: Mango
网站选项卡图标也被称为favicon，可以提高网站的品牌识别度并提供更好的用户体验。在HTML中添加一个网站选项卡图标很容易。
首先，需要制作一张正方形的图标，推荐大小为16x16或32x32像素。保存为.ico格式，将其命名为“favicon.ico”，并将它放到网站根目录下。此时浏览器会自动加载这个文件，并将其显示在选项卡中。
代码片段：
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
为了在不同设备上获得最佳效果，可以为不同大小的设备提供不同的图标。这需要在<head>标签中添加如下代码：
<link rel="icon" href="/path/to/favicon-16.png" sizes="16x16" type="image/png">
<link rel="icon" href="/path/to/favicon-32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/path/to/favicon-48.png" sizes="48x48" type="image/png">
其中，每个图标的尺寸、文件类型和文件路径都需要指定。浏览器将根据自身特性和设备尺寸选择最佳图标。
不同的浏览器使用不同的标签和属性来指定网站选项卡图标。为了实现最大浏览器兼容性，可以按照如下方式添加多个标签：
<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="/path/to/apple-touch-icon-precomposed.png">
其中，rel属性指定图标类型（或命名），href属性指定图标文件路径。这里包括了三种浏览器常用的图标类型，分别是Windows平台浏览器（.ico）、iOS设备（apple-touch-icon）和Android设备（另外一种apple-touch-icon，为防止图标被自动加圆角和阴影）。
无论是简单方式还是多尺寸方式，都可以通过在HTML的head标签中添加对应的代码轻松实现网站选项卡图标的显示。同时，多浏览器兼容性的考虑也是不可忽视的。