网站图标（Favicon）

**网站图标（Favicon）**是代表网站的小图标，通常为 16x16 或 32x32 像素，会出现在浏览器标签页、书签和搜索结果中，也是网页上最常见的品牌元素之一。

Related workflow terms: Open Graph 图片, 图像格式.

Favicon 的格式和尺寸

Favicon 已从单一的 16x16 ICO 文件，发展为一组不同格式和尺寸的图片，分别用于不同场景。

ICO（favicon.ico）是传统格式，一个文件可以包含多种图片尺寸（16x16、32x32、48x48）。即使 HTML 中没有明确的 link 标签，浏览器也会自动检查网站根目录中的 /favicon.ico。为兼容旧版浏览器和部分企业环境，ICO 仍有必要保留。

PNG 是最常见的现代格式。特定尺寸的独立 PNG 文件（32x32、192x192、512x512）会通过 HTML head 中的 <link> 标签引用。PNG 支持透明背景，也得到当前所有浏览器的支持。

SVG 最为灵活。单个 SVG Favicon 可以无损缩放到任意尺寸，不会出现像素化。它还允许在文件内使用 CSS，包括 @media (prefers-color-scheme: dark)，从而在用户切换浅色和深色模式时自动调整。Chrome、Firefox 和 Edge 均支持 SVG Favicon。

Apple 触控图标（180x180 PNG）用于 iOS 用户把网站添加到主屏幕的场景。它通过 <link rel="apple-touch-icon"> 引用，并显示为圆角应用图标。

一套完整的 Favicon 通常包括：用于标准浏览器标签页的 32x32 PNG、用于 Apple 设备的 180x180 PNG、用于 Android 和 PWA 清单的 192x192 与 512x512 PNG、支持缩放和深色模式的 SVG，以及作为后备的传统 favicon.ico。

Favicon 会出现在哪里

Favicon 的曝光位置比许多开发者想象的更多，包括：

• 浏览器标签页——最主要的展示位置，通常以 16x16 或 32x32 像素显示在页面标题旁。现代浏览器中的标签页变窄后，可能只保留 Favicon。
• 书签和阅读列表——已保存页面会以 Favicon 作为视觉标识，方便用户在较长的书签列表中找到网站。
• 浏览器历史记录——最近访问的页面会在标题和 URL 旁显示 Favicon。
• 搜索引擎结果——Google 和 Bing 会在搜索结果旁显示 Favicon，作为低调但持续出现的品牌元素。
• PWA 和移动设备主屏幕——渐进式网页应用和“添加到主屏幕”功能会把较大尺寸的 Favicon 用作应用图标。
• 标签页组和标签页管理器——浏览器整理标签页时，主要依靠 Favicon 在视觉上区分不同网站。

如何创建 Favicon

先从简单、容易辨认的设计开始。Favicon 在 16x16 像素下也必须清晰，复杂标志、细节丰富的插图和大量文字都不适合这么小的尺寸。有效的 Favicon 通常采用粗犷形状、强对比和尽量少的细节。

可以先按 512x512 或更大尺寸设计，再向下缩放，确保图案适合所有必需规格。应按实际显示尺寸检查缩放后的版本，例如查看浏览器标签页中的效果，确认是否容易辨认。

在自动化流程中，也可以把带样式的 HTML 元素截成图片，例如彩色字母、简单 SVG 图形或品牌图标，再调整大小并导出所需格式和尺寸。这样，团队就能把 Favicon 的生成和更新纳入构建流程，通过代码完成。

使用 Favicon 生成器，可以从一张源图片得到所有必需尺寸和格式，以及用于引用这些文件的 HTML 标记。

实际发布流程中的做法

从网站视觉系统的同一份源素材生成 Favicon，最容易保持一致。团队不必分别手动导出 favicon.ico、触控图标和清单图标，而是保留一张高分辨率源图片，在发布准备阶段派生出所需尺寸。这样可以减少标签页、书签、PWA 和搜索结果之间的视觉偏差。

常见问题

• 只使用 favicon.ico。 单个 ICO 文件无法覆盖 Apple 触控图标、Android 清单图标和 SVG 深色模式支持。应提供完整的格式和尺寸组合，确保各平台显示一致。
• 设计细节过多。 浏览器标签页中的 Favicon 只有 16x16 像素，细线、小字和复杂形状会糊成一团。应把设计简化到最有辨识度的元素。
• 忘记透明背景。 没有透明背景的 Favicon 会在图标后显示实心矩形，放在浏览器栏和书签栏上显得突兀。应使用带透明背景的 PNG 或 SVG。
• 没有测试深色模式。 深色 Favicon 可能在深色浏览器标签栏中消失。可以使用带 CSS 媒体查询的 SVG，分别提供浅色和深色版本，或选择在两种背景上都有足够对比度的颜色。
• 忽略缓存。 浏览器会长时间缓存 Favicon。更新后，可在 URL 后添加版本字符串，或更改文件名，强制浏览器重新获取。