Favicon 生成器
上传图片一键生成全套 favicon(多分辨率 .ico、PNG、apple-touch-icon)及 HTML 与 webmanifest,可设背景与圆角,打包下载,本地不上传。
纯前端处理,数据不上传
拖拽或点击选择图片(建议正方形 ≥512px)
图片不会上传,本地生成
工具介绍
Favicon 是显示在浏览器标签页、书签栏和移动端主屏上的网站小图标,它虽小却直接影响品牌辨识度和站点的专业感。但做一套 favicon 其实挺琐碎:标签页要 16/32,Windows 习惯用 .ico,iOS 主屏要 180 的 apple-touch-icon,安卓和 PWA 又需要 192 与 512——尺寸繁多、格式不一。
本工具一步搞定:上传一张图片(建议正方形、≥512px),即自动生成 16/32/48/64/180/192/512 全套 PNG 与内含多分辨率的 favicon.ico,并实时预览。你还能关闭透明背景填充纯色底,或按百分比调圆角做 iOS 风格图标,改动后预览即时刷新。工具同时给出可粘贴进 head 的 HTML 引用代码与 site.webmanifest 文本。
每个尺寸可单独下载,也能一键打包成 ZIP。全程经浏览器 Canvas 本地完成,图片不上传,既快又安全。
使用方法
- 拖拽或选择一张图片(建议正方形、≥512px,PNG/JPG/SVG)。
- 工具自动生成 16/32/48/64/180/192/512 等尺寸及多分辨率 favicon.ico,并预览。
- 可选关闭透明背景设置填充色、调节圆角百分比,预览会即时刷新。
- 复制自动生成的 HTML 引用代码与 site.webmanifest,粘贴进网页 <head> 与站点根目录。
- 每个尺寸可单独下载,也可点「打包下载 ZIP」获取全部文件。
常见问题
- 图片会上传服务器吗?
- 不会。所有尺寸缩放、圆角/背景处理和 .ico 打包都在浏览器本地用 Canvas 完成,图片不会上传,可放心使用。
- 为什么要生成这么多尺寸?
- 不同场景需求不同:浏览器标签页用 16/32,Windows 用 .ico,iOS 主屏用 180 的 apple-touch-icon,安卓/PWA 用 192 与 512。一次生成全套最省心。
- 背景填充和圆角怎么用?
- 默认保持透明背景。若原图是透明 PNG 又想要纯色底,可关闭「透明背景」并选填充色;「圆角」按边长百分比裁切,做圆角图标(如 iOS 风格)时很方便,调整后预览即时更新。
- site.webmanifest 有什么用?
- 它是 PWA 与安卓添加到主屏时读取的清单,声明 192/512 图标及主题色。工具会按当前背景色生成完整 JSON,可一键复制或随 ZIP 一起下载,放到站点根目录即可。
- .ico 里包含哪些尺寸?
- 生成的 favicon.ico 内含 16、32、48 三种分辨率(PNG 编码),系统会按需选用,兼容现代浏览器与 Windows。