Favicon 生成器 — ICO、Apple Touch、Web Manifest、PWA

用一张 PNG、JPEG 或 WebP 生成全套现代 favicon：真正的多帧 favicon.ico、标准 PNG、不透明的 apple-touch-icon、site.webmanifest 与 browserconfig.xml，全部在浏览器本地完成。

上传源图片

点击或拖放 PNG、JPEG、WebP

支持不超过 15 MB 的 PNG、JPEG、WebP —— 格式按文件字节校验，而不是扩展名

图片在本地解码与缩放，不会上传。

一张图片，覆盖所有 favicon 尺寸

浏览器、iOS、Android 与 Windows 会各自寻找不同的 favicon 文件。本工具从一张源图渲染所有必需尺寸，无需手工导出：多帧 favicon.ico（16/32/48 像素）、16 与 32 像素 PNG、180 像素 apple-touch-icon、192 与 512 像素的 Android Chrome 图标，以及 150 像素的 Windows 磁贴。

.ico 是真正带 PNG 帧的 ICONDIR 容器，而不是改名的 PNG。压缩包还包含 site.webmanifest 与 browserconfig.xml，README 里给出了可直接复制的 HTML <head> 代码片段。

如何生成 favicon 全套

1
拖入 PNG、JPEG 或 WebP 图片。格式按文件头字节校验，不信任扩展名。
2
设置站点名称与主题颜色，然后选择图片适配方式（包含、裁切或拉伸）与背景。
3
点击“生成 favicon 全套”——每张 PNG 和 .ico 都会按原生分辨率渲染。
4
下载 ZIP，把文件复制到网站根目录，并把 README 里的 <head> 片段粘贴到页面中。

压缩包里有什么

每次生成都会产出下列文件。favicon.ico 会在编码后重新读取容器与每帧像素尺寸进行校验，才提供下载。

文件	用途
favicon.ico	旧浏览器与标签页 —— 多帧 ICO（16/32/48 像素）。
favicon-16x16.png / favicon-32x32.png	现代浏览器，配合 PNG <link> 标签使用。
apple-touch-icon.png	iOS Safari 主屏幕图标（必须不透明）。
android-chrome-192x192.png / 512x512.png	Android Chrome 主屏幕图标与 PWA 安装提示。
mstile-150x150.png	Windows 开始菜单 / 任务栏固定磁贴。
site.webmanifest	引用 192 与 512 像素图标的 PWA manifest。
browserconfig.xml	Windows 磁贴背景颜色。
README.txt	安装步骤与 HTML <head> 代码片段。

如何安装

把文件复制到网站根目录，然后在每个页面的 <head> 中加入以下标签：

  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">
  <meta name="msapplication-TileColor" content="#FFFFFF">
  <meta name="theme-color" content="#FFFFFF">

theme-color 与 msapplication-TileColor 与你选择的颜色一致。文件保持标准命名，无需额外配置。

为什么 apple-touch-icon.png 不透明

iOS 会忽略主屏幕图标的 alpha 通道，并把它替换成黑色，看起来像坏图。因此本工具用不透明背景渲染 apple-touch-icon.png —— 默认白色，或你选择的颜色；其他 PNG 则保留你选择的透明度。

即使源图本身是透明背景，选择“透明”设置时 apple 图标仍然不透明，因为只有该文件被强制不透明。

隐私

图片通过 createImageBitmap 解码，并用 Canvas 在浏览器内渲染。没有上传、没有服务器端转换、没有账号。ZIP 由 JSZip 在内存中打包。

常见问题

favicon.ico 是真正的 ICO 文件吗？

是。它是包含 16、32、48 像素 PNG 帧的 ICONDIR 容器。编码完成后工具会重新读取文件，确认容器结构与每一帧的像素尺寸。

我的图片会被上传吗？

不会。解码、缩放、编码和 ZIP 打包全部在浏览器中完成。

为什么 apple-touch-icon.png 不透明？

iOS 会把主屏幕图标的 alpha 通道替换成黑色。为避免这个问题，180 像素的 apple 图标以不透明背景渲染（默认白色，或你选择的颜色）。

哪些文件是必须的？

最低限度 favicon.ico 与 favicon-32x32.png 就能覆盖所有现代浏览器。再加 apple-touch-icon.png 用于 iOS，192/512 像素图标与 site.webmanifest 用于 Android/PWA，mstile-150x150.png 用于 Windows 磁贴。README 对每个文件都有说明。

会生成 safari-pinned-tab.svg 吗？

不会 —— 该文件是单色矢量图，无法从位图源图推导。如需 Safari 固定标签支持，请从矢量素材提供该文件；README 中也已注明。

生成后修改设置会怎样？

上一份结果会失效，系统会按新的适配方式、背景或颜色从源图重新渲染全套，保证下载内容始终与当前设置一致。

发现此工具有问题？

报告问题