工具与笔记
工具与笔记

图标生成

上传一张方图,按平台一次性导出全部所需尺寸。图片会上传至本站服务端处理,处理完成后立即删除,仅作为临时文件,不保留副本、不用于其它用途。

  • jpg, jpeg, png, webp, bmp
  • 免注册
  • 批量处理
拖拽图片到这里,或点击选择文件 支持 jpg, jpeg, png, webp, bmp
单次最多 30 张 · 合计不超过 300 MB · 单张最大 50MB
待处理队列
已加载 0 项

还没有选择文件

目标平台
目标平台
额外尺寸
额外尺寸

跟上面「额外尺寸」不是一回事:上面决定导出哪些 PNG,这里决定 .ico 这一个容器里装哪几档。.ico 是浏览器真正读取的 favicon 文件,装得越多体积涨得越快(16 + 32 + 48 → 256 是十几倍),默认这三档就够用,只有要给 Windows 桌面快捷方式配图时才需要更大的。

非方图处理
非方图处理

图标必须是正方形。补边会保留完整画面并填充背景色,居中裁剪会切掉两侧。

#FFFFFF

只在选「补边」且原图有透明或非方形时生效。

打包下载
打包下载

尺寸多于 3 个时建议打包,省得逐个点。

就绪

处理结果

尚未开始

    处理完成后,结果会显示在这里。

    图标生成能做什么

    • 生成 favicon.ico:含 16 / 32 / 48 多尺寸,一个文件覆盖浏览器各个场景
    • 多平台尺寸导出:iOS(20–1024)、Android、PWA 所需尺寸一次出齐
    • 非方图自动处理:补边或居中裁剪成正方形,避免图标被拉伸变形
    • 打包下载:所有尺寸打成一个 ZIP,直接丢进项目目录

    参数怎么调

    下表列出该工具的全部可调参数与建议取值。不确定时保持默认值即可,默认值是多数场景下的稳妥选择。

    图标生成参数说明
    参数 可选值 默认 说明
    目标平台 浏览器 favicon / Windows 图标 / iOS App 图标 / Android 图标 browser、windows 按平台预置尺寸组合。选「浏览器」会生成 .ico 与常用 PNG;选 iOS 会按 20–1024px 输出。
    额外尺寸 16×16 / 32×32 / 48×48 / 64×64 / 128×128 / 180×180 / 192×192 / 256×256 / 512×512 / 1024×1024 32、180、192、512 不确定就按默认勾选:32 用于浏览器标签页,180 用于 iOS 添加到主屏,192 / 512 用于 PWA 与安卓。
    ICO 容器内容 浏览器 favicon:16 + 32 + 48(体积最小,推荐) / 连桌面快捷方式:所选尺寸里 16–256 px 全装(体积约十几倍) / 仅 32×32(老规范,个别老系统才读) standard 跟上面「额外尺寸」不是一回事:上面决定导出哪些 PNG,这里决定 .ico 这一个容器里装哪几档。.ico 是浏览器真正读取的 favicon 文件,装得越多体积涨得越快(16 + 32 + 48 → 256 是十几倍),默认这三档就够用,只有要给 Windows 桌面快捷方式配图时才需要更大的。
    非方图处理 补边成正方形 / 居中裁剪 pad 图标必须是正方形。补边会保留完整画面并填充背景色,居中裁剪会切掉两侧。
    补边底色 任意颜色 #FFFFFF 只在选「补边」且原图有透明或非方形时生效。
    打包下载 打成一个 ZIP / 逐个下载 1 尺寸多于 3 个时建议打包,省得逐个点。

    适用场景

    • 给新站点配 favicon,顺手把 PWA 需要的尺寸一起备齐
    • 把设计稿里的 Logo 导出成 App 上架所需的整套图标
    • 把一张方形 Logo 转成 Windows 桌面快捷方式用的 ico
    • 整理素材时把零散尺寸统一成规范的一套

    常见问题

    favicon 用 PNG 还是 ICO?

    两者都放最稳。现代浏览器支持 PNG 图标,老浏览器和一些桌面环境仍读 .ico。本工具勾选「浏览器」会同时给出 .ico 与 PNG,把 ico 放在站点根目录、PNG 写进 HTML 的 link 标签即可。

    为什么生成的图标看起来有点糊?

    多半是源图太小。放大不会增加细节,只会把模糊放大。建议源图至少 512×512,最好 1024×1024,再由工具缩小到各尺寸,这样小尺寸图标边缘才干净。

    非正方形的图片会怎样?

    图标必须是正方形,工具会按你选的方式处理:补边成正方形(保留完整画面,四周填充底色)或居中裁剪(切掉两侧超出部分)。直接拉伸会变形,所以工具不会这么做。