Favicon 生成器
上传图片或直接输入文字、Emoji，生成含 16/32/48 三个尺寸的 favicon.ico 与各平台 PNG 图标，并给出可直接粘贴的 HTML 代码。
浏览器标签页里的真实显示效果
16px
32px
48px
默认已填充文字示例，可直接下载体验；上传自己的 Logo 后所有预览会实时更新。
图标预览
每个尺寸都单独渲染，小图标不会因为缩放而糊掉。
HTML 接入代码
<link rel="icon" href="/favicon.ico" sizes="any" /> <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" />
升级 Pro 解锁「完整图标包」
PRO升级 Pro 后，可一次导出全平台图标、site.webmanifest 与接入说明，省去逐个尺寸手动下载。
- 一个 ZIP 打包 8 个尺寸 PNG + 多尺寸 favicon.ico，覆盖浏览器、iOS、Android
- 自动生成 site.webmanifest 与 Android 自适应 maskable 图标（已预留安全区）
- 附带 snippet.html 与 README 接入说明，直接放进项目 public 目录即可
这个工具能做什么
把一张图片、一段文字或一个 Emoji 变成网站图标。每个尺寸都从原图重新渲染，再封装成内含 16/32/48 的 favicon.ico，避免浏览器缩放导致小尺寸发糊，同时给出可直接粘贴的 HTML 代码。
各尺寸用在哪里
16 / 32：浏览器标签页与书签栏。
48：Windows 桌面快捷方式。
180：iOS「添加到主屏幕」。
192 / 512：Android 主屏与 PWA 启动画面。
如何使用
1. 选择「文字 / Emoji」或上传自己的 Logo。
2. 调整背景色、内边距与圆角，实时查看小尺寸效果。
3. 下载 favicon.ico 或所需尺寸的 PNG。
4. 复制 HTML 代码粘贴到页面 <head>。
常见问题 FAQ
favicon.ico 一定要多尺寸吗？
建议保留。浏览器标签用 16×16，书签栏与高分屏用 32×32，Windows 桌面快捷方式会取 48×48。工具生成的 .ico 同时内含这三个尺寸，一个文件即可覆盖。
上传的图片会被传到服务器吗？
不会。图片读取、缩放、圆角处理与 ICO 封装都在浏览器本地用 Canvas 完成，页面不会上传任何文件。
支持哪些图片格式？
PNG、JPG、WebP、GIF 与 SVG 都可以上传，单个文件不超过 8MB。建议使用正方形、主体居中的图片；长方形图片会按比例缩放并居中，不会被拉伸。
文字和 Emoji 模式生成的图标能用吗？
可以。文字模式适合还没有 Logo 的项目，输入 1-4 个字符或一个 Emoji，配合背景色与圆角就能得到一套可直接上线的图标。Emoji 的具体样式取决于当前设备的系统字体。
生成的文件应该放在哪里？
把 favicon.ico 与各尺寸 PNG 放到站点根目录，再把页面里的 HTML 代码片段粘进 <head>。Next.js 项目可直接放进 public 目录，Vite、Nuxt 等同理。