Favicon 生成器

将图片生成多尺寸网站图标和 HTML 引用代码

本工具在浏览器本地运行，不会上传你的数据，保护你的隐私安全。

点击上传或拖拽图片

支持 PNG、JPG、SVG

这是什么工具？

Favicon 生成器可以将 PNG、JPG、SVG 图片生成网站所需的多尺寸图标。支持生成 16x16、32x32、48x48、180x180、192x192、512x512 等常用尺寸，自动生成对应的 HTML link 标签和 PWA manifest 图标配置。支持裁剪为正方形图标，打包 ZIP 下载。所有处理在浏览器本地完成。适用于站长快速生成网站图标和 PWA 图标。

如何使用？

1 上传 PNG、JPG 或 SVG 图片
2 裁剪预览为正方形图标
3 选择需要的尺寸
4 复制 HTML 代码或下载图标包

常见问题

Favicon 是什么？

Favicon 是浏览器标签页、收藏夹和快捷方式中显示的网站图标。

需要哪些尺寸？

建议至少提供 16x16、32x32、180x180、192x192 和 512x512。

可以生成 HTML 代码吗？

可以，工具会生成 link 标签，方便直接复制到网站 head 中。

图片会上传服务器吗？

不会，图标生成在浏览器本地完成。

适用场景与示例

新网站或新项目快速生成全套 favicon 图标
生成 PWA / 移动端所需的 manifest 图标（192/512）
生成 Apple Touch Icon（180×180，iOS 添加到主屏用）
一次性打包多尺寸图标 + HTML 引用代码

输入

一张 512×512 的 PNG logo

输出

16/32/48/180/192/512 多尺寸图标 + HTML link 标签 + manifest 配置

💡 不同平台取不同尺寸，一次生成全套最省心。

原理与常见错误

Favicon（favorite icon）是显示在浏览器标签页、收藏夹和主屏快捷方式上的网站图标，看似简单实则要适配多个平台和尺寸：浏览器标签用 16×16/32×32，iOS 添加到主屏用 180×180 的 Apple Touch Icon，安卓 PWA 需要 192×192 和 512×512 写进 manifest.json，Windows 磁贴用 144×144。现代做法是用一张高清源图（建议 ≥512×512 的 PNG，最好带透明），用 Canvas 缩放到各个尺寸，再生成对应的 <link rel="icon" sizes="...">、<link rel="apple-touch-icon"> 标签和 manifest 的 icons 配置。源图同样要简洁高对比——favicon 在 16×16 这种极小尺寸下显示，细节太多会糊成一团。SVG favicon（可无损缩放、支持暗色模式）是较新的方案，但老浏览器仍需 PNG/ICO 回退。

⚠️ 标签页图标不显示或没更新

检查 link 标签的路径和 sizes 是否齐全；浏览器强缓存，强刷或在 URL 后加版本号参数。

⚠️ 小尺寸下图标糊成一团

源图太复杂；favicon 应使用简洁、高对比的图形。

⚠️ iOS 主屏图标不对

需要单独的 apple-touch-icon（180×180），iOS 会自动加圆角和底色。

⚠️ PWA 安装后图标缺失

manifest.json 的 icons 数组要包含 192 和 512 等 PNG 尺寸。

参考与更新

最后更新：2026-06-29