什么是 Favicon？

Favicon（"favorite icon"的缩写）是显示在浏览器标签页、书签和地址栏中您网站名称旁边的小图标。它帮助用户在多个打开的标签页中快速识别您的网站，并强化您的品牌形象。

现代网站需要多种尺寸和格式的 Favicon，以确保在不同浏览器、设备和平台上的兼容性 — 从桌面浏览器到 iOS 主屏幕和 Android 应用启动器。

专业提示：设计精良的 Favicon 可以提高品牌认知度，帮助用户更高效地在多个浏览器标签页之间导航。

为什么需要多个 Favicon 尺寸

桌面浏览器

16×16 和 32×32 — 标准浏览器标签页图标
48×48 — Windows 任务栏和网站快捷方式

移动设备和 PWA

180×180 — iOS 主屏幕的 Apple Touch Icon
192×192 和 512×512 — Android 和渐进式网络应用图标

此工具从单个图像生成所有这些尺寸，省去了手动调整和转换每个尺寸的麻烦。

如何使用 Favicon 生成器

上传您的图像

点击上传区域或拖放图像文件。支持的格式包括 PNG、JPG、SVG、WebP 和 GIF。为获得最佳效果，请使用最小尺寸为 512×512 像素的正方形图像。

最佳实践：使用高分辨率正方形图像（512×512 或更大）以确保所有尺寸的输出清晰。

自定义设置

形状 — 在正方形（标准 Favicon）、圆角（现代外观）或圆形（应用风格图标）之间选择
背景 — 保持透明或在图标后面设置纯色
内边距 — 调整图标周围的间距（0% 至 40%）以留出呼吸空间

预览

在预览网格中查看您的 Favicon 在所有标准尺寸下的外观。浏览器标签页模拟显示它在真实浏览器标签页中的确切显示方式。

下载

ICO — 下载包含 16×16、32×32 和 48×48 尺寸的 favicon.ico
PNG — 下载单个 32×32 PNG 文件
Apple Touch — 下载 180×180 的 apple-touch-icon.png
全部下载 — 获取包含所有尺寸（ICO + 8 个 PNG）、可直接使用的 HTML 代码和 site.webmanifest 文件的 ZIP 文件

功能

多种输出格式

生成 ICO 格式的 Favicon（浏览器使用的传统多尺寸图标文件）和每种标准尺寸的单个 PNG 文件。

包含 16×16、32×32 和 48×48 的 ICO 文件
所有尺寸的单个 PNG 文件
最大浏览器兼容性

形状自定义

从三种形状选项中选择以匹配您的品牌风格。

正方形 — 经典 Favicon 外观
圆角 — 具有比例角的现代柔和外观
圆形 — PWA 的干净应用风格图标

背景和内边距控制

为具有透明度的徽标设置自定义背景颜色，或保持透明以获得干净的外观。

自定义背景颜色
透明背景支持
可调节内边距（0% 至 40%）

实时浏览器标签页预览

在下载前查看您的 Favicon 在真实浏览器标签页中的确切显示方式。

实时预览更新
准确的浏览器标签页模拟
自信地微调

完整的 Favicon 包

"全部下载"选项在一个 ZIP 文件中为您提供所需的一切。

favicon.ico + 所有 8 个 PNG 尺寸
可直接使用的 HTML 链接标签
用于 PWA 支持的 site.webmanifest

您的数据保持私密

所有处理都在 您的浏览器中 进行：

无上传 — 图像永远不会离开您的设备
无跟踪 — 我们不收集使用数据
100% 客户端处理

常见问题

为获得最佳效果，我应该使用什么图像尺寸？

使用至少 512×512 像素 的正方形图像。这确保最大输出尺寸（PWA 的 512×512）保持清晰。非正方形图像会自动适配并在 Favicon 边界内居中，同时保持其宽高比。

推荐：为获得专业效果，请使用矢量图形（SVG）或 1024×1024 或更大的高分辨率 PNG 文件。

ICO 和 PNG Favicon 之间有什么区别？

ICO 格式

传统多尺寸文件

在一个文件中包含多个尺寸
所有浏览器原生支持
16×16、32×32、48×48 的单个文件
最适合旧版浏览器支持

PNG 格式

现代单个文件

每个尺寸的单个图像文件
使用 HTML 链接标签指定
更好的质量和透明度
现代浏览器首选

为获得最大兼容性，请同时使用两者：ICO 文件作为备用，PNG 文件用于现代浏览器。

我需要所有 Favicon 尺寸吗？

最低要求：

favicon.ico（16/32/48）用于桌面浏览器
apple-touch-icon.png（180×180）用于 iOS

完整覆盖（推荐）：

上述所有最低尺寸
192×192 和 512×512 用于 Android 和 PWA
用于渐进式网络应用的 site.webmanifest 文件

快速解决方案："全部下载"选项包含完整平台覆盖所需的一切。

如何将 Favicon 添加到我的网站？

上传文件

将 Favicon 文件放在您网站的根目录中（index.html 所在的位置）。

添加 HTML 代码

从包含的 favicon-usage.html 文件中复制 HTML 链接标签，并将其粘贴到您页面的 <head> 部分。

测试

清除浏览器缓存并重新加载您的网站以查看新的 Favicon。

包含："全部下载"ZIP 包含带有所有必要链接标签的可直接使用的 HTML 代码。

我应该选择哪种形状？

正方形

传统网站和专业品牌的标准选择。

最常见

圆角

适合具有柔和美感的现代友好品牌。

现代

圆形

理想用于应用风格的图标，特别是 PWA 或移动主屏幕。

应用风格

预览每个选项以查看哪个最适合您的徽标。

我可以使用透明背景吗？

可以，支持透明背景并默认选中。这对于放在不同网站背景上的徽标效果很好。

重要提示：某些平台（如 iOS）在透明图标后面显示白色或黑色背景，因此请考虑为 Apple Touch Icon 使用纯色背景。

最佳实践：

为桌面 Favicon 使用透明背景
为移动主屏幕图标考虑纯色背景
在浅色和深色浏览器主题上测试您的 Favicon