制作一个不像垃圾的Favicon

现在打开你的浏览器标签页。有多少个你只看favicon就能识别？

可能大多数。那个16x16像素的小方块在品牌识别上做着重要工作。Google的彩色G。Twitter的小鸟。GitHub的章鱼猫。你立刻就认出来了。

然后是你的网站用着默认的空白页图标。或者更糟，一个在500像素时看起来很棒但在16像素时变成无法识别的团的logo。

为什么Favicon被忽略

大多数人设计logo，建网站，然后在最后一分钟才想起favicon。"把logo缩小就行"似乎合理。很少奏效。

详细的logo在16x16像素时变成泥。文字不可读。细线消失。颜色混在一起。

好的favicon是为小尺寸设计的，而不是从大尺寸改编的。

什么在小尺寸下有效

简单形状。 单个字母。基本几何形状。2秒内可识别的东西。

高对比度。 深色背景浅色或浅色背景深色。微妙的渐变在小尺寸下消失。

粗线条。 细笔画消失。粗壮清晰的形状能挺过缩小。

有限的颜色。 最多两三种。复杂的调色板变成噪音。

你真正需要的尺寸

浏览器、操作系统和设备都请求不同的尺寸：

• 16x16 - 浏览器标签页（关键的那个）
• 32x32 - 任务栏、快捷方式
• 48x48 - Windows桌面
• 180x180 - Apple touch图标
• 192x192 - Android Chrome
• 512x512 - PWA启动屏

你可以手动创建每个尺寸。或者使用生成器从一个源图片输出所有尺寸。

常见错误

使用完整logo。 "RunToolz"作为16像素的文字？不可读。使用图标部分，或创建简化版本。

忘记暗色模式。 你的黑色图标在暗色浏览器主题上消失。考虑添加微妙的边框或制作浅色版本。

忽略背景。 有些环境在白色上显示favicon，其他在深色上，还有在你选择的颜色上。测试所有三种。

低分辨率源。 至少从512x512开始。缩小有效。放大创建模糊。

快速流程

1. 从你的logo或品牌标记开始
2. 简化到最可识别的元素
3. 首先让它在16x16下工作
4. 从那里放大，只在有帮助的地方添加细节
5. 在实际的浏览器标签页中测试，而不只是在你的设计工具中

---

Favicon是那些把精致网站和业余网站区分开的小细节之一。花10分钟做好。每次有人瞥一眼他们的标签页时都会产生影响。