ImgBox

ICO/Favicon 生成

在线 favicon 生成器：上传一张图自动导出 16×16 到 512×512 共 9 个尺寸 PNG 和一个多尺寸 .ico 文件，包含 apple-touch-icon 与 android-chrome 尺寸，浏览器本地处理，零上传。

选择尺寸：

.ico 文件自动包含 16/32/48 三种尺寸（最大兼容），其它尺寸独立为 PNG。

推荐上传 512×512 或以上的正方形图；非正方形会自动居中裁剪。

相关工具

⇄格式转换✂裁剪图片⇲调整尺寸

使用说明

用途

网站 favicon 多尺寸图标生成器,从一张 PNG / SVG 一键输出 16×16 / 32×32 / 48×48 / 64×64 / 180×180 / 192×192 / 512×512 等全套尺寸,并打包成标准的 favicon.ico 文件 + apple-touch-icon + Android Chrome icon + manifest.json。让网站在浏览器标签页、收藏夹、PWA 应用列表、iOS 桌面 Web Clip、Android 桌面都显示得清晰锐利,浏览器本地处理。

操作步骤

  1. 上传源图标(建议正方形 PNG / SVG,512×512 以上)
  2. 可选透明背景或加圆角
  3. 工具自动渲染 8 个尺寸
  4. 下载 zip 包含:favicon.ico(多尺寸合一)、apple-touch-icon-180.png、android-chrome-192.png 等
  5. 把生成的文件放到网站根目录
  6. 在 HTML <head> 加上对应 <link> 标签

常见问题

favicon.ico 和 PNG 哪个更好?
现代浏览器都支持 PNG,但 IE 老版本只认 ICO。最稳的做法是同时提供 favicon.ico + 多种尺寸 PNG,我们一键打包生成。
为什么需要 apple-touch-icon?
iOS Safari 把网页加到桌面时用 apple-touch-icon(180×180),没有就显示截图。Web App / PWA 体验离不开。
图标可以带透明背景吗?
可以,PNG 系列保留透明。但 ICO 文件转换会强制添加白色或自动 padding(取决于浏览器渲染)。
怎么测试 favicon 是否生效?
把文件部署到服务器后,清空浏览器缓存(Ctrl+F5),favicon 会显示在标签页。iOS 桌面 icon 加桌面时也能看到。
manifest.json 是什么?
PWA 安装到桌面用的配置文件,定义图标、名称、主题色。我们一并生成,可粘贴到网站根目录。

应用场景

  • 个人博客 / 公司官网必备 favicon
  • PWA Web App 桌面图标
  • iOS Safari 加桌面 Web Clip 图标
  • Android Chrome 添加桌面快捷方式
  • 浏览器标签页品牌识别

应用场景

8 种尺寸 + ICO + manifest 一键打包,网站标签页 / iOS 桌面 / Android 主屏 / PWA 应用都能显示清晰图标。