favicon不显示主因是文件路径错误、服务器Content-Type响应头不匹配或浏览器缓存，而非link标签书写问题；必须将favicon.ico置于根目录并确保该URL可直访且返回200及正确类型。
favicon 不显示，90% 的问题不在 标签写没写对，而在文件路径、服务器响应头或浏览器缓存这三处卡住了。
favicon.ico 必须放在网站根目录，且文件名不能改
主流浏览器（Chrome、Firefox、Edge）会无条件发起一次 GET /favicon.ico 请求，不管你的 HTML 里有没有 。这个行为是硬编码的，无法禁用或重定向。
- 路径必须是域名根下，例如
https://example.com/favicon.ico；放/assets/icons/favicon.ico就无效 - 文件名必须是
favicon.ico，不能叫icon.ico或favicon.png—— 否则自动请求直接 404 - 本地开发用
file://协议时，该请求被浏览器拦截，图标必然不加载，必须走http://或https://
现代浏览器按 type + sizes + 当前上下文（DPR、PWA 模式、是否是 iOS）匹配最合适的图标，不是“第一个就用”。
-
.ico文件必须写type="image/x-icon"，且推荐加sizes="any"（Chrome 94+ 强制要求，否则忽略） -
.png必须带type="image/png"和精确的sizes="32x32"—— 写成"32"或"32px"会被跳过 - 多个
rel="icon"可共存，但不要只写两个 PNG 路径却不带sizes，部分 Android 浏览器会随机加载失败
服务器返回的 Content-Type 错了，图标再准也白搭
浏览器收到响应后，会校验 Content-Type 响应头。哪怕你上传的是完美 PNG，如果服务器返回 text/plain 或空值，Chrome/Firefox 直接丢弃，控制台还不报错。
- 检查方式：DevTools → Network → 过滤
favicon→ 点开请求 → 查看 Response Headers 中的Content-Type - Nginx 需显式配置：
location = /favicon.ico { add_header Content-Type image/x-icon; } - Flask/FastAPI 等框架，确保静态路由启用，且
/favicon.ico被映射到真实文件（别让它被主路由 catch-all 拦截）
框架项目里 favicon 很容易被构建逻辑吞掉
Next.js、Vite、Create React App 等不会自动把 public/favicon.ico 注入到所有页面的 ，尤其在 SSR 或多入口场景下。
- Next.js（App Router）：必须在
app/layout.tsx中手动写，public/下的文件只是可访问，不自动挂载 - Vite：开发时热更新不触发 favicon 刷新，改了图标必须清缓存或关掉 dev server 重启
- React（CRA）：首次
build后修改public/favicon.ico，旧文件可能残留，需删掉build/目录重构建
真正生效的关键，从来不是标签怎么写，而是 /favicon.ico 这个 URL 能否在浏览器地址栏直接打开并返回 200 + 正确的 Content-Type。其他所有声明，都是在它已可用的前提下做增强。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
