favicon.ico必须放在网站根目录，因为Chrome、Firefox、Edge等浏览器会在HTML解析前无条件发起GET /favicon.ico请求，该行为硬编码于引擎中，与是否声明<link>无关；若返回404或403，图标大概率不显示且控制台通常不报错。
favicon.ico 必须放在网站根目录，否则浏览器根本不会找
Chrome、Firefox、Edge 等浏览器在 HTML 解析前，会无条件发起一次 GET /favicon.ico 请求——这个行为硬编码在引擎里，和你写不写 <link> 完全无关。如果返回 404 或 403，图标大概率不显示，且控制台通常不报错。
实操建议：
- 把
favicon.ico文件直接丢进项目根目录（比如 Nginx 的root目录下、Flask 的static/目录且静态路由已启用） - 文件名必须是
favicon.ico，不能是icon.ico或改后缀的 PNG - 用命令行检查是否含多尺寸：运行
file favicon.ico，输出应含 “ICO cursor icon” 和多个 “size” 字样 - 别放
/assets/icons/或/images/下——即使你在href里写了完整路径，/favicon.ico这次请求仍会 404
多个 <link rel="icon"> 共存时，type 和 sizes 缺一不可
浏览器不是按顺序选第一个，而是根据设备像素比（DPR）、当前场景（地址栏 / PWA 弹窗 / 书签）匹配最合适的那条。漏写 type 或错写 sizes，该条就会被静默跳过。
关键规则：
立即学习“前端免费学习笔记（深入）”；
-
.ico文件必须写type="image/x-icon"，Chrome 94+ 还要求sizes="any" -
.png必须同时写type="image/png"和精确sizes="32x32"（不能是"32"或"32px"） -
.svg只能用于桌面端补充，写type="image/svg+xml"，但 iOS 不支持它作为主屏图标 - 不要只写两个
rel="icon"都指向 PNG 却不带sizes——部分 Android 浏览器会随机加载失败
iOS 添加到主屏幕只认 apple-touch-icon，且尺寸必须严格匹配
iOS Safari 完全忽略 rel="icon" 声明，只读 rel="apple-touch-icon"。漏掉这条，用户长按「添加到主屏幕」时，系统 fallback 到截屏或缩放 favicon.ico，结果通常是严重失真。
注意事项：
- 尺寸至少提供
180x180（iPhone X 及以后默认使用），推荐统一用180x180PNG - 不要加引号包裹
sizes值（如sizes="180x180"在某些旧版 Safari 会解析异常；稳妥起见可省略） - 路径必须是绝对路径或从根开始（
/apple-touch-icon.png），相对路径极易 404 - 图标需无圆角、无阴影、透明背景——iOS 会自动加效果，强行加反而导致二次变形
服务器必须返回正确的 Content-Type，否则图片再对也白搭
哪怕你上传的是完美无缺的 favicon-32x32.png，只要服务器返回 Content-Type: text/plain 或空着，Chrome 和 Firefox 就直接丢弃，连控制台都不提示。
检查与配置方式：
- DevTools → Network → 过滤
favicon→ 点开请求 → 查看 Response Headers 中的Content-Type - Nginx 需在
types块中显式配置：image/x-icon ico;、image/png png;、image/svg+xml svg; - Apache 需确保
mime.types包含映射，或在.htaccess中加：AddType image/x-icon .ico - 本地双击
file://协议时，/favicon.ico请求会被拦截——必须用http://localhost启服务测试
favicon.ico 是否真实存在且可公开访问、所有 <link> 的 href 路径是否为绝对路径、服务器是否对 .ico/.png/.svg 返回了正确 MIME 类型。这三处任一出错，图标就大概率不出现，而错误本身往往没有任何明显提示。 
