Favicon 资源生成器

在浏览器中生成完整的网站图标资源包，包括 ICO、PNG、Apple 触屏图标、PWA 图标、Web 应用清单和 HTML 代码片段

源图像

拖入或选择一个 PNG、JPEG、WebP 或 SVG 文件。除非在下方单独覆盖，否则所有平台都会使用这张图

完整应用名称过长时使用

可选。留空时会从 manifest 中省略

已安装 PWA 启动时打开的地址

作为 HTML 代码片段中每个 href 和 manifest icons 数组中每个 src 的前缀

显示模式

控制 manifest 中的 theme_color 以及 HTML 中的 <meta name="theme-color"> 标签

manifest 的 background_color。浏览器在 PWA 启动画面上使用此颜色

边距: 0%图标内源图像周围的留白空间

预览

在浏览器、搜索结果与主屏幕等场景中查看生成资源的样张

生成资源包后，即可在下方界面中查看 favicon 的合成效果

App
桌面浏览器标签页
App
搜索引擎结果

Apple 图标必须不透明，所以始终会应用此填充

边距: 0%图标内源图像周围的留白空间

预览

在浏览器、搜索结果与主屏幕等场景中查看生成资源的样张

生成资源包后，即可在下方界面中查看 favicon 的合成效果

App
iOS 主屏幕

边距: 0%图标内源图像周围的留白空间
可遮罩图标安全区边距: 40%W3C 推荐的安全区域为 40%。源内容在任何平台的遮罩内都将保持可见

预览

在浏览器、搜索结果与主屏幕等场景中查看生成资源的样张

生成资源包后，即可在下方界面中查看 favicon 的合成效果

App
Windows 任务栏
App
Android 启动器

生成的资源包

点击生成即可渲染所有资源、构建 zip 包并复制 HTML 代码片段

还没有资源包

选择一张图片并点击生成，即可组装 favicon 资源包

本工具生成什么

将一张图片生成完整的 favicon 资源包，包含多尺寸 .ico、16 / 32 / 180 / 192 / 512 等尺寸的 PNG、可选的原始 .svg、PWA 所需的 site.webmanifest，以及可粘贴到 <head> 的 HTML 代码。全部内容在浏览器本地生成，无需上传或服务器处理，也不进行统计追踪

资源包内容

  • favicon.ico —— 多图像格式（16 / 32 / 48），用于浏览器标签页、书签以及旧版 Windows 快捷方式
  • favicon-16x16.png 和 favicon-32x32.png —— 现代浏览器使用的 PNG 变体
  • favicon.svg —— 仅当你的源图片为 SVG 且开启了"使用原始 SVG" 开关时才会包含
  • apple-touch-icon.png —— 180×180，不透明，用于 iOS 主屏幕
  • pwa-192x192.png 和 pwa-512x512.png —— 标准 PWA 图标
  • pwa-maskable-192x192.png 和 pwa-maskable-512x512.png —— 带有 W3C 推荐安全区域的可遮罩变体
  • site.webmanifest —— 已与上述图标关联的 PWA 清单文件

内边距、背景和可遮罩安全区域的工作方式

每个平台可单独设置边距，在图标周围保留留白。“添加背景”会在源图片后填充不透明方形，适合 Apple 主屏幕等要求不透明图标的场景，也可增强图标对比度。可遮罩 PWA 图标会在平台边距之外保留安全区域：中心约 80% 以外的内容，可能被 Android、Windows 或 ChromeOS 的圆形、圆角或方圆形遮罩裁掉

将资源包接入你的网站

  1. 将下载的压缩包解压到你的网站根目录（使文件位于 /favicon.ico、/site.webmanifest 等路径下）
  2. 将 HTML 代码片段粘贴到网站的 <head> 中
  3. 若静态资源位于子路径（例如 /static/icons/），请在生成前设置“资源路径”，让代码和清单文件使用正确的 URL
  4. 如果你对清单文件做了本工具未提供的自定义（例如添加 categories 或 screenshots），请直接用文本编辑器打开 site.webmanifest 进行编辑 —— 它就是普通的 JSON

使用方法

选择图片，调整站点颜色与路径，然后下载 ZIP