HTML5中<link>标签可通过rel="icon"定义多尺寸favicon以适配不同设备：基础用<link rel="icon" href="/favicon.ico">兼容旧浏览器；现代推荐分别声明PNG图标并标注sizes属性；补充apple-touch-icon和manifest.json支持iOS及PWA；注意sizes格式为"NxN"、SVG需谨慎使用、ICO仍需保留兜底。
HTML5 中 <link> 标签支持通过 rel="icon" 定义多个尺寸的 favicon，以适配不同设备和上下文（如桌面浏览器标签页、手机书签、PWA 启动画面等）。关键在于正确使用 href、sizes 和 type 属性，并按需提供多种格式（主要是 .ico、.png、.svg）。
基础写法：单个 ICO 文件兼容旧版浏览器
最简方案是提供一个包含多尺寸图标的 .ico 文件（如 16×16、32×32、48×48），它能被所有主流浏览器识别：
现代推荐：为不同尺寸和场景分别声明 PNG 图标
PNG 更清晰、支持透明度和高分辨率，适合现代环境。应为常见尺寸单独声明，并标注 sizes：
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png"> <!-- Android Chrome 书签 -->
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png"> <!-- PWA 安装图标 -->
补充支持：添加 Apple Touch Icon 和 Web App Manifest
iOS Safari 不读取标准 rel="icon"，需额外声明 rel="apple-touch-icon"；同时建议搭配 manifest.json 统一管理图标：
立即学习“前端免费学习笔记（深入）”；
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="manifest" href="/site.webmanifest">
其中 site.webmanifest 可集中定义各尺寸图标路径、名称、背景色等，用于 PWA 安装和启动画面。
注意事项与最佳实践
-
sizes 属性仅对
rel="icon"和rel="apple-touch-icon"有效，且必须严格写成"NxN"格式（如"192x192"），不能写"192×192"或带单位 -
SVG favicon 已被 Chrome、Firefox、Safari 支持，可添加：
<link rel="icon" type="image/svg+xml" href="/favicon.svg">，但需确保 SVG 无外部引用、尺寸明确、兼容性要求不高时再用 -
避免只依赖
sizes自动匹配：浏览器可能忽略未声明的尺寸，建议显式提供常用尺寸（16×16、32×32、192×192、512×512） - ICO 文件仍建议保留：作为兜底，尤其兼容 IE 和部分旧版工具
