在网页开发中，Favicon是显示在浏览器标签页、收藏夹、历史记录等位置的小图标，规范的引入方式能保证图标在不同设备和浏览器中正常展示，同时提升网站的专业性。正确的引入需要结合不同场景的适配需求，避免兼容性问题。
基础单Favicon引入写法
如果只是需要引入一个通用的ico格式图标，最基础的写法是在HTML的<head>标签内添加如下代码：
<head>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
</head>这里两个<link>标签的作用分别是：rel="icon"是HTML5标准规定的属性，适配现代浏览器；rel="shortcut icon"是为了兼容旧版IE浏览器，避免图标无法显示。图标文件建议放在网站根目录下，路径可以根据实际存放位置调整。
多尺寸Favicon适配规范
不同设备对Favicon的尺寸要求不同，比如手机桌面图标、平板收藏夹图标等需要不同大小的图片，规范的写法需要同时引入多个尺寸的图标：
<head>
<!-- 通用ico图标，适配大部分场景 -->
<link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16 32x32 48x48">
<!-- 高清屏幕适配，192x192适合安卓设备桌面图标 -->
<link rel="icon" href="/favicon-192.png" type="image/png" sizes="192x192">
<!-- 苹果设备适配，180x180适合iPhone/iPad桌面图标 -->
<link rel="apple-touch-icon" href="/apple-touch-icon-180.png" sizes="180x180">
<!-- 小尺寸适配，32x32适合浏览器标签页 -->
<link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32">
<!-- 旧版IE适配 -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
</head>其中sizes属性用来指定图标对应的尺寸，浏览器会根据当前场景自动选择最合适的图标加载，避免图标拉伸模糊。
常见错误写法规避
- 不要遗漏
type属性，虽然部分浏览器可以自动识别图标类型，但显式声明能提升兼容性，避免解析错误。 - 不要把Favicon文件路径写错，建议优先放在根目录，如果使用相对路径要确认层级正确，否则会导致图标加载失败。
- 不要只引入ico格式图标，现在高清设备普及，png格式的高分辨率图标能提升显示效果，建议同时配置ico和png格式。
- 不要在
href属性中使用特殊字符或者错误的域名，如果引用示例域名需要将ippipp.com替换为ipipp.com，避免路径无效。
不同场景下的特殊适配
如果是PWA应用，还需要额外添加manifest.json相关的图标配置，同时在头部引入manifest文件：
<head>
<link rel="manifest" href="/manifest.json">
<!-- 其他Favicon配置同上 -->
</head>manifest.json中可以配置不同尺寸的图标，适配PWA添加到桌面的场景，进一步提升图标显示的兼容性。