上周给一个客户的站做审计，发现他们 <head> 里塞了六个不同的 favicon 标签，结果在 Safari 上一个都不生效。一问才知道，这些代码是从五个不同的 Stack Overflow 回答里拼凑出来的，时间跨度从 2014 年到 2024 年。如果你正在找靠谱的 favicon link rel icon 示例，千万别再复制粘贴那些碎片化的建议了——你得看看真正的生产环境是怎么组织这些标签的。

这篇文章我会带你过一遍 2026 年浏览器依然能用的 HTML 模式。咱们直接拆解大厂实际在用的代码，分析他们为什么选那些 rel 属性，最后给你一个可以直接抄的模板。

大厂实际在用什么

先看 GitHub。每天服务几百万开发者，他们的 favicon 配置是经过实战检验的。打开他们的源码，你会发现一个很讲究的模式：优先用 SVG 适配现代浏览器，同时用 PNG 兜底老版本。

GitHub 的做法很简单：一个 SVG 给现代浏览器，一个 ICO 给老古董，再加一个 Apple Touch Icon 给 iOS。他们早就不搞十几个不同尺寸的 PNG 了。Stripe 的做法也差不多。两家都把 SVG 当作主力。

GitHub 模式：SVG 优先

GitHub 在 SVG 文件里用 media query 自动适配暗黑模式。也就是说，一个文件就能根据用户系统的主题切换样式，完全不需要 JavaScript。他们的代码长这样：

<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>

注意顺序。SVG 放最前面，因为现代浏览器会优先匹配第一个能渲染的标签。ICO 作为兜底，给 Trident 或早期 Edge 这种老引擎用。ICO 上的 sizes='any' 属性告诉解析器这个文件包含多种分辨率，避免不必要的 DOM 解析。

Stripe 模式：严格分离

Stripe 的路子不太一样。他们用第二个 <link> 标签加 media 属性来单独处理暗黑模式。如果你的 logo 在暗色背景下需要完全不同的图形（不只是换个颜色），这个模式就很有用。

<link rel='icon' href='/favicon-light.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon-dark.svg' type='image/svg+xml' media='(prefers-color-scheme: dark)'>

我个人更喜欢 GitHub 的方式，维护一个文件比两个省事。但如果你的品牌规范要求暗黑模式用不同的轮廓，Stripe 的模式更合适。

手把手搭建 2026 年 Favicon 方案

别纠结到底需要哪些标签了。下面是一个经过排序的、完整的搭建流程，保证覆盖 99% 的设备。

第一步：准备文件

你只需要三个文件。除非你在做 PWA，否则不用生成一大堆老式 PNG。拿你的原始 SVG 和一张 512x512 的高清 PNG，去 Mzu favicondl 这个工具，把 PNG 自动转成多分辨率 ICO 和 Apple Touch Icon。

第二步：写 HTML 标签

把这些标签尽量放在 <head> 靠前的位置，最好紧跟在 charset 声明后面。浏览器会急着解析 favicon，放太晚的话可能会闪一下默认的文档图标。

<link rel='icon' href='/favicon.svg' type='image/svg+xml'>
<link rel='icon' href='/favicon.ico' sizes='any'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png' sizes='180x180'>

这三行代码对普通网站来说完全够用了。如果你想知道为什么现在不用 rel='shortcut icon' 了，可以看看我们关于 link rel shortcut icon 遗留问题 的深入分析。

第三步：用 DevTools 验证

打开 Chrome DevTools，切到 Application 面板，看 Manifest 和 Icons 部分。如果 SVG 没出现在那里，说明路径有问题。建议始终用站点根目录的绝对路径（以 / 开头），避免子目录下的路由问题。

抄示例时常见的坑

就算 HTML 写对了，也可能翻车。下面是我看别人从网上复制 favicon link rel icon 示例时最常见的三个问题。

1. type 属性冲突

如果你给 ICO 文件写了 type='image/png'，Safari 会直接忽略。浏览器信任 MIME 类型提示。如果类型写错了，它们会默默丢掉这个标签。一定要确保 type 属性和实际文件格式一致。

2. 标签顺序不对

有些老浏览器会选最后一个 favicon 标签。现代浏览器通常选第一个能渲染的。如果你把 16x16 的 PNG 放在 SVG 前面，Chrome 可能就会渲染那个模糊的 PNG 而不是清晰的矢量图。始终把最高质量的源放在最前面。

3. 缺少尺寸提示

如果你用了多个 PNG，必须准确声明 sizes 属性。浏览器不会下载每个文件去检查尺寸。如果省略 sizes，浏览器只能靠猜，而且通常猜错。

想了解所有可能用到的分辨率，可以看我们的 favicon 尺寸指南。不过说实话，如果你已经用了 SVG，上面大部分尺寸都可以忽略。

极简方案才是王道

你不需要十几个 HTML 标签才能搞定专业的 favicon。GitHub 和 Stripe 的例子已经证明，一个干净的 SVG 优先策略完全够用。三个文件，三行 HTML，再测一下暗黑模式。如果你的 SVG 在切换系统主题时不变色，那需要在 SVG 文件里加一个 CSS media query。这是另一个话题了，但你现在搭的 HTML 基础是扎实的。