大多数辨识度高的 favicon 其实就两个字母。看一眼浏览器标签页——HN、GH、MDN、AWS。字母组合 favicon 能在 16x16 像素的小格子里活下来，是因为字形在小尺寸下依然能看清，而完整 logo 直接糊成一片。
这篇文章带你做一个在每个标签页、每台设备、深色模式下都扛得住的字母 favicon。
为什么字母适合做 favicon
字母把品牌识别压缩到最小的视觉单元。两个字符在 16x16 下依然能读，细节丰富的 logo 则基本认不出来。对 MVP、副业项目或没有设计体系的内部工具来说，字母 favicon 是最快拿到专业标签页表现的方式。
它也能避开一个常见错误——把完整 logo 直接当 favicon 上传，这种做法几乎扛不住缩小。
你需要准备的东西
- 1–3 个能代表项目或品牌的字符
- 一组高对比度配色（一个给字母，一个给背景）
- Mzu favicondl，用来生成完整图标包
一步步做字母 favicon
1. 选定字形
一个字母最快，两个字母辨识度更高，三个是 16x16 像素能挤下的实际极限。避开小尺寸下容易糊的形近组合（比如 'Il' 或 'rn'）——它们会直接糊成一团。
2. 选择字体方案
有两条路：用系统字体栈原生渲染，或者自己设计字形。大部分项目用一个粗体无衬线字体（Inter、SF Pro、Helvetica）就够了，因为粗笔画在缩小后比细衬线更耐看。
3. 用 HTML 和 CSS 做字母组合原型
最快的原型方式是写一个 HTML 元素加 CSS，再截图成 SVG：
<div style='width:64px;height:64px;background:#0a0a0a;color:#fff;display:grid;place-items:center;font:700 32px/1 system-ui;border-radius:12px;'>HN</div>在浏览器里渲染、截图，然后把它当作起点丢进 Mzu favicondl。
4. 生成完整 favicon 包
打开 Mzu favicondl，上传你的字母组合，导出完整图标栈：SVG 给现代浏览器，PNG 做兜底，ICO 兼容老式桌面，Apple Touch Icon 给 iOS。工具会自动处理所有必需的尺寸。
5. 加一个深色模式版本
浅色字母在深色背景上，当用户开启浏览器深色外观时可能会消失。准备一组反色配色，然后用 prefers-color-scheme 媒体查询同时挂两个版本，参考 HTML 现行标准里的 rel=icon 规范：
<link rel='icon' href='/favicon.svg' type='image/svg+xml' media='(prefers-color-scheme: light)'>
<link rel='icon' href='/favicon-dark.svg' type='image/svg+xml' media='(prefers-color-scheme: dark)'>6. 把 HTML 塞进 <head>
把 link 标签放在文档 <head> 的最前面，让浏览器在解析剩余内容之前先检测到它们。
常见坑
- 字体太细：笔画细于 2px 在 16x16 下直接消失。字重至少选 600。
- 对比度太低：浅灰配白底在浏览器标签页里几乎看不见。对比度至少做到 4.5:1。
- 内边距太大：字母组合需要紧凑的边界框。留 10–15% 内边距就行，别给到 30%。
- 忘了深色模式：浅色 favicon 在深色浏览器外观下会直接隐形。从一开始就配好深色模式图标。
收尾
字母 favicon 是任何 Web 项目最便宜的专业动作。两个字母、一组配色，加上五分钟和 Mzu favicondl，就能拿到一个扛得住 16x16 像素、深色模式和所有浏览器的标签页图标。