把你的 Logo 变成 Favicon
你的 logo 有文字标识、符号和精细细节。在 16 像素宽时，只有其中一个能存活。在导出任何东西之前，先刻意地选好它。
为什么完整的 logo 行不通
favicon 会被渲染到小至 16 像素宽。一个带有文字标识和精细细节的完整 logo，在那个尺寸下会变成一团灰色的污渍：文字无法辨认，细节糊成一片。
解决办法是把 favicon 当作从 logo 派生出来的独立资源，而不是 logo 本身。大多数出色的 favicon 都是一个符号、一个字母组合或一个单独的字母，因为在标签页尺寸下能存活下来的就只有这些。
从 logo 到 favicon
- 1
提取一个元素
取出你 logo 中的符号，或者如果你的 logo 是文字标识，就取一个单独的首字母。去掉文字和任何装饰性的东西。
- 2
简化到小尺寸也清晰
去掉细线、渐变和内部细节。目标是一个与背景高对比的醒目单一形状。
- 3
先在最小尺寸下设计
缩放到 16x16 并让它在那里清晰可辨。如果它在 16 下有效，那么它在任何地方都有效。把小设计放大很容易；反过来则不然。
- 4
必要时加一个背景
一个紧凑的标志放在纯色或稍加留白的背景上，往往比从边到边漂浮着更清晰。这也有助于 apple-touch-icon，因为 iOS 会把它填充到黑色上。
- 5
导出完整套件
从最终的标志生成 favicon.ico、各个 PNG 和 apple-touch-icon，这样每个尺寸都来自同一份干净的图稿。
经得起缩小的设计规则
对比度优先。标志需要与背景形成强烈区分，因为细微的色调变化在小尺寸下会消失。醒目的前景，简单的背景。
一个形状，而不是三个。一个能被读作单一剪影的 favicon 才有效。堆入多个元素，它们就会融成噪点。如果你在两个想法之间犹豫，就发布更简单的那个。
注意负空间。形状之间的细缝在 16 像素下会闭合，标志就会糊成一团。给形状留出空间，或者把它们加粗，让缝隙保持敞开。
常见问题
我能把我的 logo 用作 favicon 吗？
不能用完整的 logo。提取符号或单个首字母，简化到它在 16 像素下清晰可读，然后从那里导出 favicon 套件。一个完整的文字标识在标签页里会糊成一片。
如何从 logo 制作 favicon？
从 logo 中取一个元素，去掉精细细节，在 16x16 下调到清晰可辨，如果标志紧凑就加一个背景，然后从最终图稿生成每个 favicon 尺寸。
为什么我的 logo 作为 favicon 时看起来模糊？
它对 16 像素来说细节太多。细线、文字和渐变在那个尺寸下都会崩塌。简化成一个醒目、高对比的单一形状。
我应该在多大尺寸下设计 favicon？
先在最小尺寸 16x16 下设计。如果标志在那里清晰可辨，它在每个更大的尺寸下都清晰可辨。把一个干净的小设计放大是安全的；缩小一个细节繁复的则不然。