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