Favicon在线制作
点击或拖拽图标图片
支持 PNG / JPG / SVG，最大 5MB
建议正方形图片（512x512 以上）
上传图片并点击「生成 Favicon」
工具介绍
Favicon 是网站图标，显示在浏览器标签页、书签、手机主屏幕等位置。本工具可一键将您的 Logo 图片生成多种尺寸的 Favicon 图标，覆盖 iOS、Android、Windows、PWA 全平台，并自动生成集成代码，方便快速部署。
- 纯前端处理，图片不会上传到服务器，保护隐私
- 支持 16 种常用尺寸，覆盖所有主流平台和设备
- 支持 ICO 和 PNG 两种输出格式
- 可自定义圆角半径和背景色
- 多尺寸实时预览，直观查看各尺寸效果
- 自动生成 HTML 代码和 manifest.json，方便快速集成
- 支持图片裁剪，精确控制图标区域
使用场景
| 场景 | 推荐尺寸 | 说明 |
|---|---|---|
| 个人博客 | 16x16, 32x32 + ICO | 使用「基础网站」预设 |
| 企业官网 | 标准5尺寸 | 使用「标准网站」预设 |
| iOS Web App | 180x180, 120x120 | 使用「iOS 全套」预设 |
| Android PWA | 192x192, 512x512 | 使用「Android/PWA」预设 |
| 现代风格网站 | 标准5尺寸 + 25%圆角 | 使用「圆角图标」预设 |
| 全平台覆盖 | 全部16种尺寸 | 使用「全量生成」预设 |
各尺寸用途参考
| 尺寸 | 平台 | 用途 |
|---|---|---|
| 16x16 | 浏览器标签页 | 显示在浏览器标签页、书签列表 |
| 32x32 | 浏览器标签页(HiDPI) | 高分辨率屏幕的标签页图标 |
| 48x48 | Windows 桌面 | Windows 桌面快捷方式图标 |
| 57x57 | iPhone (旧版) | iPhone iOS 6 及更早版本 |
| 60x60 | iPhone (iOS 7+) | iPhone iOS 7 及以上版本 |
| 72x72 | iPad (旧版) | iPad iOS 6 及更早版本 |
| 76x76 | iPad (iOS 7+) | iPad iOS 7 及以上版本 |
| 114x114 | iPhone Retina (旧版) | iPhone 4/4s Retina 屏幕 |
| 120x120 | iPhone Retina (iOS 7+) | iPhone iOS 7+ Retina 屏幕 |
| 144x144 | iPad Retina (旧版) | iPad Retina iOS 6 及更早 |
| 152x152 | iPad Retina (iOS 7+) | iPad Retina iOS 7 及以上 |
| 180x180 | iPhone 6 Plus+ | 现代 iPhone 主屏幕图标 |
| 192x192 | Android Chrome | Android 设备 Chrome 浏览器图标 |
| 512x512 | PWA / Play Store | PWA 应用图标、Google Play 商店 |
| 96x96 | Windows Metro | Windows 8/10 Metro UI 图标 |
| 256x256 | 高清通用 | 高清显示器通用图标 |
常见问题
Q: ICO 和 PNG 有什么区别？
A: ICO 是传统格式，兼容旧版 IE 浏览器；PNG 是现代格式，支持透明和高清显示。建议两者都生成以确保最大兼容性。现代浏览器优先使用 PNG 格式。
Q: 圆角设置会影响哪些尺寸？
A: 圆角会应用到所有生成的尺寸，百分比基于图片短边计算。例如 25% 圆角在 100px 图片上会产生 25px 的圆角半径。建议 iOS 图标使用 22.37% 圆角（Apple 标准）。
Q: 生成的代码放在哪里？
A: HTML 代码放在网页的 <head> 标签内。manifest.json 文件放在网站根目录，并在 HTML 中通过 <link rel="manifest" href="/manifest.json"> 引入。
Q: 建议上传什么格式的图片？
A: 建议使用 PNG 格式的正方形图片，分辨率至少 512x512，确保缩小到 16x16 后仍然清晰。避免使用过于复杂的图案，小尺寸下可能糊成一团。
Q: 为什么需要这么多尺寸？
A: 不同设备和浏览器使用不同尺寸的图标。例如 iPhone 主屏幕需要 180x180，浏览器标签页只需要 16x16 或 32x32。生成全套尺寸可以确保在所有场景下都有最佳显示效果。
Q: manifest.json 是什么？
A: manifest.json 是 PWA（渐进式 Web 应用）的配置文件，定义了应用名称、图标等信息。当用户将网站「添加到主屏幕」时，系统会读取此文件来显示图标。
Q: 支持 SVG 上传吗？
A: 支持上传 SVG 文件，但建议先将其转换为 PNG 再上传，因为 SVG 在 Canvas 中渲染可能存在兼容性问题。上传的 SVG 会被栅格化为 PNG 后处理。