Favicon 和 PWA 图标生成器

上传一次,就能得到浏览器标签页和主屏幕需要的所有图标,以及引用它们的标签。

制作你的 favicon 套装

SVG, PNG, JPG, WebP, HEIC · 最大 8 MB · 你自己的文件和已解锁的结果免费

登录后可使用你已解锁的结果。 最多 45 个字符,会写入 site.webmanifest。 最多 12 个字符:主屏幕上图标下方的名称。
背景色会填充 180 px 的 Apple touch 图标和 maskable 图标。内边距适用于这些图标以及 192 和 512 px 的应用图标;标签页 favicon 使用完整的正方形。 文件将存放的文件夹,例如 / 或 /icons/。它决定 HTML 标签中的路径。

这个工具能做什么

用一张图片生成网站需要的所有图标:favicon.ico、PNG favicon、SVG favicon(来自 SVG)、使用你的背景色的 Apple touch 图标,以及网页应用图标,包括手机按自身形状裁切后依然清晰的 maskable 图标。ZIP 中还有 site.webmanifest 和 favicon.html,也就是可直接粘贴到页面中的标签。PNG、JPG、WebP 或 HEIC 可生成除 SVG favicon 以外的所有图标;这个工具不做描摹。

出于安全考虑,脚本、动画、嵌入的网页内容、链接以及任何会加载其他文件的内容都会被移除;你的图稿以及内嵌的 PNG、JPEG 或 WebP 图片会保留。结果中会列出所有被移除的内容。

输入、输出与限制

输入

SVG、PNG、JPEG、WebP 或 HEIC

输出

包含 favicon.ico、PNG favicon、SVG favicon(SVG 源文件时)、Apple touch 图标、PWA 图标、site.webmanifest 和 HTML 标签的 ZIP

限制

文件最大 8 MB;PNG、JPG 和 WebP 图片最多 24 百万像素,导出前会缩放到 1,536 px。它会生成包含 16、32、48 px 图像的 favicon.ico、16 和 32 px 的 PNG favicon、180 px 的 Apple touch 图标和 192 和 512 px 的应用图标,每个应用图标还有一个 maskable 版本,其图稿保持在安全区内(居中的圆形,半径为图标尺寸的 40%)。处理时限:30 秒。

使用方法

1

选择你的图稿

上传 SVG 可获得最清晰的图标和 SVG favicon,也可以上传 PNG、JPG、WebP 或 HEIC。登录后,还可以改选一个已解锁的结果。

2

命名并选择颜色

名称和短名称会写入 web manifest。主题色是部分浏览器为界面着色时使用的颜色;背景色会填充 Apple touch 图标和 maskable 图标。

3

上传文件并粘贴标签

把 ZIP 中的所有文件放到你设定为路径前缀的文件夹中,然后把 favicon.html 中的标签粘贴到每个页面的 head 中。ZIP 里的 README 说明了每个文件的用途。

常见问题排查

为什么没有 favicon.svg?

只有完全由矢量图形构成的 SVG 才能生成 SVG favicon。PNG、JPG、WebP、HEIC,或内嵌图片的 SVG,会改为生成 PNG 和 ICO favicon,结果中会注明。

仍显示旧图标

浏览器会长时间缓存 favicon。用无痕窗口打开页面,或清除该网站的数据,就能看到新文件。

标志在 maskable 图标中显得太小

启动器可能会把 maskable 图标裁成圆形,所以图稿会缩放到圆形安全区内。减小内边距可让它变大;圆形标志可以填满整个圆。

路径前缀会改变 manifest 吗?

不会。site.webmanifest 中的图标路径是相对于 manifest 的,只要文件放在一起,放在哪个文件夹都能用。前缀设置的是 favicon.html 中的路径。

使用权限与价格

对你上传的文件或已解锁的结果使用此工具不消耗积分。 访客文件保留 24 小时,账户文件保留 30 天。详见价格。

Favicon 和 PWA 指南

SVG、PNG 还是 ICO:favicon 格式怎么选PWA maskable 图标:安全区域与设置

相关工具

制作你的应用图标Android 和 iOS 资源包SVG 转 PNG 转换器将 SVG 渲染为 PNG,最高 4,096 pxSVG 优化器压缩 SVG,外观不变在线 SVG 编辑器在浏览器中改色、改形和导出