UFOZoo

Favicon图标生成器 — ICO/PNG/SVG

在线生成网站 Favicon 图标。支持 ICO/PNG/SVG、Apple Touch 及 PWA 输出，提供安装指引。浏览器本地处理，无需上传。

功能特性

  • ✓推荐 SVG 输入——保留矢量质量，支持暗色主题
  • ✓生成 favicon.ico（16+32+48 多尺寸）兼容旧浏览器
  • ✓生成 apple-touch-icon.png（180×180）用于 iOS 主屏幕
  • ✓生成 PWA 图标：icon-192.png、icon-512.png、icon-mask.png（Maskable）
  • ✓交互式裁剪框自动将图片裁剪为正方形
  • ✓自定义背景色处理透明图片
  • ✓所有处理在浏览器本地完成，零上传，完全隐私
  • ✓一键保存所有图标为 ZIP 包
  • ✓提供 11 个框架的安装指引

使用方法

  1. 1打开任意图片（PNG、JPG、WebP、SVG），工具自动裁剪为正方形。
  2. 2拖动裁剪手柄选择图标使用的具体区域。
  3. 3按需调整内边距和背景色。
  4. 4点击「生成 Favicon」，所有文件即时创建。
  5. 5从平台标签中选择您的框架，按步骤安装。
  6. 6保存 ZIP 包，按指引部署到网站。
  7. 7为获得最佳跨平台兼容性，生成前同时启用 ICO 和 PWA 选项。ICO 文件确保旧浏览器兼容，SVG 图标为现代浏览器提供暗色/亮色主题支持。PWA 图标是 Android 和渐进式 Web 应用安装的必需项。
  8. 8生成图标后，使用针对您平台（HTML、Next.js、WordPress、Shopify 等）的安装指引标签页。每个指引显示文件的具体放置位置以及添加到 <head> 区域的 HTML 代码，确保浏览器正确识别。

常见问题

工具生成哪些文件？

∨
按照 2026 年最佳实践生成 6 个文件：favicon.ico（16+32+48 多尺寸，旧浏览器）、favicon.svg（现代浏览器，支持暗色主题）、apple-touch-icon.png（180×180，iOS）、icon-192.png 和 icon-512.png（PWA）、icon-mask.png（512×512，Android 自适应图标）。另附 manifest.webmanifest 用于 PWA 集成。

为什么 HTML 中 favicon.ico 排在第一位？

∨
Chrome 有个 bug：ICO 和 SVG 同时声明时，不加 sizes="any" 会导致 Chromium 把多尺寸 ICO 当作可缩放图标，优先于 SVG 加载并双下载。加上 sizes="any" 后 Chromium 会跳过 ICO，只下载 SVG 图标。Next.js 官方输出 favicon.ico 时默认使用 sizes="any" 来规避此问题。

什么是 Maskable 图标？

∨
Android 自适应图标会将应用图标裁剪为圆形或圆角方形。Maskable 图标在内容周围预留额外边距（安全区为图标的 80%），确保主体不会被裁切。工具单独生成 icon-mask.png 文件，含 10%+ 内边距。

必须生成所有文件吗？

∨
基础网站只需 3 个文件：favicon.ico + favicon.svg + apple-touch-icon.png。PWA 需要额外添加 icon-192.png + icon-512.png + icon-mask.png + manifest.webmanifest。工具生成全部文件，按需使用。

会生成 SVG Favicon 吗？

∨
始终会生成。SVG 输入保留原始矢量质量。PNG/JPG/WebP 输入时，SVG 文件内嵌图片数据。SVG 支持自动暗色/亮色主题切换，推荐所有现代浏览器使用。

如何给图标添加暗色主题支持？

∨
SVG 格式支持 CSS 媒体查询，可通过 @media (prefers-color-scheme: dark) 自动切换颜色。打开 SVG 文件时，工具会保留这一能力。

ICO 包含多个尺寸吗？

∨
是的。工具现在在单个 favicon.ico 中打包 16×16、32×32 和 48×48 三种尺寸。浏览器会自动为每个场景选最优尺寸——标签栏用 16×16，Retina/任务栏用 32×32，Windows 快捷方式用 48×48。这与 RealFaviconGenerator 等主流工具一致。

图片会被上传到服务器吗？

∨
不会。所有处理完全在浏览器中使用 HTML Canvas API 完成。图片不会被上传、存储或传输到任何地方。

应该打开什么尺寸的图片？

∨
为获得最佳效果，打开至少 512×512 像素的正方形图片。这确保所有生成的图标（从 16×16 ICO 到 512×512 PWA）保持清晰质量。透明背景的简洁 logo 效果最佳。复杂的照片或精细艺术品可能无法很好地缩放到很小的 favicon 尺寸（16×16），应避免用于 favicon。

安装后如何验证 Favicon 是否生效？

∨
安装 Favicon 文件后，清除浏览器缓存并重新加载页面。检查浏览器标签页是否显示图标。如需彻底测试，打开浏览器开发者工具 → 网络面板，过滤 'icon' 查看加载的 Favicon 文件。如果看到 404 错误，检查文件是否在正确的目录且文件名完全匹配。建议在无痕模式下测试以排除缓存影响。

相关工具

图片格式转换 — HEIC/JPG/PNG/WebP

图片格式转换工具，支持 HEIC/JPG/PNG/WebP/AVIF/ICO 格式互转。可调节输出质量，支持批量处理多张图片。

图片缩放工具 — 在线缩放旋转翻转图片调整尺寸

在线缩放图片，适应/填充/拉伸三种模式，可按像素或百分比调尺寸，支持旋转翻转。输出 JPEG/PNG/WebP。浏览器本地处理，不上传服务器。

图片裁剪工具 — 在线裁剪图片去除多余边缘和空白

在线裁剪图片，交互式裁剪框精确选择要保留的区域，去除多余边缘。输出 JPEG/PNG/WebP，可调质量。浏览器本地处理，图片不上传服务器。

在线图片编辑工具 — 添加水印、滤镜与颜色调整

图片编辑工具，添加可自定义的文字水印。应用黑白、怀旧和模糊滤镜，调节亮度和对比度。支持 JPG/PNG/WebP 输出。所有处理在浏览器本地完成。