favicon.ico 文件放哪才有效
浏览器只在 HTML 文档根路径下默认找 favicon.ico，不是“随便放个地方再用 link 引就行”。如果没配对路径，哪怕 HTML 里写了 <link rel="icon" href="/assets/favicon.ico">，旧版 Chrome、Safari 仍会先发一次 GET /favicon.ico 请求——404 不影响显示，但浪费请求、可能暴露目录结构。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 最省心：把
favicon.ico直接扔到网站根目录（比如 Nginx 的root /var/www/html;对应的路径），不用写任何<link> - 想自定义路径：必须显式声明
<link rel="icon" href="/static/favicon.ico">，且确保该 URL 能被直接访问（打开浏览器地址栏输进去能下载） - 别用相对路径如
./favicon.ico或favicon.ico——页面路由一变就 404
支持哪些格式？要不要多尺寸？
现代浏览器早就不只认 .ico 了。.png、.svg 都行，但兼容性差异大：Firefox 不支持 rel="icon" 的 .svg（仅支持 rel="mask-icon" 用于 Safari PWA），而 .ico 是唯一全兼容格式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 基础需求（PC 网页）：一个
favicon.ico，含 16×16、32×32、48×48 三尺寸（用在线工具如 favicon.io 一键生成） - 要高清屏/移动端：加一行
<link rel="icon" type="image/png" sizes="192x192" href="/static/icon-192.png"> - 别只放
192x192.png就以为万事大吉——Windows 任务栏、旧版 Edge 还是只读favicon.ico
HTML 里 <link> 标签怎么写才不踩坑
常见错误是复制粘贴别人代码，结果 rel 值写错、漏 type、或多个 rel="icon" 并存导致行为不可控。浏览器会按顺序选第一个合法的，但不同内核解析策略不同。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
<link rel="icon" href="/favicon.ico">（无type、无sizes）——最稳 - 若同时提供 PNG 和 ICO，把 ICO 放前面：
<link rel="icon" href="/favicon.ico"> <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> - 别写
rel="shortcut icon"——这是 IE 时代遗留，现代标准只需rel="icon"，多写反而可能干扰解析 - 检查是否被缓存：改完图标后清空浏览器缓存，或临时加版本号
href="/favicon.ico?v=2"
为什么换了文件，浏览器还是显示旧图标？
这不是代码问题，是缓存链太长：浏览器强缓存 favicon.ico（常设 max-age=31536000）、CDN 缓存、甚至 DNS 缓存都可能生效。本地开发时还容易被 Service Worker 拦截。
排查步骤：
- 直接访问图标 URL（比如 https://yoursite.com/favicon.ico），看返回内容是不是新文件
- 开无痕窗口测试——绕过本地缓存
- 检查 Network 面板，过滤
favicon，看响应头有没有Cache-Control: immutable或超长max-age - 如果是 Vercel/Netlify 等平台，确认构建产物里
favicon.ico确实被替换了（有时 git 忽略或打包脚本漏了）
换图标真正麻烦的从来不是改代码，而是让所有缓存节点同步失效。有时候等几小时比改十行 HTML 还管用。
