Favicon 生成器

为什么一个 favicon 永远不够

favicon 看起来就是一个 16×16 的小图标。实际上，一个现代网站会被六七个彼此毫无关系的场景索取这个图标，每个场景要的尺寸都不一样。

谁在要什么尺寸

• 16×16 和 32×32 —— 浏览器标签页和地址栏。在高分屏上，即便是名义上 16 px 的位置，实际被光栅化使用的也是 32 px 那份资源。
• 48×48 —— Windows 任务栏和桌面快捷方式，也是老代码路径通过 favicon.ico 去取的那一档。
• 180×180 —— apple-touch-icon，用户把你的网站添加到 iOS 主屏幕时用。
• 192×192 和 512×512 —— Android 与 web app manifest。512 也会被某些平台用于启动画面和应用商店展示。
• SVG —— 对浏览器标签页来说，这正日益成为正确答案，因为一个文件就能适配任意像素密度。

只放一个 16×16，上述其余场景就只能放大它。把 16 px 的位图放大到 180 px，得到的就是你预想中的那种糊。

ICO 文件：它是容器，不是格式

这一点经常让人踩坑。favicon.ico 不像 PNG 那样是一种图片格式，它是一个小型容器，可以装下多张不同分辨率的图片。历史上它装的是 BMP 数据；自 Windows Vista 起可以装 PNG，这也是现代生成器的做法，所以一个构建得当的 ICO 会比它各组成部分的体积之和还小。

在页面没有声明图标时，浏览器仍然会默认去请求 /favicon.ico。正因为有这个默认行为，你要么提供这个文件，要么显式声明图标——否则每个访客都会在你的日志里留下一条 404，永久地。

苹果那个图标是最别扭的

iOS 会给 apple-touch-icon 套上圆角遮罩，老版本系统还会加一层高光。它不会帮你补白边。如果你的图标内容顶到了边缘，iOS 就会把它裁掉。解决办法是：产出这一档尺寸时，在四周预留百分之几的透明边距——这也正说明了，为什么"自动居中裁一个正方形"并不总是 180 px 这一档的理想做法。

manifest，以及它超出图标之外的意义

manifest.webmanifest 声明你的图标集、名称、配色和显示模式。有了它，Android 才会提供"添加到主屏幕"，基于 Chromium 的桌面浏览器才会提供"安装"。没有它，你只有图标，而没有一个可安装的应用。图标条目需要同时给出 192 和 512；如果你有 maskable 变体，512 那份应当标上 "purpose": "any maskable"，否则 Android 会以不可预期的方式裁剪它。

更新不生效这个老大难

Favicon 的缓存非常激进——有时比你网站其他部分都激进。只换文件不改 URL，访客往往几周内看到的仍是旧图标。每次换图标都请改 URL：加一个版本号查询串（/favicon-32.png?v=2），或者干脆改文件名。同理，如果你想确认某个社交平台缓存了你网站的什么内容，那是另一套独立缓存，要用它自己的调试工具。

怎么选源图

请用正方形素材起步，最好 512×512 或更大，并且重要内容要离边缘留一距离。在 512 上能看清的细节，到 16 尺寸一定会消失——缩不小还好看的 favicon，都是用粗壮的剪影搭出来的，而不是精细的插画。如果你手上只有精细版 logo，建议为小尺寸单独做一个简化变体，而不是接受一团糊。