favicon.ico 必须放在网站根目录（如 http://localhost:8000/favicon.ico）才能被浏览器自动识别；若放子目录或使用 file:// 协议访问，则需在 <head> 中显式添加 <link rel="icon" href="/favicon.ico"> 并确保路径为绝对路径。
favicon.ico 放哪里才被浏览器自动识别
浏览器默认只在网站根目录下找 favicon.ico，不加任何配置也能生效——前提是它真在根目录。比如你的 index.html 是通过 http://localhost:8000/index.html 访问的，那图标必须放在 http://localhost:8000/favicon.ico 这个路径，否则 404。
常见错误：把图标丢进 assets/ 或 images/ 文件夹，又没写 <link> 标签，结果地址栏始终空白。
- 最省事做法：把
favicon.ico直接扔到和index.html同级的根目录（不是子文件夹） - 如果用构建工具（Vite、Webpack），静态资源通常走
public/目录，这时要把favicon.ico放进public/favicon.ico，它会自动复制到最终输出的根目录 - 本地双击打开
index.html（file:// 协议）时，部分浏览器（如 Chrome）会忽略自动查找，必须显式声明<link>
HTML 里怎么写 <link> 才兼容所有场景
光靠自动查找不够稳，尤其当图标不在根目录、或想用 PNG/WebP 等格式时，必须手动加 <link>。关键点是 rel 属性值和 type 的配合。
推荐写法（放在 <head> 里）：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/favicon.svg" type="image/svg+xml">
-
rel="icon"是标准写法；rel="shortcut icon"是旧 IE 兼容写法，现在没必要加 -
sizes="any"明确告诉浏览器这个 ICO 支持多尺寸缩放，避免某些安卓 WebView 报错 - SVG 图标优先级高于 ICO，且支持响应式缩放；但 Safari 15.4 之前不支持 SVG favicon，所以建议 ICO + SVG 双写
- 路径用绝对路径（以
/开头），避免路由嵌套后路径解析出错
favicon 尺寸和格式选哪个不容易翻车
别一上来就塞 512×512 PNG —— 大多数桌面浏览器只读取 16×16 或 32×32 像素区域，多余像素白费，还拖慢加载。
- 必做：提供
favicon.ico，至少包含 16×16 和 32×32 两个尺寸（ICO 文件可打包多个尺寸） - 加分项：加一个
favicon.svg，矢量清晰、体积小，Chrome/Firefox/Edge 都支持 - 避坑：不要只用 PNG 当 favicon（即使重命名成 .ico），浏览器可能不认；也不要依赖
<link rel="apple-touch-icon">来替代普通 favicon，那是给 iOS 添加到主屏幕用的 - 生成工具推荐：用 RealFaviconGenerator，它会输出全套代码和文件，比手搓靠谱
为什么改了 favicon 页面还是不更新
浏览器缓存 favicon 比缓存 HTML 还顽固，哪怕你清了页面缓存，它可能还在磁盘里躺着。
- 最快验证方式：用无痕窗口打开，或直接访问
https://yoursite.com/favicon.ico看是否返回新图 - 强制刷新：在
<link>的href后加版本参数，比如href="/favicon.ico?v=2"（上线后记得去掉，否则每次都要改） - 服务端注意：确保服务器对
.ico文件返回正确的Content-Type: image/x-icon，Nginx 默认可能配错成application/octet-stream - 开发时用 Vite/HMR，修改
public/favicon.ico后需手动刷新，热更新不监听静态资源变更
