favicon.ico 必须放在网站根目录，浏览器默认自动请求该路径；若需多格式支持，应通过 手动声明，并确保服务器正确返回 content-type 响应头。
favicon.ico 放哪？路径必须写对
浏览器默认只在网站根目录找 favicon.ico，不加任何配置也会自动请求这个路径。所以最省事的方式就是把图标文件直接丢到你网站的根目录下（比如 Nginx 的 /usr/share/nginx/html/，或 Python Flask 的 static/ 目录如果没配 root route）。别放子目录，也别指望它自己去 /assets/icons/ 里翻。
常见错误现象：
— 刷新页面后地址栏还是默认地球图标
— 控制台出现 GET /favicon.ico 404 错误
— 图标在 Chrome 显示，但在 Safari 或 Edge 不显示（因为它们更严格地遵循规范）
- 确保文件名是
favicon.ico，大小为 16×16 或 32×32 像素，格式是 ICO（不是 PNG 或 SVG 直接改后缀） - 如果用的是非根路径部署（比如
https://example.com/myapp/），就得手动声明，不能依赖自动查找 - 本地开发时用 file:// 协议打不开图标——这是浏览器限制，必须走 HTTP/HTTPS
标签怎么写才兼容
手动声明比靠自动查找靠谱得多，尤其要支持多尺寸、多格式（比如高清屏、PWA）。但写法有坑：老浏览器只认 rel="shortcut icon"，新标准推荐 rel="icon"，而 Chrome 从 v91 起已废弃 shortcut 关键字。
使用场景：需要支持 iOS 添加到主屏幕、Android PWA、Windows 任务栏缩略图等
立即学习“前端免费学习笔记（深入）”；
- 基础写法（兼容性最好）：
<link rel="icon" type="image/x-icon" href="/favicon.ico">
- 高清 + 多格式补充（推荐加）：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><br><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><br><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-
sizes属性对.ico文件无效，只对 PNG/SVG 等格式起作用；写了也没错，但别指望它让 ICO 变清晰 - 不要在
里写多个rel="icon"指向不同格式又不带sizes，部分浏览器会选错
为什么用了 PNG 还是不显示？检查 MIME 类型和服务器配置
浏览器看到 href="/favicon.png"，会发请求，但如果服务器返回的响应头里 Content-Type 是 text/plain 或空着，Chrome 和 Firefox 就直接拒收——哪怕文件本身完全正确。
常见错误现象：
— 图片能直接在浏览器地址栏打开，但作为 favicon 就是不显示
— DevTools 的 Network 面板里该请求状态码是 200，但 Type 列显示为 document 或 other，而不是 image
- Nginx 需确认是否加载了
mime.types，并包含image/png映射；没有的话加一行：types {<br> image/png png;<br>} - Apache 要检查
.htaccess或主配置是否有AddType image/png .png - Python Flask 默认不识别
.ico，得手动设置：app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0<br># 并确保静态文件路由能处理 .ico 扩展名
- GitHub Pages、Vercel 等托管平台一般自动处理，但上传的 PNG 如果被压缩成 WebP（比如通过某些构建插件），就失效了
SVG 作 favicon？小心兼容性和渲染差异
Chrome 从 v120+ 开始支持 rel="icon" type="image/svg+xml"，但 Safari 完全不支持，Firefox 支持有限（仅桌面最新版，且不支持动画或外部引用）。别把它当主力方案。
使用场景：图标结构简单、想用单色 SVG 缩放不失真、且只面向现代 Chromium 内核用户
- 必须是纯内联 SVG（不能含
<use></use>、<image></image>或外部 CSS），建议用<svg viewbox="0 0 16 16"></svg>控制比例 - 不能有 JS、CSS 动画、交互事件——浏览器加载 favicon 时不会执行脚本
- 别为了“时髦”强行上 SVG：一个 1KB 的
favicon.ico比 5KB 的 SVG 更快、更稳、更通用 - 如果真要用，至少保留
favicon.ico作为 fallback：<link rel="icon" href="/favicon.ico"><br><link rel="icon" type="image/svg+xml" href="/icon.svg">
实际部署时最容易被忽略的是服务器返回的 Content-Type 响应头，和图标文件是否真的被放在浏览器请求的那个路径下——这两点不验证，其他都白搭。
