ZeroTool Workbench

Favicon 生成器

从 emoji、文字、图片或 SVG 一键生成完整网站图标包，包含 ICO、多尺寸 PNG、apple-touch-icon 和 webmanifest。纯浏览器端运行，零上传。

100% 浏览器端运行 数据不离开你的设备 免费 · 无需注册
Background
Shape
Live preview 16 / 32 / 64 / 180 px
16 px
32 px
64 px
180 px

相关工具

SVG 转 PNG 工具 在线将 SVG 转换为 PNG，支持上传文件或粘贴代码，可选输出尺寸和背景色。Canvas API 纯浏览器端运行。 WebP 转换器 在线将 PNG/JPG/GIF 转 WebP 或 WebP 转 PNG，支持批量转换、质量调节和文件大小对比。纯浏览器端运行。 图片转 Base64 工具 将图片转换为 Base64 字符串和 Data URI，支持 PNG、JPEG、GIF 等格式。 EXIF 元数据查看器 在线查看并移除 JPEG 照片的 EXIF 元数据——一键剥离 GPS 位置、相机信息和时间戳。纯浏览器端运行，零上传。 JSON 格式化 在浏览器中即时美化、压缩和验证 JSON，实时高亮语法错误。 Base64 编码 / 解码 将文本编码为 Base64，或将 Base64 解码为纯文本。

为什么仍然需要一整套 favicon

网站图标早已不只是浏览器标签上的小图。它出现在搜索结果中域名旁边、收藏夹里、iOS 用户把网站添加到主屏幕时的图标位、Android 的 PWA 安装卡片上。每个场景需要的尺寸不同，少数场景还要求略不同的格式。只放一个 favicon.ico 在视网膜屏和可安装 PWA 上会留下肉眼可见的毛刺。

本工具一键产出整套现代图标：兼容旧浏览器的 ICO、对应现代 <link rel=“icon”> 栈的多尺寸 PNG、iOS 用的 apple-touch-icon，以及含 maskable Android 图标声明的 webmanifest。

使用方法

  1. 选择一种素材。四个标签分别接受 emoji（预设或自由粘贴）、1–4 个排版字符、上传的 PNG/JPG/SVG 图片（≤ 10 MB），或粘贴的 SVG 代码。
  2. 设置背景与形状。透明适合带蒙版的设计，纯色适合品牌标识。形状提供方形、圆角（12.5% 圆角半径）和圆形三种。Padding 滑块让内容远离安全区边缘。
  3. 盯紧实时预览。四个关键尺寸 16/32/64/180 px 同步渲染。16 和 32 px 决定你的图标在标签栏是否清晰；180 px 是 iOS 主屏图标。
  4. 点击 Generate package。浏览器约 1 秒内产出 11 个文件。Download ZIP 一键保存；Copy HTML snippet 复制需粘贴到 <head> 的 <link> 标签。

HTML 片段说明

生成的代码片段约 7 行，覆盖每个现代场景：

  • <link rel=“icon” type=“image/x-icon” href=“/favicon.ico”> — 老浏览器和仍优先解析 favicon.ico 的收藏夹的兜底。
  • <link rel=“icon” type=“image/png” sizes=”…”> 16/32/48 三档 — 现代浏览器优先选择匹配 sizes 属性的 PNG，跳过 ICO。
  • <link rel=“apple-touch-icon”> 180×180 — iOS Safari 在「添加到主屏幕」时使用。
  • <link rel=“manifest”> — Android Chrome 和 PWA 安装器读取 site.webmanifest，里面用 purpose: “any maskable” 声明 192 与 512 PNG。
  • <meta name=“theme-color”> — 控制移动端浏览器地址栏与已安装 PWA 标题栏的颜色。

图标包是怎么生成的

渲染器对每个目标尺寸单独建立 canvas，应用所选的背景与形状蒙版，按 padding 偏移把素材居中绘制，再调用 canvas.toBlob(‘image/png’) 取得紧凑的 PNG 数据。16/32/48 三个 PNG 通过 PNG 压缩条目格式打包成单一 favicon.ico——三段 PNG 数据接在 ICONDIR 头和三条 16 字节 ICONDIRENTRY 之后。

ZIP 写入器使用 STORED 方法（不做 DEFLATE）：PNG 本身已经是压缩格式，再做 DEFLATE 收益不足 1%，却要多带 5 KB 代码。文件名在通用位标志中标记 UTF-8，确保未来你给文件改名时非 ASCII 名称也不会乱码。

隐私与离线

  • 页面从不上传你的文件。打开浏览器网络面板观察——点击 Generate 时不会发出任何请求。
  • 页面缓存后可离线工作。Canvas API、ZIP 与 ICO 写入器全部内联在页面包里。
  • 无追踪像素。我们仅记录一次 generate 和 download 事件用于使用量统计，事件载荷只含工具名。

常见坑

  • SVG 含外链图片。 当 SVG 引用 <image href=“https://…”> 时浏览器拒绝把 canvas 读回为 blob（跨域污染）。粘贴前先把外链图片转成 Data URI 内联。
  • Linux 工作机上 emoji 显示空框。 某些 IT 管控的 Linux 发行版未预装彩色 emoji 字体。预览会显示空框，切到 Text 或 Image 标签即可绕过。
  • 16 px 上的细节会消失。 线宽小于 1.5 px 在 16×16 上会消失。如果 32 上清晰、16 上没了，把设计简化或用背景色提供分割。

FAQ

生成的图标包里都有什么？

共 11 个文件：favicon.ico（包含 16/32/48 三个尺寸，PNG 压缩格式），六个独立 PNG（16/32/48/64/96/128），180×180 的 apple-touch-icon.png，192 和 512 两个 android-chrome PNG，以及 site.webmanifest。把它们放到站点根目录，将 HTML 片段粘贴到 <head>，浏览器、iOS、Android、PWA 安装场景就全覆盖了。

我的文件会被上传到服务器吗？

不会。所有操作都在浏览器中通过 Canvas API 完成——图像解码、多尺寸重采样、ICO 与 ZIP 打包，全部由 JavaScript 在本地执行。打开开发者工具的 Network 面板，点击 Generate 时你看不到任何上传请求。

为什么我的 emoji 在 Windows 和 macOS 上看起来不一样？

每个操作系统自带一套彩色 emoji 字体（macOS 的 Apple Color Emoji、Windows 的 Segoe UI Emoji、Linux/Android 的 Noto Color Emoji）。生成器使用的是你当前机器的系统字体。若需要跨平台像素级一致的输出，请切换到 Image 或 SVG 标签，提供自己的位图或矢量 logo。

ICO 用的是 PNG 还是 BMP 条目？

使用 PNG 压缩条目。每个 ICO 帧是独立 PNG，IE 11 之后所有浏览器都支持，Windows Vista 以后的资源管理器也能识别。这样做能保留 alpha 通道、文件更小，并避免老式 DIB/BMP 编码。仅支持 DIB 帧的老系统按设计不在范围内。

可以生成 maskable PWA 图标吗？

可以。192 和 512 PNG 在 manifest 中以 `purpose: "any maskable"` 声明，同时覆盖标准和 maskable 渲染。使用 Padding 滑块让主体留出安全区——选择 Circle 形状时建议至少 10% 内边距，这正是 Android 应用 maskable 圆形蒙版时的裁切边缘。