网站 favicon 用 SVG 还是 PNG
承接搜索意图：具体需求
结论先给：两个都放。现代浏览器支持 SVG favicon，但部分平台（某些移动端书签、分享卡片抓取、老邮件客户端）仍只认 PNG，用一份 32×32 的 PNG 兜底最省事。
本文目录
最小可用写法
在 head 里先声明 SVG，再给一份 PNG 兜底；浏览器会按支持情况选择。SVG 版建议把颜色写进文件、避免依赖外部 CSS，并确认 viewBox 是正方形，否则会被裁切。
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">SVG favicon 的三个注意点
① 文件独立加载，currentColor 与页面 CSS 变量都不生效，颜色要写死；② 图形在小尺寸下要极简，别用带细线或多色渐变的完整 Logo；③ 深色模式下标签栏背景会变，纯黑图形可能看不见，可给图形加一层浅色底板或选中间调。
- 16×16 下先预览，细节多的先简化
- 给透明图形留一点内边距，别顶到边
- 深浅标签栏都看一眼
PNG 兜底与缓存
favicon 常被浏览器长期缓存，改版后用户看不到新图标是常见现象。改文件名或加版本号比反复清缓存有效。另外确认服务器对 .svg 返回正确的 Content-Type（image/svg+xml），否则部分浏览器不会把它当图标。
多尺寸与品牌一致性
favicon 会出现在标签页、书签栏、历史记录、桌面快捷方式和分享卡片里，尺寸从 16px 到 180px 不等。不要指望同一份细节丰富的 Logo 在所有尺寸下都成立：16px 只保留最核心的轮廓，32px 可以多一点内部结构，180px 的 apple-touch-icon 才适合放完整版本。做法是准备两到三档简化版，而不是把一张大图等比缩小。另外，图标底色最好与站点主题色一致，但标签栏会随系统主题变深变浅，浅色图标在浅色标签栏上容易消失，给图形加一层细描边或中性底板更稳。
- 16px：只留一个可辨识的轮廓或字母
- 32px：可保留一个内部细节
- 180px：完整图形 + 品牌底色
- 深浅两种标签栏背景都预览一遍
多站点 / 多品牌时的管理
如果同一套系统要服务多个品牌或子站，不要把 favicon 硬编码进模板。把图标路径做成配置项，按域名或站点标识取对应的文件，同时保留一份默认兜底。改动时只替换资源、不改模板，能避免某个子站忘了同步而一直显示旧标。另外记得给资源文件加版本参数或改文件名，否则浏览器会一直拿缓存里的旧图标。
- 图标路径走配置，不写死在模板
- 保留默认兜底图标
- 改文件名或加版本号以刷新缓存
- 改版后逐个域名核对一遍
常见问题
相关素材 · 12 个素材
