Favicon 最佳实践 2026 — 1张图适配全平台

Favicon 是最小的品牌门面：浏览器标签、书签、手机主屏、搜索结果都可能用到。很多人只放一张 16×16 的 ico，结果在高清屏和手机上全糊。

正确做法是一次生成 5 个文件 + 一段 HTML，10 分钟终身生效。

核心结论

✓必备：favicon.ico（16/32/48）、icon-192、icon-512、apple-touch-icon、site.webmanifest
✓加分：SVG favicon（浅色/深色自适应）、maskable 图标（安卓自适应）
✓坑：CDN 缓存导致换图不生效，文件名加版本号
✓验证：无痕窗口 + 真机主屏各看一次

文件清单

·favicon.ico：兼容老浏览器，多尺寸打包
·icon-192.png / icon-512.png：PWA 与安卓
·apple-touch-icon.png（180×180）：iOS 主屏
·site.webmanifest：名字、主题色、图标声明
·favicon.svg（可选）：矢量，一套适配所有尺寸

HTML 代码（复制即用）

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#6D28D9">

manifest 示例

{
  "name": "WebTagr",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ],
  "theme_color": "#6D28D9"
}

三个常见坑

·换了图没变化：清 CDN 缓存，或改名 favicon-v2.ico
·iOS 黑底：apple-touch-icon 不支持透明，提前铺底色
·SVG 不显示：老浏览器回退到 ico，顺序把 ico 放前面

上线前检查清单

015 个文件是否齐全
02HTML head 是否引入
03无痕 + 真机是否验证
04深色模式下是否可辨认
05manifest theme-color 是否与品牌一致

常见问题

SVG favicon 够用了吗？

现代浏览器够用，但 Safari 老版本和部分场景仍要 ico，建议两者都放。

一定要做 PWA manifest 吗？

想上“添加到主屏”就要。纯展示站可只做图标三件套。

WebTagr 能检查吗？

能。用 Favicon 工具页粘贴网址，一次看到缺了哪些尺寸和标签。