favicon 是网站图标，必须用 <link rel="icon"> 声明在 <head> 中，rel 值仅限 "icon"，href 需准确路径；推荐提供 32×32 和 192×192 PNG 及 favicon.ico，并显式声明 sizes。
favicon 是什么，为什么必须用 <link rel="icon">
favicon 不是 HTML5 新增功能，但现代浏览器默认只识别通过 <link rel="icon"> 声明的图标，直接放 favicon.ico 在根目录已不可靠。Chrome、Edge、Firefox 都会忽略未声明的根目录图标，尤其在 PWA 或添加到桌面时必报错 Failed to load resource: the server responded with a status of 404 (Not Found)。
关键点：
– 必须写在 <head> 内
– rel 属性必须是 "icon"（不是 "shortcut icon"，后者已被弃用）
– href 路径需准确，推荐用绝对路径或以 / 开头的相对路径
支持多尺寸与格式：用 <link> 多次声明最稳妥
不同设备和上下文需要不同尺寸和格式：桌面浏览器常用 favicon.ico（16×16 / 32×32），iOS Safari 要求 apple-touch-icon.png（180×180），Android Chrome 添加到主屏依赖 manifest.json 中的 icons，但静态页可先用 <link> 补齐。
- 优先提供
.png格式（支持透明、无压缩失真），至少含32x32和192x192两版 -
favicon.ico仍建议保留，用于兼容旧 IE 和部分邮件客户端 - 不要依赖单一
type="image/x-icon"—— 现代浏览器自动识别，写反而易出错
<link rel="icon" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" href="/favicon-192x192.png" sizes="192x192"> <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">
路径错误是最常见原因：检查 href 是否真能访问
本地开发时容易误以为 ./favicon.png 或 favicon.png 可用，但部署后常 404。浏览器不会提示“图标没找到”，只会静默失败 —— 表现为地址栏空白、书签无图标、PWA 安装失败。
立即学习“前端免费学习笔记（深入）”；
验证方法：
– 打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 筛选 favicon 关键字
– 直接在地址栏输入完整图标 URL（如 https://yoursite.com/favicon-32x32.png），看是否返回 200
- 静态站点生成器（如 Hugo、Jekyll）中，确保图标文件放在
static/或assets/下，并被正确复制到输出根目录 - GitHub Pages 用户注意：路径必须相对于仓库根（即
https://user.github.io/repo/时，href应为/repo/favicon.png） - 避免使用查询参数（如
favicon.png?v=2），某些 CDN 或缓存策略会截断
不加 sizes 也能工作，但 iOS 和 PWA 场景下会失效
省略 sizes 属性时，浏览器会尝试解析图片实际尺寸，但 iOS Safari 对 <link rel="apple-touch-icon"> 强制要求显式尺寸声明（否则降级为小图甚至忽略）。PWA 的 manifest.json 也要求每个 icon 指定 sizes 字段，提前统一尺寸命名能减少后续迁移成本。
建议命名规范：
– favicon-16x16.png、favicon-32x32.png、favicon-192x192.png
– 对应 sizes 值严格匹配，如 sizes="192x192"，不能写成 "192x192px" 或 "192"
真正容易被忽略的是：图标文件本身必须是纯正方形像素尺寸，用 CSS 缩放或非正方形 PNG 会导致 iOS 显示异常（带白边、拉伸、裁切）。
