Favicon 和 PWA 图标生成器

01
源图片
或者使用 AI 生成
02
配置平台
已选 1 个平台
03
预览

1 个平台

等待上传图片

上传图片后,您可以实时预览每个平台的效果

源图片

帮助改进图标工具

上传图片、选择平台或导出时遇到问题?请告诉我们所在页面、浏览器、所选平台和复现步骤。

联系表单将在新标签页打开,当前制作进度会保留在这里。不会自动附带图片或设置,请勿填写机密信息。

反馈工具问题(在新标签页打开)
工具帮到你了吗?
导出素材之后,欢迎用一杯咖啡支持作者继续维护免费体验。
  • 全部处理在浏览器本地完成,图片不会上传服务器。
  • 一次导出覆盖 iOS、Android、Chrome 等主流平台。

每一杯咖啡都将用于服务器成本和功能迭代。

Favicon 是在浏览器标签页中代表您网站的小图标。对于渐进式 Web 应用 (PWA),您还需要 Web 清单和用于移动主屏幕的更大图标。

安装网站小图标与 PWA 图标

Web ZIP 包含 favicon.ico、16/32 px PNG、180 px Apple touch 图标、192/512 px PWA 图标、site.webmanifest 和 1200x630 的 og.png。

Web ZIP 文件说明

两张 PWA PNG 是普通正方形图标,文件名与尺寸对应 site.webmanifest 的 icons 数组;og.png 是独立的分享图片。

将图标接入网站

  1. 将 Web 内的文件复制到网站公开目录并发布到域名根路径,或按所选目录调整引用。
  2. 修改 site.webmanifest 的 name 和 short_name。start_url 与 scope 相对 manifest 所在位置;导出的图标路径以 / 开头。图标放在子目录时,请修改这些路径。
  3. 在 HTML head 添加 manifest、favicon 与 Apple touch 引用。使用 HTTPS 或 localhost。在浏览器开发者工具中检查 manifest,并确认每个图标 URL 返回图片,而非 HTML 回退页。
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

这些图标未按 maskable 素材设计。ZIP 不添加 service worker 或离线功能,只有图标不能保证可安装。请在目标浏览器和设备上测试。

阅读 Web、PWA 与 Chrome 集成指南

先设计图案,再导出平台文件

分别检查 favicon.ico、PNG 图标和 manifest 示例,替换示例路径,部署后测试浏览器标签与已安装的 PWA。

AI 创作按积分计费,请先查看显示的费用;图标缩放和平台文件导出免费。

维护方内容复核日期:联系维护者

复核范围为页面说明和已声明的工具能力。发布前,请在自己的项目中检查导出文件。

平台参考资料:Web App Manifest