/favicon.ico 必须放在网站根目录，否则浏览器无条件请求时会失败并显示空白图标；HTML 中需硬编码 <link> 标签，且多尺寸 PNG 和 Apple 图标应显式声明。
不放根目录不会必然失效，但绝大多数情况下会因路径解析错位或浏览器静默回退机制而实际失效。
浏览器默认行为：/favicon.ico 是硬编码请求路径
Chrome、Firefox、Safari 等主流浏览器在加载页面时，**无条件发起一次 GET /favicon.ico 请求**，不管 HTML 里有没有 <link rel="icon">。这个路径是绝对的、不带前缀的，且无法禁用。
- 如果服务器没在根路径返回 200（比如返回 404），地址栏和书签就永远空白——浏览器不会提示、也不会 fallback 到你写的
<link> - 即使你在
<head>里写了<link rel="icon" href="/assets/favicon.png">，只要根目录缺/favicon.ico，首次访问仍可能显示空白图标（尤其刷新或新标签页） - 某些 CDN 或反向代理（如 Nginx）默认不处理
.ico后缀，需显式配置location ~* \.ico$才能透传
HTML 中 <link rel="icon"> 的 href 路径怎么写才可靠
关键不是“能不能写相对路径”，而是“构建后该路径是否真实存在且可被浏览器直接请求”。开发时 ./favicon.png 能加载，上线后 404 是最常见问题。
- 静态站点：把图标放
dist/favicon.ico和dist/favicon-32x32.png，href写成/favicon.ico或/favicon-32x32.png（开头带/表示从根开始） - Vue CLI / Uniapp H5：图标必须放
static/目录，构建后它会被扁平复制到dist/根下；href应写/favicon.ico，而非./static/favicon.ico（后者在生产环境会 404） - Django / Flask：用模板语法，如
{% static 'images/favicon.ico' %}，确保最终生成的 HTML 中href是服务端解析后的完整路径（如/static/images/favicon.ico） - 避免写
type="image/x-icon"：现代浏览器自动识别，写错 MIME（比如 PNG 写成x-icon）反而导致忽略该条声明
多尺寸 + 多格式声明的必要性与写法
只放一个 favicon.ico 已不够用：iOS 添加到主屏幕、PWA 安装、高 DPI 屏幕都需要明确尺寸的 PNG 或 SVG。但浏览器不会自动缩放 .ico，必须显式声明。
- 至少提供
16x16、32x32、192x192、512x512四种尺寸的 PNG 文件 <link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png"><link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">-
<link rel="apple-touch-icon" href="/apple-touch-icon.png">（iOS 必须，不支持sizes属性，靠文件名或precomposed区分） - 不要省略
sizes：iOS 和 PWA 场景下，缺失该属性会导致图标被降级为默认灰色方块
最容易被忽略的是：浏览器对 /favicon.ico 的请求是独立于 HTML 解析的，早于 DOM 加载，也早于任何 JS 执行。这意味着你不能靠 JS 动态注入 <link> 来补救——它必须硬编码在 <head> 里，且对应资源在构建产物中位置固定、路径可预测。
