在浏览器打开网页时，标签页左上角或者收藏夹里显示的小图标就是favicon，也就是我们常说的网页图标。很多新手刚学习HTML的时候都会疑惑，HTML网页图标怎么设置？其实只要掌握正确的方法，几步就能完成配置。
一、准备favicon图标文件
首先要准备符合要求的图标文件，常见的是.ico格式，当然也支持.png、.jpg等格式，不过.ico格式的兼容性最好，几乎所有浏览器都支持。图标尺寸建议准备16x16、32x32、48x48像素的，多尺寸合并到一个.ico文件里可以适配不同场景。
二、常规favicon设置方法
最常用的设置方式是通过<link>标签在HTML的<head>区域引入图标文件，代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网页</title>
<!-- 引入favicon图标 -->
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
<p>这是我的网页内容</p>
</body>
</html>这里rel="icon"是指定资源类型为图标，href是图标文件的路径，如果图标放在网站根目录下直接写文件名即可，如果在其他目录需要写对应相对路径或者绝对路径。rel="shortcut icon"是为了兼容一些老版本浏览器，加上可以避免兼容性问题。
三、适配不同设备的图标设置
如果想让网页在手机主屏、平板等不同设备上显示合适的图标，可以添加不同尺寸的图标配置，示例代码如下：
<!-- 适配苹果设备主屏图标 --> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <!-- 适配安卓设备主屏图标 --> <link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.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">
四、常见问题解决
- 图标不显示：检查
href路径是否正确，图标文件是否损坏，也可以清除浏览器缓存后刷新页面再查看。 - 图标模糊：尽量使用多尺寸合并的
.ico文件，或者准备对应尺寸的.png文件分别引入。 - 本地文件设置不生效：如果是本地直接打开HTML文件，部分浏览器会限制本地资源的加载，可以搭建本地服务器后访问测试。