将 favicon.ico 放在根目录最省事，但需确保 ICO 格式、16×16 或 32×32 像素；显式声明 <link rel="icon"> 更可控，支持 PNG/SVG、多尺寸及暗色模式；Chrome 优先请求根目录 favicon.ico，Safari 依赖 <link> 且对尺寸敏感；本地开发需配置正确 MIME 类型（如 image/x-icon），否则静默失败。
favicon.ico 放在网站根目录是最省事的做法
只要把图标文件命名为 favicon.ico，丢到网站最外层目录（比如 /var/www/html/ 或你托管服务的根路径），大多数浏览器会自动请求并显示它。不需要写任何 HTML 代码，但前提是文件名、格式、尺寸都合规——必须是 ICO 格式，推荐尺寸为 16x16 或 32x32 像素。
常见错误：上传了 favicon.png 却没改名；用 Photoshop 导出的 “另存为 ICO” 实际不是标准 ICO 格式；尺寸超过 64x64 可能被某些旧浏览器拒绝。
用 <link rel="icon"> 显式声明更可控
显式声明能支持 PNG/SVG 格式、多尺寸适配、暗色模式切换等现代需求，也避免根目录污染。关键在于 rel 属性值和 type 的匹配：
-
<link rel="icon" href="/images/favicon.svg" type="image/svg+xml">—— SVG 图标，Chrome 95+ / Firefox 107+ 支持，缩放无损 -
<link rel="icon" href="/images/favicon-32x32.png" sizes="32x32" type="image/png">—— 指定尺寸，用于高 DPI 屏幕 -
<link rel="icon" href="/images/favicon-dark.png" media="(prefers-color-scheme: dark)">—— 暗色主题专用图标（需搭配 light 版本）
注意：sizes 属性只对 rel="icon" 且 type="image/png"（或 image/x-icon）生效；SVG 不需要 sizes；media 查询仅在支持该特性的浏览器中起作用。
立即学习“前端免费学习笔记（深入）”；
Chrome 和 Safari 对 favicon 的加载行为差异明显
Chrome 会优先尝试请求根目录的 favicon.ico，即使你写了 <link> 标签，也会发一次额外请求——如果该文件不存在，可能触发 404 日志噪音；Safari（尤其是 iOS）则严格依赖 <link> 声明，且对 PNG 尺寸敏感：只认 180x180（iOS 主屏图标）和 16x16/32x32（标签页），其他尺寸可能被忽略。
实操建议：
- 开发阶段先确保
favicon.ico存在，避免 Chrome 控制台刷 404 - 面向 iOS 用户，必须加一行
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">，尺寸设为180x180 - 不要指望单个 PNG 文件适配所有场景——准备
.ico（兼容）、.png（高清）、.svg（现代）三份更稳妥
本地开发时 favicon 不显示？检查服务器响应头
很多静态服务器（如 Python 的 python -m http.server、Vite 默认 dev server）默认不设置 Content-Type，导致浏览器把 .ico 当作 text/plain 拒绝解析；或者返回 Cache-Control: no-store 导致图标反复重载失败。
验证方式：打开 DevTools → Network → 刷新页面 → 找到 favicon.ico 请求 → 看 Response Headers 中的 Content-Type 是否为 image/x-icon（ICO）或 image/png（PNG）。
临时解决：
- 用 VS Code Live Server 插件（自带正确 MIME 类型）
- Vite 项目可在
vite.config.js中配置server.headers修正特定后缀类型 - Apache 加
AddType image/x-icon .ico；Nginx 加types { image/x-icon ico; }
没配对的 MIME 类型是本地看不到 favicon 最隐蔽的原因——它不报错，只是静默失败。
