Favicon 生成器
在线 Favicon 生成器，支持上传图像后生成多尺寸网站图标并下载 PNG 文件。
上传 logo、头像或图标原图
SUPPORTED: image/png,image/jpeg,image/webp,image/svg+xml
使用说明
- 1 上传方形或接近方形的图像文件
- 2 预览生成后的多尺寸 favicon
- 3 下载所需尺寸的 PNG 图标文件
相关工具
条形码生成
在线条形码生成工具，支持CODE128和EAN-13格式，生成高质量条形码图片
Box Shadow 生成器
在线 Box Shadow 生成器，支持实时预览阴影参数并复制 CSS 代码。
颜色工具/拾色器
在线颜色拾取工具，支持HEX、RGB、HSL多格式互转，实时预览颜色效果
WCAG 颜色对比度检测
实时计算前景色与背景色的 WCAG 对比度比值，标注 AA / AAA 通过状态，并以按钮、卡片、输入框组件预览效果。支持导出 CSS 变量。
CSS 渐变生成器
在线 CSS 渐变生成器，支持线性渐变预览、角度调节和 CSS 代码复制。
在线白板/画板
在线白板画板工具，支持画笔、橡皮擦、颜色选择、笔刷粗细调节，可导出为PNG。
二维码识别/解码
上传二维码图片，自动识别并解码出文本内容，先看内容再决定是否访问，避免扫到恶意链接。
二维码生成
输入文本或链接，即时生成QR二维码图片，可下载PNG
关于此工具
Favicon 生成器将上传的图片自动裁剪和缩放，生成 16×16、32×32、48×48、180×180（Apple Touch Icon）等主流尺寸的网站图标 PNG 文件。一次上传，满足不同设备和浏览器的图标尺寸需求，无需安装 Photoshop 或 GIMP。
适用场景：新建网站时为浏览器标签页配置 favicon、PWA 应用配置主屏幕图标、发布 Chrome 扩展时准备不同尺寸的图标文件、以及电子邮件中的发件人 Logo 图标适配。一个完整的 favicon 套件通常需要 8-10 种尺寸，手动导出极为繁琐。
与 Figma 手动导出相比，本工具专门针对图标场景做了优化：自动补全圆角选项、支持透明背景保留、输出的 PNG 文件符合各平台的像素规格，避免因比例拉伸导致图标变形或边缘锯齿。
常见问题
上传什么格式和尺寸的图片效果最好？ +
建议上传 512×512 或 1024×1024 像素的正方形 PNG 图片（带透明背景）。尺寸越大，缩小后的质量越好。避免上传长宽比差异大的图片，否则裁剪后会丢失重要内容。SVG 格式需先转为 PNG 再上传。
网站需要哪些 favicon 尺寸？ +
最基础：favicon.ico（16×16 + 32×32 多尺寸 ICO）。Chrome 标签页：32×32 PNG。Apple 设备主屏幕图标：apple-touch-icon.png（180×180）。Android/PWA：192×192 和 512×512。Windows Metro 磁贴：150×150。完整适配建议参考 HTML5 Boilerplate 的 favicon 配置。
为什么上传了新 favicon 但浏览器还显示旧图标？ +
浏览器会缓存 favicon，通常需要强制刷新（Ctrl+Shift+R）或清除浏览器缓存才能看到新图标。另一种方法是在 HTML 的 link 标签中添加版本号查询参数：<link rel='icon' href='favicon.png?v=2'>，迫使浏览器重新请求。
.ico 格式和 .png 格式的 favicon 有什么区别？ +
ICO 格式是传统 Windows 图标格式，可以在单个文件中包含多个尺寸（16、32、48像素），所有浏览器都支持。PNG 格式更现代，文件更小，支持透明度更好，现代浏览器（Chrome、Firefox、Safari）均支持 PNG favicon。新项目推荐同时提供 ICO 和 PNG 两种格式，用 link 标签指定 PNG，降级时使用 ICO。
生成的图标在 iOS 主屏幕上显示模糊怎么处理？ +
iOS 主屏幕图标（Apple Touch Icon）需要 180×180 像素（iPhone）或 167×167 像素（iPad）。如果显示模糊，说明上传的原图分辨率不足。重新上传更大尺寸的原图（建议 1024×1024），本工具会高质量缩放到目标尺寸。图标 HTML 声明：<link rel='apple-touch-icon' href='apple-touch-icon.png'>。