Favicon 在线生成器：制作 ICO 与 PNG 图标

适配所有浏览器和设备的 Favicon 生成器

这款 favicon 生成器能把一张图片变成网站所需的全部图标文件 — 多尺寸的 favicon.ico、从 16×16 到 512×512 的各张 PNG、Apple Touch 图标以及 PWA 清单。上传 logo 或图片，微调外观，即可下载一份开箱即用的图标包。

它适合所有要上线网站的人：开发者、设计师、博主，以及希望快速得到清晰浏览器标签页图标、又不想逐一手动缩放和转换的小企业主。支持的原始格式包括 PNG、JPG、SVG、WebP 和 GIF，导出前还能调整图标的形状、内边距和颜色。

隐私优先设计：你的图片完全在浏览器中读取、缩放并打包，不会上传到任何服务器，也不会记录任何使用行为。

如何制作 Favicon

上传图片

点击上传区域或直接拖放文件。支持 PNG、JPG、SVG、WebP 和 GIF。要获得最清晰的效果，请使用至少 512×512 像素的方形图片。

自定义外观

选择形状 — 方形、圆角或圆形 — 选用透明或纯色颜色背景，再拖动内边距滑块（0–40%），为图标留出适当空间。

预览每种尺寸

预览网格会以各种标准尺寸展示你的 favicon，浏览器标签页效果图则真实呈现它在实际标签页中的样子。每次调整设置时，一切都会即时更新。

下载所需文件

获取 favicon.ico（16/32/48）、单张 32×32 PNG、180×180 的 Apple Touch 图标，或使用全部下载得到含所有尺寸、HTML 代码和清单的 ZIP 包。

功能特点

拖放上传

拖入图片或使用文件选择器。支持 PNG、JPG、SVG、WebP 和 GIF 原始文件。

形状选项

经典网站图标选方形，柔和边角选圆角，应用风格图标选圆形。

背景与内边距

保留透明背景或设置纯色背景，再把内边距从 0% 调到 40%。

实时标签页效果图

真实呈现 favicon 在浏览器标签页中的样子，调整设置时即时更新。

8 种尺寸预览

下载前可在 16、32、48、64、128、180、192 和 512 像素下查看图标。

ICO 与 PNG 输出

导出内嵌 16/32/48 的 favicon.ico、单张 32×32 PNG，或 180×180 的 Apple Touch 图标。

完整 ZIP 图标包

全部下载会打包 favicon.ico、全部 8 种 PNG 尺寸、可直接粘贴的 HTML，以及 site.webmanifest。

支持 Apple 与 PWA

附带 apple-touch-icon，以及含 192 和 512 图标的清单，支持 Android 和 PWA。

隐私且离线

每次缩放和转换都在浏览器中进行 — 图片绝不上传，也不记录任何数据。

常见问题

favicon 应该用多大尺寸？

建议从至少 512×512 像素的方形图片开始，这样即使是最大的输出也能保持清晰。浏览器标签页图标本身通常是 16×16 和 32×32，但现代网站还会用到 48×48、180×180 的 Apple Touch 图标，以及面向 Android 和 PWA 的 192×192 / 512×512。本工具会从你的一张图片生成全部这些尺寸。

如何制作 favicon.ico？

上传图片，调整形状、背景和内边距，然后点击 ICO 下载。工具会生成一份内嵌 16×16、32×32 和 48×48 版本的 favicon.ico，这正是浏览器在你网站根目录所寻找的经典格式。

可以用 PNG 或 SVG 制作 favicon 吗？

可以。你可以上传 PNG、JPG、SVG、WebP 或 GIF 作为原始图片。高分辨率的 PNG 或矢量 SVG 效果最干净，因为缩小到小尺寸时也不会发糊。非方形图片会在保持原始宽高比的前提下居中适配。

ICO 和 PNG 格式的 favicon 有什么区别？

ICO 是传统的 favicon 格式，可在一个文件中容纳多种尺寸，浏览器原生支持。PNG 格式的 favicon 是按尺寸分别引用的独立文件，通过 HTML link 标签声明。为兼顾最广的兼容性，两者都用：以 favicon.ico 作为后备，再用 PNG 适配现代浏览器 — 全部下载的图标包已把它们打包在一起。

如何把 favicon 添加到 HTML 中？

把下载的 favicon 文件放到网站根目录，然后把 link 标签粘贴进页面的 <head> 中。全部下载的 ZIP 包含一个 favicon-usage.html 文件，里面有图标、Apple Touch 图标和清单所需的确切 <link> 标签，可直接复制使用。

应该选哪种形状？

方形是大多数网站的标准外观。圆角加入柔和边角，带来现代而友好的感觉；圆形适合应用风格的图标，尤其是 PWA 或手机主屏幕。预览网格让你在导出前用自己的 logo 对比每种形状。

可以使用透明背景吗？

可以 — 透明是默认设置，适合需要显示在不同页面背景上的 logo。某些平台（如 iOS）会在透明图标后面铺一层白色或黑色面板，因此如果你在生成 Apple Touch 图标，可能更适合设置一个纯色背景。