favicon图标生成器 在线生成网站图标ICO/PNG
favicon图标生成器：从图片生成ICO、PNG、SVG、Apple Touch和PWA各尺寸网站图标，自动裁剪并支持暗色主题，适合网站开发和品牌设计。
更新于 2026-08-16
相关工具
功能特性
- 推荐 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打开任意图片（PNG、JPG、WebP、SVG），工具自动裁剪为正方形。
- 2拖动裁剪手柄选择图标使用的具体区域。
- 3按需调整内边距和背景色。
- 4点击「生成 Favicon」，所有文件即时创建。
- 5从平台标签中选择您的框架，按步骤安装。
- 6保存 ZIP 包，按指引部署到网站。
- 7为获得最佳跨平台兼容性，生成前同时启用 ICO 和 PWA 选项。ICO 文件确保旧浏览器兼容，SVG 图标为现代浏览器提供暗色/亮色主题支持。PWA 图标是 Android 和渐进式 Web 应用安装的必需项。
- 8生成图标后，使用针对您平台（HTML、Next.js、WordPress、Shopify 等）的安装指引标签页。每个指引显示文件的具体放置位置以及添加到 <head> 区域的 HTML 代码，确保浏览器正确识别。
常见问题
favicon图标生成器能生成哪些文件？
按照 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 集成。
应该打开 SVG 还是 PNG？
强烈推荐 SVG。SVG 图标在任何尺寸下都保持矢量质量，支持自动暗色/亮色主题切换，文件也更小。PNG/JPG/WebP 输入也可以，但只能生成栅格输出，没有 SVG 图标支持。打开 SVG 文件可获得最好效果。
为什么 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 等主流工具一致。
能用文字生成 favicon 吗？
本工具从图片文件生成 favicon（SVG、PNG、JPG 或 WebP），纯文字不行。想要文字图标，先创建一个带 <text> 元素的 SVG（或用任意编辑器渲染文字并导出），再打开该文件即可。用 SVG 方案还能保留现代浏览器的暗色主题支持。
为什么 Google 搜索结果里不显示我的 favicon？
Google 在抓取页面时会获取并缓存 favicon，只有后续重新抓取才会刷新，所以更新后可能要等几天甚至几周。请确保 favicon.ico（或链接的图标文件）位于站点根目录且无需登录即可访问，修改后用 Search Console 的网址检查工具提交重新索引。
应该打开什么尺寸的图片？
为获得最好效果，打开至少 512×512 像素的正方形图片。这确保所有生成的图标（从 16×16 ICO 到 512×512 PWA）保持清晰质量。透明背景的简洁 logo 效果最佳。复杂的照片或精细艺术品可能无法很好地缩放到很小的 favicon 尺寸（16×16），应避免用于 favicon。
安装后如何验证 Favicon 是否生效？
安装 Favicon 文件后，清除浏览器缓存并重新加载页面。检查浏览器标签页是否显示图标。如需彻底测试，打开浏览器开发者工具 → 网络面板，过滤 'icon' 查看加载的 Favicon 文件。如果看到 404 错误，检查文件是否在正确的目录且文件名完全匹配。建议在无痕模式下测试以排除缓存影响。
为什么我的 favicon 在 WhatsApp、Slack 等应用里显示不出来？
第三方平台按自己的规则抓取和缓存 favicon，它们可能把旧版本缓存数天、要求特定尺寸、或使用 apple-touch-icon.png（180×180）而不是浏览器标签页的 favicon。你的站点文件没有问题，只是平台还没刷新缓存。确认 apple-touch-icon.png 已就位，并查找各平台的缓存清除或「刷新预览」工具（WhatsApp 的链接预览设置里有）；否则只能等待缓存自然过期。