如何给网站加上 favicon（所有尺寸，一次做对）
favicon 是你网站上最小的那张图，也是人们见得最多的那张。它出现在每一个浏览器标签页、书签栏、历史记录、搜索结果里，以及别人把网站存到手机主屏之后。它是你品牌里唯一一个“被缩到 16 像素还能活下来”的部分。
而它通常是所有人最后才配的东西——这就是为什么那么多网站至今还顶着默认的小地球，或者一个从来没为这个尺寸设计过的 logo 缩略图。
你真正需要的文件
这份清单比老一套的说法短，但不是只有一个文件。
| 文件 | 尺寸 | 出现在哪 |
|---|---|---|
favicon.ico |
16、32、48（多尺寸） | 老浏览器、旧书签、/favicon.ico 请求 |
favicon-32x32.png |
32×32 | 现代桌面浏览器标签页 |
favicon-16x16.png |
16×16 | 小标签页、部分书签栏 |
apple-touch-icon.png |
180×180 | iOS 主屏、Safari 固定标签 |
icon-192.png |
192×192 | 安卓主屏、PWA |
icon-512.png |
512×512 | PWA 启动画面、应用商店 |
.ico 格式还是值得提供。不是因为现代浏览器需要它——并不需要，PNG 到处都能用——而是因为当页面没有声明图标时，浏览器和爬虫仍会默认去请求 /favicon.ico，于是你的日志里每天多一条 404，一条微小但永久的噪音。一个多尺寸的 ICO 就把这事解决了。
192 和 512 这两个文件根本不是给 <link> 标签用的，它们属于 web app manifest：
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}在 16 像素下活下来
这条约束决定了你的 favicon 到底能不能用，而它是设计问题，不是技术问题。
16×16 意味着你只有 256 个像素可用。一个带副标题、带细笔画、或者超过两种颜色的 logo，缩下去就是一团泥。能活下来的是：
一个粗壮的形状。 一个字母、一个简单几何标记，或者一个强剪影。想想那些你记得住的图标——几乎都是一个想法。
高对比。 图标坐在一条你控制不了颜色的标签栏上，而且它会随浅色/深色模式变。只在白底上能看清的标记，会对一半访客消失。
透明底，而不是实心方块。 透明底让图标去适应浏览器放在它后面的任何东西。一个纯白方块在深色模式下看着就像一张坏掉的图。
20px 以下不要放文字。 如果你的品牌是一个词，就用首字母。没有人会去读一个 16 像素的词。
如果你的 logo 简化不到这个程度，那不是你发一个模糊版本的理由——换一个简化过的标记。一个用品牌色画的单字母，就是个完全合格的 favicon，比一个“能认出但读不清”的 logo 强。
生成整套文件
- 打开 favicon 生成工具。
- 上传你的 logo——512×512 以上的正方形图片效果最干净，带透明通道的 PNG 最好。
- 看 16 像素和 32 像素下的实时预览。这才是重点：这里看不清，真实标签页里就看不清。
- 下载文件包，把文件放进网站根目录。
如果你的 logo 不是正方形，工具会把它居中放到一块正方形画布上、用透明补边，而不是拉伸或裁剪。这是正确的默认做法——被拉伸的 logo 比补过边的更糟。
加上标签
把这段贴进 <head>：
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">两点值得知道。第一，浏览器会从这份清单里挑它想要的那个尺寸——你不是在做选择，你是在提供选项。第二，顺序无所谓，sizes 才有所谓。
缓存陷阱
你会改掉 favicon，刷新，然后看到旧的。你再刷新。你开始怀疑文件到底传上去没有。
favicon 的缓存比网上几乎任何东西都顽固。浏览器会留它好几天、有时好几周，而普通刷新清不掉。测试的时候：
- 用强制刷新（Ctrl+Shift+R / Cmd+Shift+R），不要普通刷新
- 在无痕窗口里测，它从干净的缓存开始
- 如果还是不动，把文件改名（
favicon-v2.ico）并更新链接——新文件名就是新资源，没有缓存条目跟你作对
这三样都试过之前，别下结论说文件坏了。最常见的“favicon bug 报告”，根本不是 bug。
标签页之外：分享卡
favicon 是别人到达之后看到的图标。别人到达之前看到的那张图，是你的社交分享卡——把网址粘进聊天软件或社交帖子时出现的那个预览。
那张图是 1200×630 像素，它干的活比 favicon 多得多：它常常是“点进去”和“划过去”之间唯一的一道关卡。一张没有留白、没有背景的裸截图看起来像出了事故；同一张截图配上渐变背景、圆角和一层柔和阴影，看起来就是有意为之——这正是截图美化工具存在的意义，而且它按 2 倍输出，在高分屏上文字依然锐利。
如果你的原始截图和 1.91:1 的卡片比例对不上，先调整到社交平台的尺寸，再加框。
常见问题
源图该多大？ 512×512 以上、正方形、带透明通道的 PNG。文件包里所有尺寸都是从它缩下来的，所以源图越大越干净，小图标就越锐利。
2026 年了还需要 favicon.ico 吗？
需要，为了浏览器和爬虫仍会发出的那个默认 /favicon.ico 请求，也为了老客户端。带上它不花任何代价。
为什么我的 favicon 是模糊的？ 因为细节缩到 16 像素就活不下来。简化这个标记——一个粗形状或一个字母——而不是试图把复杂的 logo 锐化。
favicon 不更新，是哪里坏了？ 几乎肯定是缓存。强制刷新、在无痕窗口测，还不行就改名。浏览器保留 favicon 的时间远比其他资源长。
192 和 512 的图标必须要有吗？
只有在你希望网站能作为 PWA 安装、或者在安卓主屏上正常显示时才需要。它们放 manifest，不放 <link> 标签。
favicon 该用透明背景吗？ 多数情况下该用。透明背景能同时适应浅色和深色的浏览器界面；纯白方块在深色模式下会变成一块难看的色块。