favicon 看似一张小图标，但 2026 年的现代站点至少要面对 6 种屏幕场景（浏览器标签栏 / Windows 任务栏 / iOS 主屏 / Android 主屏 / Android PWA 启动画面 / Play Store 列表大图），4 类规范（W3C Web App Manifest / Apple Human Interface Guidelines / Google Material Adaptive Icons / Microsoft Application Tiles），以及一个让人抓狂的浏览器缓存机制——很多团队上线半年才发现自己的 PWA 在 Android 上是个白色方块。这篇把每个场景要的文件、HTML 写法、暗色适配、缓存陷阱一次性讲清。
2026 年现代站点的 favicon 全套清单
按”最简 / 推荐 / 全套”三档：
| 档次 | 文件 | HTML 行数 | 用例 |
|---|---|---|---|
| 最简 | /favicon.ico | 0–1 行 | 内部系统、个人 demo、原型站 |
| 推荐 | + favicon.svg + apple-touch-icon.png | 3 行 | 大多数对外公开的官网 / 博客 |
| 全套 | + icon-192.png + icon-512.png + maskable-512.png + site.webmanifest | 5–6 行 | PWA、要上架 Play Store、需要 iOS / Android 桌面图标 |
直接把
favicon-generator工具的 ZIP 解压到根目录就是”全套”，不想要哪个直接删文件 + 删对应 link 即可。
各家规范的差异速查
| 厂商 / 规范 | 关键文件 | 关键尺寸 | 必有字段 |
|---|---|---|---|
| 浏览器通用（W3C / WHATWG） | favicon.ico / favicon.svg | 16 / 32 / 48 / 任意矢量 | <link rel="icon"> |
| Apple iOS | apple-touch-icon.png | 180×180 | <link rel="apple-touch-icon"> |
| Google Android Chrome | site.webmanifest 内 icons[] | 192 + 512，含 purpose: "any" 和 purpose: "maskable" | <link rel="manifest"> |
| Google Play Store（PWA 上架） | maskable-512.png | 512×512，主体在中央 60% 圆形内 | manifest 含 purpose: "maskable" |
| Microsoft Edge / Windows Tile | browserconfig.xml（已过时） | — | 现代 Edge 跟 Chrome 同步，不需要再做 |
2026 年可以不做的：Safari pinned tab mask-icon（Safari 17 弃用）、apple-touch-icon-precomposed（iOS 7 后无效）、Microsoft Tile XML（IE / 老 Edge 时代产物）。这些过去文章里常被列入”全套”，2026 年砍掉对 SEO 和兼容性都没影响。
SVG favicon + 暗色模式：5 行搞定
写 SVG 时给主体加 class，嵌一段媒体查询：
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
.fg { fill: #111 }
@media (prefers-color-scheme: dark) { .fg { fill: #fff } }
</style>
<path class="fg" d="M..."/>
</svg>浏览器看 OS 主题自动切换 fill。注意：
- 只支持 Chrome 80+ / Firefox 105+ / Safari 16.4+（2023 年起）；老浏览器看到的是
fill: #111默认色，再不行就回落到<link rel="icon" href="/favicon.ico"> - SVG 里不要用
@import加外部 CSS、不要引外部字体——浏览器加载 favicon 不会处理外部资源 - Favicon 生成器透传原始 SVG，你写好的样式上线后保留
HTML <head> 的正确顺序
<link rel="icon" type="image/svg+xml" href="/favicon.svg?v=2026-05-26">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png?v=2026-05-26">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png?v=2026-05-26">
<link rel="icon" sizes="any" href="/favicon.ico?v=2026-05-26">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2026-05-26">
<link rel="manifest" href="/site.webmanifest?v=2026-05-26">几个非典型坑：
rel="shortcut icon"是 IE 时代写法，已废弃但不报错——2026 年新站直接写rel="icon"，不用再加 shortcut<link rel="icon" sizes="any">是给 ICO 这种容器格式用的，表示”内部有多种尺寸、浏览器自己挑”；写具体 sizes 没坏处但any更标准- SVG 必须放第一行——浏览器按 link 出现顺序优先级选，第一个能解析的就用，把 SVG 放后面会被前面的 PNG 优先取
apple-touch-icon不写也行——iOS Safari 会自动请求/apple-touch-icon.png，但写了更可控（特别是 CDN 部署时路径不在根目录）
“改了 favicon 浏览器不更新”完整诊断流程
1. 隐身窗口能看到新图吗？
├── 能 → 是你自己浏览器的本地缓存
│ → 清浏览器缓存 / 给所有 link 加 ?v=xxx 防下次又卡
└── 不能 ──┐
│
2. 直接 curl https://yoursite.com/favicon.ico 看响应
├── 拿到旧字节 → CDN / 反代缓存
│ → 后台手动 purge /favicon.ico 和 /favicon.svg
└── 拿到新字节 ──┐
│
3. 是不是文件名 / 路径错了？
├── 检查 <link href> 拼写、检查文件确实在根目录
└── 检查 .ico / .svg / .webmanifest 的 MIME type
(Nginx default_type 默认 octet-stream，favicon 必须显式配)最容易忽略的是第 3 步的 MIME type：
location ~* \.(ico)$ { add_header Content-Type "image/x-icon"; }
location ~* \.(svg)$ { add_header Content-Type "image/svg+xml"; }
location ~* \.(webmanifest)$ { add_header Content-Type "application/manifest+json"; }manifest 配错 MIME 是 PWA 上架失败最高频原因，前端看着一切正常但 Lighthouse 直接红牌。
上线前 30 秒 checklist
- favicon.ico / favicon.svg / apple-touch-icon.png / icon-192.png / icon-512.png / maskable-512.png / site.webmanifest 全在根目录
- 所有
<link href>加?v=日期防缓存 - manifest 的
name/short_name/theme_color/background_color改成自己的，不是默认占位 - SVG favicon 里写了
prefers-color-scheme: dark暗色适配（如果站点支持暗色） - CDN 配好
.ico/.svg/.webmanifest的 MIME type - Lighthouse PWA 审核全绿（特别看 “Provides a valid apple-touch-icon” 和 “Manifest has a maskable icon”）
- 隐身窗口 + 手机 Safari + 手机 Chrome 三种环境各验证一次
Favicon 是网站给所有客户端（浏览器 / iOS / Android / Windows / 各家 IM 抓预览）的”封面图”——做对了一劳永逸，做错了一年后才发现各种隐性问题。一份 ZIP + 几行 link，半小时搞定 SEO 和品牌一致性。