浏览器会自动请求根目录/favicon.ico，无论html是否声明；不放置该文件或路径错误将导致404，因此必须将favicon.ico放于根目录并用声明。
直接把 favicon.ico 放网站根目录 + 一行 <link rel="icon" href="/favicon.ico" type="image/x-icon"> 就能解决 90% 的场景；不这么做，大概率会看到控制台反复报 GET /favicon.ico 404。
为什么浏览器总去请求 /favicon.ico
Chrome、Edge、Firefox 等现代浏览器在加载任何页面时，**不管 HTML 里有没有写 <link>，都会自动发起一次对 /favicon.ico 的 GET 请求**。这不是可选行为，是硬编码逻辑。
常见错误现象：
- 没放文件，控制台刷屏式出现
GET https://yoursite.com/favicon.ico 404 - 放了但路径不对（比如放在
/assets/favicon.ico），子页面如/blog/仍会请求根路径，照样 404 - 本地用
file://打开 HTML —— 浏览器直接禁用该请求，图标必然不显示（必须起 HTTP 服务）
<link rel="icon"> 标签怎么写才不踩坑
手动声明比依赖自动请求更可控，尤其要支持高清屏或 PWA。但写法错一个参数，图标就静默失效——浏览器不会报错，只留空白。
-
href必须是绝对路径（以/开头），例如/favicon.ico或/static/favicon-32x32.png；相对路径如favicon.ico在子目录页会拼成/blog/favicon.ico，404 -
type和文件格式必须严格对应：type="image/x-icon"→ 只认.ico；type="image/png"→ 只认.png；混用（比如 PNG 文件配image/x-icon）会导致解析失败 -
sizes属性只对type="image/png"（或svg+xml）有效，对.ico文件写了也白写 - 不要写
rel="shortcut icon"，Chrome v91+ 已废弃，且现代标准只要rel="icon"
ICO 还是 PNG？要不要多尺寸？
基础兼容性看 .ico，高保真和扩展能力看 .png（或 .svg）。二者不是二选一，而是分层叠加。
- 必做：放一个
favicon.ico到根目录，并在中声明——这是旧浏览器、书签栏、部分爬虫唯一认的格式 - 推荐加：两个
png变体，sizes="16x16"和sizes="32x32"，适配不同 DPI；Safari iOS、Android PWA 安装界面会优先读这些 - 慎用
.svg作 favicon：Chrome 支持，但 Safari 不支持，且需服务器返回正确的Content-Type: image/svg+xml，否则直接拒收 - 别用 JPG、WebP、GIF——浏览器不识别它们作为 favicon 的 MIME 类型
改了图标却没变？缓存和验证要点
favicon 是浏览器缓存最顽固的资源之一，改完不生效，八成是缓存问题，而不是代码写错了。
- 强制刷新无效，得清空浏览器 favicon 缓存：Chrome 地址栏输入
chrome://settings/clearBrowserData→ 勾选“缓存的图片和文件” → 清除；或直接用无痕窗口测试 - 检查 Network 面板：过滤
favicon，确认请求返回的是200，且响应头Content-Type正确（image/x-icon或image/png） - 用
curl -I https://yoursite.com/favicon.ico直接测服务器响应，避免被前端干扰 - iOS 添加到主屏幕、Windows 任务栏缩略图等场景，**完全不读取
<link rel="icon">**，必须单独提供apple-touch-icon.png和manifest.json中的icons字段
最容易被忽略的是：图标加载失败时，浏览器既不报错也不提示，你只能靠 Network 面板或 curl 主动验证。每次上线前，别只盯着标签页，还得打开收藏夹、微信对话窗、iOS 添加主屏幕流程，三处都得对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
