Favicon 网站图标

Favicon 是在浏览器标签页、书签、历史记录和部分搜索结果中标识网站的小图标。这个名称来自“favorites icon”，即 Internet Explorer 对书签图标的叫法。

浏览器最初会从网站根目录请求名为 favicon.ico 的文件。ICO 格式可以在一个文件中包含多种尺寸，例如 16×16、32×32 和 48×48 像素。现行 HTML 通过 rel 属性为 icon 的 link 元素声明图标，文件格式除 ICO 外也可以是 PNG 或 SVG。

Apple 设备的主屏幕快捷方式使用单独的 touch icon，通常是 180×180 的 PNG。可安装的 Web 应用会在 Web 应用清单（manifest）中列出更大的图标，常见尺寸为 192×192 和 512×512。

Favicon 格式与尺寸

文件	格式	常见尺寸
favicon.ico	ICO	16、32、48 px，合在一个文件中
图标 link	PNG 或 SVG	32×32 PNG，或一个可缩放的 SVG
Apple touch icon	PNG	180×180
清单图标	PNG	192×192、512×512

Favicon 的显示位置

• 浏览器标签页和地址栏。
• 书签、阅读列表和历史记录。
• 手机和平板电脑主屏幕上的快捷方式。
• 部分服务中的搜索结果和链接预览。

如何制作 Favicon

1. 从方形的徽标图形开始，而不是完整的文字标志。
2. 简化图形，使其在 16×16 像素下仍能辨认。
3. 导出各尺寸的 PNG、可选的 SVG 和一个 ICO 文件。
4. 在页面 head 中添加 link 元素，并在多个浏览器中测试。

实际发布流程中的 Favicon

缺少 Favicon 时，标签页截图和文档中会显示通用图标。为指南或发布文章截取浏览器窗口之前，先确认 Favicon 已正常加载。浏览器会积极缓存 Favicon，因此更新后旧图标可能仍会显示。

常见错误

• 使用细节过多的徽标，在 16 像素下变得模糊。
• 遗漏 Apple touch icon，导致手机改为显示页面截图。
• 使用透明图标，在深色浏览器主题下几乎看不见。
• 只在一个浏览器中测试。

现在就有图片需要处理？

使用 Image Converter 在 PNG、JPG 和 WebP 之间转换徽标，并用 Screenshot Resolution Checker 查看像素尺寸。

常见问题

现在还需要 favicon.ico 吗？

许多网站仍保留它，因为部分工具会从网站根目录请求该文件。PNG 或 SVG 图标 link 已能覆盖当前的浏览器。

Favicon 可以是动画吗？

部分浏览器会显示 GIF 动画 Favicon，但支持程度不一。静态图标是更可靠的选择。

参考资料

• Favicon（维基百科）
• HTML Living Standard：links

相关资源

• Open Graph 图片：分享链接时显示的较大预览图。
• Image Compressor：减小图标文件大小。