Favicon 生成

一键生成多尺寸 PNG favicon 套装

选择图片

全尺寸下载

现代浏览器均支持 PNG favicon:16 与 32 用于浏览器标签页,48 用于桌面快捷方式,180 建议用作 apple-touch-icon,192 与 512 用于 PWA manifest 图标。生成后将下载的文件放到网站根目录并按提示引用即可。

使用说明

Favicon 是网站在浏览器标签页、收藏夹、历史记录与手机主屏幕上显示的小图标,不同场景需要不同尺寸:16 与 32 用于标签页,48 用于桌面快捷方式,180 用作 apple-touch-icon,192 与 512 用于 PWA manifest。本工具把上传的图片取中心裁成正方形,再一次性生成 8 个尺寸的 PNG 套装,逐个点击下载即可,无需设计软件或命令行。

使用方法:选择一张图片(正方形效果最佳,非正方形会自动居中裁剪),点击「生成 Favicon 套装」,等待 8 个尺寸全部完成后逐个下载。将文件上传到网站根目录,在页面 head 中用 link 标签引用,PWA 站点还需在 manifest 中登记 192 与 512 图标。全部处理在浏览器本地完成,图片不上传,无需注册。

常见问题

favicon 至少需要哪些尺寸?

最基础的是 16 与 32 供浏览器标签页使用;要支持 iOS 主屏幕图标,再加 180 的 apple-touch-icon.png;PWA 应用还需要 192 与 512。本工具一次生成全部 8 个尺寸,按需取用即可。

如何在网页中引用生成的图标?

把下载的 PNG 文件放到网站根目录,在 head 中加入 link 标签引用,例如 rel=icon、type=image/png、href=/favicon-32x32.png。苹果触屏图标用 rel=apple-touch-icon 指向 180 尺寸;PWA 则在 manifest 中登记 192 与 512 两个图标。

原图不是正方形怎么办?

没关系。工具会自动取图片中心最大的正方形区域裁剪并缩放,请确保重要内容位于画面中部。想完全控制裁剪范围,可先用图片编辑器把原图裁成正方形,或使用图片调整尺寸工具。