Favicon 生成器 — 创建网站图标完全指南

Favicon 是显示在浏览器标签页、书签和历史记录中网站名称旁边的小图标。尽管体积很小，却是网页上最显眼的品牌元素之一——用户每次打开你的网站标签页都会看到它。

本指南全面介绍 favicon 相关知识：需要哪些尺寸、使用哪种格式、如何生成，以及将它们添加到网站的 HTML 代码。

什么是 Favicon？

Favicon 是"favorite icon"（收藏图标）的缩写，最初用于 Internet Explorer 的书签功能，如今已出现在：

浏览器标签页
书签列表
浏览器历史记录
搜索引擎结果（部分搜索引擎）
移动端主屏幕快捷方式
渐进式 Web 应用（PWA）图标

缺少 favicon 会导致浏览器显示默认通用图标或空白区域，看起来不专业，也让你的网站在多个标签页中难以辨识。

需要准备的 Favicon 尺寸

现代浏览器和设备需要多种 favicon 尺寸。以下是完整列表：

尺寸	格式	用途
16x16px	ICO 或 PNG	浏览器标签页（标准）
32x32px	ICO 或 PNG	浏览器标签页（高 DPI）
48x48px	ICO	Windows 网站快捷方式
180x180px	PNG	Apple Touch Icon（iOS 主屏幕）
192x192px	PNG	Android Chrome / PWA
512x512px	PNG	PWA 启动画面
任意尺寸	SVG	现代浏览器（可缩放）

最关键的三个尺寸是 16x16、32x32 和 180x180（Apple Touch Icon）。如果只生成三个文件，就选这三个。

ICO vs PNG vs SVG

ICO（Windows 图标格式）

传统的 favicon 格式。一个 ICO 文件可以包含多个尺寸（例如 16x16、32x32 和 48x48 全部放在一个 .ico 文件中）。

优点： 所有浏览器兼容，一个文件包含多尺寸 缺点： 较旧的格式，文件体积较大

PNG

大多数 favicon 用途的现代标准。文件小巧、清晰，支持透明背景。

优点： 文件小，支持透明，广泛兼容 缺点： 每个文件只能一个尺寸（需要多个文件）

SVG

最新的方案。一个 SVG favicon 可以完美缩放到任意尺寸，甚至可以通过 CSS 支持深色模式。

优点： 无限缩放，通过 CSS 支持深色模式，一个文件通用 缺点： 尚未被所有浏览器支持（Safari 最近才添加支持）

推荐方案： 使用 ICO（内嵌 16x16 和 32x32）作为主 favicon，PNG 用于 Apple Touch Icon 和 PWA 图标，可选地为现代浏览器提供 SVG。

使用 BestPNG 创建 Favicon

BestPNG 的 favicon 生成器可以将任意图片转换为包含所有所需尺寸的完整 favicon 套件。

操作步骤：

打开 bestpng.com/tools/favicon
上传你的 logo 或图标（支持 PNG、JPG 或 SVG）
预览不同尺寸下的 favicon 效果
选择要生成的尺寸（或全选）
下载 favicon 套件（ICO + PNG 文件）

最佳效果提示：

从正方形图片开始（1:1 长宽比）
使用简单、可辨识的设计——favicon 非常小
确保在 16x16px 尺寸下仍可辨认
如果图标不是满幅的，使用透明背景

为小尺寸而设计

Favicon 的最大挑战在于让品牌在仅 16x16 像素的空间中保持辨识度。以下是设计原则：

简化

带文字的完整 logo 几乎不可能在 favicon 中呈现。建议使用：

品牌名称的首字母
Logo 图形的简化版本
一个可辨识的符号

使用粗线条和实心形状

细线和精细细节在小尺寸下会消失。使用粗实的形状和清晰的轮廓。

在实际尺寸下测试

始终在真实的浏览器标签页中以 16x16px 预览你的 favicon（不是放大后看）。在 512px 下好看的设计，在 16px 可能变成难以辨认的色块。

考虑背景色

在大多数浏览器中，favicon 显示在浅色（或深色模式下的暗色）标签栏上。在浅色和深色背景下都测试 favicon 的可见性。

Favicon 的 HTML 代码

生成 favicon 文件后，将以下标签添加到 HTML 的 <head> 部分：

<!-- 标准 favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" />

<!-- 不同尺寸的 PNG favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

<!-- SVG favicon（现代浏览器） -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

<!-- Web App Manifest（PWA 图标） -->
<link rel="manifest" href="/site.webmanifest" />

PWA 支持的 site.webmanifest 文件：

{
  "icons": [
    { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

测试 Favicon

上传 favicon 文件后：

清除浏览器缓存 — Favicon 会被强缓存。使用 Ctrl+Shift+R（Mac 上 Cmd+Shift+R）硬刷新。
多浏览器测试 — 在 Chrome、Firefox、Safari 和 Edge 中检查。
移动端测试 — 在 iOS 和 Android 上将网站添加到主屏幕，验证触摸图标。
深色模式测试 — 切换浏览器/系统的深色模式，确认 favicon 仍然可见。
书签验证 — 收藏页面并检查书签栏中的图标。

常见 Favicon 错误

使用完整 logo。 文字在 16px 下不可读。改用符号或字母。
遗忘 Apple Touch Icon。 没有它，iOS 会生成一个丑陋的网页截图缩略图。
只提供一个尺寸。 浏览器会选择最接近的尺寸，如果只有 16x16 而需要 32x32 会显得模糊。
更新后不清除缓存。 Favicon 缓存时间很长。更换 favicon 后需要提醒访客硬刷新。
文件放错目录。 大多数浏览器默认在域名根目录下查找 /favicon.ico。确保文件位置正确。

常见问题

可以用照片作为 favicon 吗？ 技术上可以，但照片在 16x16px 下效果极差，会变成无法辨识的色块。Favicon 最适合简单的图标、字母或符号。

如何制作透明背景的 favicon？ 从一张透明背景的 PNG 图片开始。如果源图有实色背景，先用 BestPNG 的抠图工具去除背景，然后生成 favicon。

ICO 和 PNG favicon 都需要吗？ 为了最大兼容性，建议都有。ICO 覆盖旧浏览器和 Windows 快捷方式，PNG 覆盖现代浏览器和 Apple/Android 设备。如果只能选一种，选 ICO（包含 16x16 和 32x32 尺寸）。

多久更新一次 favicon？ 仅在品牌形象变更时更新。Favicon 被大量缓存，频繁更改会让通过标签图标识别你网站的用户感到困惑。

Favicon 没有显示怎么办？ 检查 HTML 中的文件路径，确认文件上传到了正确的服务器目录，清除浏览器缓存，并通过直接访问 URL（如 yoursite.com/favicon.ico）验证文件是否可访问。

总结

精心设计的 favicon 是一个小细节，却对网站的专业感和品牌辨识度产生巨大影响。使用 BestPNG 的 favicon 生成器，可以从任何源图一键生成完整的 favicon 文件套件——包括多尺寸内嵌的 ICO、Apple Touch Icon 和 PWA 就绪的 PNG。

保持设计简洁，在实际尺寸下测试，确保包含所有 HTML meta 标签以覆盖每种浏览器和设备。

立即生成 Favicon →