2026年单用favicon.ico已无法覆盖多平台图标需求，因iOS、Android PWA等平台不读rel="icon"；需按规范声明多种格式、精确sizes/type、清缓存验证，并单独配置apple-touch-icon和manifest。
只放一个 favicon.ico，2026 年已无法覆盖 iOS 主屏、Android PWA 启动页、Safari 固定标签页等场景——不是浏览器不支持，是它们压根不读这一行。
为什么 rel="icon" 声明了却没生效
浏览器对 favicon 加载极其静默：不报错、不提示、失败就跳过。常见卡点有三个：
- 直接访问你写的
href路径（比如/favicon-192x192.png），返回 404 或重定向 —— 检查 Nginx/Apache 是否拦截了 .png 请求 - Network 面板看到请求返回 200，但响应头
Content-Type是text/plain或空 ——.ico必须是image/x-icon，.png必须是image/png - 改了 HTML 里的
href，图标还是旧的 —— favicon 缓存极强（max-age=31536000），Ctrl+Shift+R无效，得清“网站数据”或用隐身窗口验证
sizes 和 type 必须精确匹配文件真实属性
sizes 不是 CSS 宽高，是告诉浏览器“这个文件物理像素尺寸是多少”。写错、不写、或和文件实际尺寸不符，Chrome 90+、Firefox 84+ 会直接忽略该条目。
-
sizes值必须是严格字符串："16x16"、"32x32"、"192x192"—— 不能写成"16×16"（中文×）、"16px"、"192*192" -
type必须和格式一一对应：favicon.ico→type="image/x-icon"；logo.png→type="image/png"；logo.svg→type="image/svg+xml"且sizes="any" - 多个
<link rel="icon">并存时，浏览器只取第一个能成功加载的，后面的即使尺寸更优也无效 —— 把最兼容的（如 ICO）放最前
iOS 和 Android PWA 图标必须单独声明
Safari（iOS/macOS）完全不读 rel="icon"；Android Chrome 安装 PWA 后的启动图标也不认它 —— 这不是 bug，是平台设计如此。
立即学习“前端免费学习笔记（深入）”；
-
rel="apple-touch-icon"必须存在，且要求：href指向纯色背景、无透明边距的 PNG，尺寸至少180x180，sizes="180x180"显式声明 -
rel="manifest"是 PWA 图标链起点，site.webmanifest里定义的icons数组才是 Android Chrome 实际读取的图标源 —— 但 HTML 里不加这行，manifest就不会被加载 - Safari 不支持通过
rel="icon"加载 SVG；Firefox 当前仍不支持 SVG favicon；Android WebView 对 SVG 支持不稳定 —— PNG fallback 必须有
推荐的 <link> 声明顺序与内容
按浏览器匹配优先级从上到下排列，确保每个平台都能拿到可用图标：
<link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png"> <link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png"> <link rel="manifest" href="/site.webmanifest">
注意：favicon.svg 要放在 favicon.ico 之后、PNG 之前 —— Chrome/Firefox 支持 SVG，但若没置顶，会被后续 PNG 声明覆盖；而 Safari macOS/iOS 不支持通过 rel="icon" 加载 SVG，所以它在这里只是给其他浏览器用的加分项，不是主力。
