Favicon 用户体验:好的 Favicon 应具备什么

优秀的 favicon 是一个简洁、高对比度的标记,通常是你的 logo 标志或一两个字母,它在浅色和深色浏览器标签页上都能以 16x16 像素清晰可辨,与品牌相符,并且很少更改。本指南中的其他内容(像素对齐、颜色、内边距、透明度、文件大小)都服务于这些目标:让你的网站在几十个打开的标签页中一眼就能被找到。

favicon 虽小,却出现在许多地方:浏览器标签页、书签栏、历史记录列表、标签页搜索菜单、移动端和桌面端的 Google 搜索结果,以及手机主屏幕。对于打开大量标签页的用户来说,标题常常被截断到完全看不见,图标成为仅剩的线索。这使它成为真正的导航元素,而不仅仅是装饰。

1. 16x16 下的清晰度

经典的 favicon 尺寸是 16x16 CSS 像素。在标准显示器上,这确实只有 256 个像素;在 2x 视网膜显示器上,浏览器通常会为同样大小的空间选用 32x32 的图像。无论你设计什么,都必须经得起这样的缩小。

保持简单

• 一个形状,或者一到两个字母。单个粗体字母、带符号的圆形或简单的几何标记都行得通。三个字母或一个单词会变成一团杂乱。
• 只有一个视觉焦点。如果你无法用五个词描述这个图标,那它就太复杂了。
• 不要使用渐变、阴影或精细纹理。它们在小尺寸下会变成模糊的污点。

对齐像素网格

在 16x16 下,偏离网格半个像素的线条会在两行像素之间产生抗锯齿,看起来灰蒙蒙、软绵绵。请把边缘放在整像素边界上,并在形状对称的地方使用偶数宽度。如果你是从矢量工具导出的,请启用像素对齐,或者检查缩小后的结果并手动修正。

避免细线

在 16x16 下,细于 2 像素(约占图标宽度的 12%)的笔画往往会消失,或在不同尺寸之间闪烁。请加粗笔画、去掉内部细节并合并小缺口。一个粗壮、略显厚重的字形,通常比忠实还原的精细 logo 缩略图更易辨认。

手动微调

ICO 和 PNG 文件没有字体式的 hinting,因此手动编辑像素就是等效的做法:你逐个调整像素,使曲线、斜线和字形内部空腔(例如字母 "a" 或 "e" 中的孔)保持清晰。自动缩小是不错的初稿,但几个手工放置的像素往往能决定它是一团模糊还是一个可辨认的字母。MakeFav 像素编辑器正是为此而生:打开 16x16 画布,修正有问题的像素,然后导出。

2. 浅色和深色标签页上的对比度

如今浏览器通常运行在深色模式下,而且许多用户的标签栏与页面主题并不一致。背景透明的深海军蓝图标在白色标签页上可能完美无缺,但在深灰色标签页上几乎看不见。务必两种都测试。

实用解决方案

• 添加背景形状。使用品牌色的实心圆角方形或圆形,无论标签页是什么颜色,都能保证标记自身有对比度。
• 使用细轮廓或光晕。在深色字形周围加 1px 的浅色边缘(或反过来),可以让轮廓在两种主题下都清晰可见,但在 16x16 下它必须保持锐利,所以请测试一下。
• 选择中等色调的品牌色。鲜明的蓝色、橙色、绿色或洋红色通常在白色和接近黑色的表面上都适用。非常浅的黄色或非常深的海军蓝则有风险。
• 使用自适应 SVG favicon。SVG 可以包含 prefers-color-scheme 媒体查询,使图标随系统主题变化。

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

请注意,该媒体查询反映的是操作系统或浏览器的主题,标签栏通常会跟随它,但并非总是如此。对 SVG favicon 的支持也各不相同:Chrome 和 Firefox 可以处理,而 Safari 历来相对滞后,因此请始终保留 PNG 或 ICO 作为后备。纯色背景的设计是最稳健的选择,因为它完全不需要主题逻辑。

3. 辨识度与品牌一致性

请使用 logo 标志(符号或字母组合),而不是带文字标识的完整 logo 组合。16x16 图标里的文字无法阅读,而宽幅的横向 logo 被压进方形后,只会在中间留下一条细小的带状图案。

• 如果你的品牌有符号,请针对小尺寸进行简化,而不是单纯缩小。准备一个细节更少的"favicon 版本"是标准做法。
• 如果你的品牌只有文字标识,请取首字母或一对有特色的字母,用品牌字体的粗体设置。
• 保持颜色与你的 logo、应用图标和社交头像一致,这样用户在任何地方都能认出同一个品牌。

独特性与还原度同样重要。看看一排标签页:如果另外三个网站也用蓝色圆形,你的就不会脱颖而出。与其追求完美还原的缩小版,不如选择不同的形状或颜色。

4. 颜色:有限而饱和的色板

像素这么少,每多一种颜色都会增添杂乱。请控制在一到两种颜色,最多再加白色或黑色。饱和的颜色在小尺寸下比柔和的粉彩色更容易被看到,后者往往会融入标签页背景。

不妨借鉴一些无障碍设计的思路。WCAG 要求有意义的图形对象至少达到 3:1 的对比度(成功标准 1.4.11,非文本对比度)。favicon 并不在正式的涵盖范围内,因为它属于浏览器界面而非页面内容,但字形与其背景之间、图标与标签页之间保持 3:1 是一个合理的目标。同时,避免仅通过色相来传达信息:同一图标的红色和绿色版本对许多色盲用户来说无法区分,因此请改变形状或添加符号。

5. 形状、内边距与安全区域

填满方形

浏览器标签页以固定的小尺寸显示 favicon,所以多余的边距只会让你的标记变得更小。对于标准的标签页图标,请使用画布的大部分区域,只留一两个像素的空隙,让标记尽可能大。

圆角还是方形?

浏览器一般不会裁剪标签页 favicon,所以你绘制的形状就是用户看到的形状。略带圆角的方形看起来整洁,并提供一致的背景;透明背景上的自由形状字形或圆形则显得更轻盈、更有特色。两者都可以。选择一种,并保持整套图标一致。

Apple touch 图标

iOS 会为 apple-touch-icon(常用尺寸为 180x180)添加自己的圆角。请提供铺满画布、没有预先圆角的方形图,否则角落里可能会出现明显的深色或白色细边。

适用于 Android 和 PWA 的 maskable 图标

Maskable 图标会被操作系统裁剪成圆形、圆角方形(squircle)或其他形状。请将所有重要内容保持在安全区域内:以图标中心为圆心、半径为图标宽度 40% 的圆。让背景色一直延伸到边缘,这样无论哪种蒙版都显得合适。不要把紧贴边缘的标签页 favicon 重复用作 maskable 图标,因为蒙版会把它裁掉。

6. 透明度

透明度对标签页 favicon 没有问题,它正是让纯字形图标能干净地落在任何标签页颜色上的原因。但它对 Apple touch 图标是个问题:iOS 会用纯色(通常是黑色)填充透明区域,这可能毁掉设计。请始终为 apple-touch-icon 提供品牌色的不透明背景。maskable 图标以及大多数 Android 主屏幕场景也是如此,不透明背景能带来可预期的效果。

7. 稳定性:不要太频繁地更改

favicon 通过反复出现来建立认知。频繁更改会迫使用户重新学习哪个标签页是你的,还会带来技术上的麻烦。浏览器会积极缓存 favicon,而 Google 会将它们与你的页面分开抓取和存储,因此新图标可能需要数天甚至数周才能出现在搜索结果中。Google 还要求 favicon 的 URL 保持稳定、图标尺寸为 48 像素的倍数(48x48、96x96 等),并且文件可被抓取(未被 robots.txt 屏蔽)。请把更改 favicon 当作品牌重塑级别的决定,而不是季节性装饰。

8. 通知状态与动态 favicon

一些网络应用会更改 favicon,以提示未读消息、录制状态或错误。做得好是有帮助的,做过头则令人厌烦。

• 使用小角标(圆点或简短的数字)放在角落,而不是彻底重新设计。基础图标应保持可辨认。
• 保持克制。只在需要用户操作的事件上使用角标。不要让图标持续动画。
• 限制数字。在 16x16 下只有一两位数字清晰可辨;请显示 "9+" 或一个简单的圆点,而不是 "137"。
• 及时重置。用户处理完相关事项后,恢复默认图标。
• 不要仅依赖颜色。红点还应有页面标题作为补充,例如 "(3) Inbox",让所有人都能获取这些信息。

动态 favicon 通常绘制在 canvas 上,并通过更新图标 link 元素的 href 来替换。请对更新进行节流,因为不断更改 favicon 会占用 CPU 并分散用户注意力。

9. 性能

favicon 很小,但它们仍然是请求,处理不当也会有问题。

• 保持文件小巧。PNG favicon 通常只有几百字节到几千字节。简单的 SVG 可以小于 1 KB。
• 避免臃肿的 ICO 文件。包含 16、32 和 48 像素图像的多尺寸 ICO 就足够了。嵌入 256x256 的图像会使文件大小成倍增加,而在浏览器标签页中毫无可见的好处。
• 设置缓存头。为图标设置较长的 Cache-Control 有效期,例如 public, max-age=31536000, immutable,并在更改图标时使用带版本号或哈希的文件名。
• 显式声明图标。浏览器默认会请求 /favicon.ico,因此即使你声明了其他图标,也请提供一个,以免日志中出现 404 噪音。
• 压缩。用无损优化工具处理 PNG,并精简 SVG。

<link rel='icon' href='/favicon.ico' sizes='32x32'>
<link rel='icon' href='/icon.svg' type='image/svg+xml'>
<link rel='apple-touch-icon' href='/apple-touch-icon.png'>
<link rel='manifest' href='/manifest.webmanifest'>

如果你想从一张源图像生成所有这些文件,MakeFav favicon 生成器可以生成标准的整套文件,开发者页面则介绍了集成选项。

10. 无障碍

favicon 没有替代文本,屏幕阅读器也不会朗读它,因此 alt 属性等传统的无障碍工具并不适用。真正重要的是:

• 页面标题承载含义。请编写独特且具描述性的 <title> 元素。切勿依赖图标来传达状态;任何角标都应在标题中同步体现。
• 对低视力用户的可见性。高对比度、粗壮的形状和较大的标记,有助于通过视觉浏览标签页的用户。
• 不依赖颜色。确保用形状或字母来区分状态,而不仅仅是色相。
• 减少干扰。避免闪烁或动画 favicon,这可能会给对动态敏感的用户带来问题。

Favicon 用户体验检查清单

测试检查清单

不要轻信设计工具中的大尺寸预览。请在真实条件下测试真实的图标:

1. 多个浏览器。检查 Chrome、Firefox、Safari 和 Edge,因为它们选择图标和尺寸的方式略有不同。
2. 浅色和深色模式。切换操作系统和浏览器主题,每次都查看标签栏。
3. 视网膜和标准显示器。在 1x 显示器和 2x 或 3x 屏幕上检查,并在浏览器中进行缩放。
4. 书签栏。为页面添加书签,看看图标在其他网站旁边是否依然清晰。
5. 大量标签页。打开 20 个标签页,看看你能否一眼找到自己的。
6. Google 搜索结果预览。在图标被重新抓取后,检查移动端搜索结果。请记住更新可能需要一些时间。
7. 主屏幕。将网站添加到 iOS 和 Android 主屏幕,确认图标没有被裁剪、没有黑色边角,并且在蒙版中不会显得太小。
8. 技术检查。用 MakeFav favicon 检测工具检查你的域名,以确认文件存在、返回 200 状态、尺寸正确,并且在 HTML 中声明无误。

实用工作流程

1. 从你的 logo 标志出发,将其简化为一个形状或字母。
2. 创建方形画布,使用在两种主题下都适用的纯色或带形状的背景。
3. 导出 32x32 和 16x16 尺寸,并在像素编辑器中手动优化小尺寸版本。
4. 使用生成器生成整套文件(ICO、PNG、apple-touch-icon、manifest 图标)。
5. 添加 link 标签、设置缓存头、部署,并用检测工具验证。

favicon 是你网站上最小的资源之一,也是最常被看到的资源之一。在对比度、简洁性和一致性上做出几个审慎的决定,就能让它在每个标签页、每种主题和每台设备上都发挥作用。

常见问题

favicon 应该是什么尺寸?

浏览器标签页请按 16x16 和 32x32 设计(在高密度显示器上浏览器使用 32x32),为 iOS 提供 180x180 的 apple-touch-icon,为 Android 和 PWA 提供 192x192 和 512x512 的 PNG。对于 Google 搜索结果,请使用尺寸为 48 像素倍数的方形图标,例如 48x48 或 96x96。SVG 源文件可以缩放到所有这些尺寸。

我应该把完整的 logo 用作 favicon 吗?

通常不应该。带文字标识的完整 logo 对于方形的 16x16 图标来说过于详细且过宽。请使用 logo 标志或一两个字母的字母组合,并加以简化,使其在极小时仍可辨认。

如何让 favicon 在深色模式下正常显示?

最稳妥的方法是为图标提供自己的纯色背景形状或对比鲜明的轮廓,使其不依赖标签页颜色。或者,使用带有 prefers-color-scheme 媒体查询的 SVG favicon 来切换颜色,并为不支持 SVG 图标的浏览器保留 PNG 或 ICO 后备。请始终在浅色和深色主题下都进行测试。

为什么我的新 favicon 没有显示?

浏览器会长时间缓存 favicon,而 Google 会保存自己的副本,并按自己的时间表刷新,通常需要数天或数周。请强制刷新页面、清除浏览器缓存、使用新的带版本号的文件名,并确保 link 标签和根目录下的 /favicon.ico 指向正确的文件。你可以使用 MakeFav 检测工具验证设置。

在 favicon 上显示通知角标是个好主意吗?

是的,前提是克制使用。小圆点或一两位数字的计数有助于用户注意到需要处理的事项,但持续的动画或较大的数字会损害清晰度并分散注意力。请始终在页面标题中同步体现状态,在事项处理完毕后恢复默认图标,并且不要仅依赖颜色。