写了仍无图标，主因是路径错误、/favicon.ico隐式请求返回404/403、content-type不匹配或浏览器强缓存；必须确保根目录存在文件、响应头正确、使用绝对路径并清缓存。
直接在 index.html 的 里写 <link rel="icon"> 不够，绝大多数“不显示”问题根本不在 HTML 标签本身，而在路径、响应头、缓存三处卡死。
为什么写了 <link rel="icon"> 还是没图标？
浏览器会做两件事：一是按你写的 <link> 加载，二是无条件发起一次 GET /favicon.ico 请求——这个行为硬编码在 Chrome/Firefox/Edge 里，无法关闭。如果服务器对 /favicon.ico 返回 404 或 403，哪怕你的 <link> 指向的是 /assets/icon.svg，图标也大概率不出现，且控制台通常不报错。
- 检查方式：打开 DevTools → Network → 过滤
favicon→ 刷新页面 → 看有没有请求/favicon.ico，状态码是不是200 - 本地双击打开
file://协议时，/favicon.ico请求会被浏览器拦截，必须用http://localhost启服务测试 - Next.js/Vite/React 等框架不会自动把
public/favicon.ico注入所有页面的，得手动加<link>，否则 SSR 或多入口页就失效
href 路径必须是绝对路径，且文件真在根目录
相对路径如 href="images/favicon.ico" 在子页面（比如 /blog/post.html）下会解析成 /blog/images/favicon.ico，404。浏览器只认域名根下的 /favicon.ico 这个 URL，其他路径全是“额外支持”，不能替代根路径。
- 正确写法：
href="/favicon.ico"（开头带/），文件物理位置必须是网站根目录（Nginx 的root目录下、Flask 的static/下且路由已启用） - 别把图标放
/assets/icons/favicon.png然后只写一条<link rel="icon" href="/assets/icons/favicon.png">—— 这样/favicon.ico请求仍 404，部分浏览器会降级失败 - 静态站点生成器（如 Hugo、Jekyll）要注意构建后是否保留了根目录的
favicon.ico，有些模板会忽略它
type 和 sizes 不是可选，而是匹配关键
现代浏览器不是“找到第一个能加载的就用”，而是根据设备像素比（DPR）、当前 UI 场景（地址栏 / 书签 / PWA 安装弹窗）匹配最合适的 <link>。漏掉 type 或写错 sizes，这条就直接被跳过。
-
.ico文件必须写type="image/x-icon"，Chrome 94+ 还要求sizes="any"，否则忽略 -
.png必须同时写type="image/png"和精确sizes="32x32"（不能是"32"或"32px"），否则 Safari 可能不识别 - 多个
<link rel="icon">可共存，但不要只写两个 PNG 路径却不带sizes—— 部分 Android 浏览器会随机加载失败 - iOS 主屏幕图标必须用
<link rel="apple-touch-icon">，sizes="180x180"值必须和 PNG 文件真实分辨率一致，否则 fallback 到低清版本
服务器返回的 Content-Type 错了，图标再准也白搭
浏览器收到响应后，会校验 Content-Type 响应头。哪怕你上传的是完美 favicon-32x32.png，只要服务器返回 text/plain 或空值，Chrome/Firefox 就直接丢弃，控制台还不报错。
- 检查方式：DevTools → Network → 找到 favicon 请求 → 查看 Response Headers → 确认
Content-Type是image/x-icon（.ico）、image/png（.png）或image/svg+xml（.svg） - Nginx 需显式配置：
location = /favicon.ico { add_header Content-Type image/x-icon; }，并确保types块包含image/x-icon ico; - Flask/FastAPI 要确认静态路由启用，且
/favicon.ico没被主路由（如@app.route("/<path>")</path>）拦截 - Cloudflare/Nginx 可能默认屏蔽
.ico扩展名，需检查安全规则或 MIME 类型配置
真正难调的从来不是怎么写那行 <link>，而是确认文件可直访、响应头正确、缓存已清——尤其是 /favicon.ico 这个隐式请求，它不声不响，却决定成败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
