OneImage
OneImage Team··
oneimage图标iOSAndroidFlutter效率工具

一张 Logo 搞定 iOS/Android 全套应用图标：App Icon Resizer

一张 Logo 搞定 iOS/Android 全套应用图标：App Icon Resizer

从一张源图生成 iOS AppIcon.appiconset + Android mipmap 图标包（含商店图标），浏览器本地处理无需上传。

做过移动端发布的人大概率都经历过"图标周"：设计同学交付了一个高分辨率 Logo，你以为导出几张 PNG 就结束了，结果 iOS 要求一整套 AppIcon 规格，还要在 Xcode 的 Assets 里正确映射；Android 需要按密度分桶的 mipmap-* 目录；App Store / Google Play 的商店展示图标也有固定尺寸。少一个尺寸、命名不规范、目录放错位置，轻则返工，重则影响提审节奏。

App Icon Resizer 就是为了把这类"发布前的体力活"压缩成 1 分钟流程：

  • 上传 一张 源图（PNG/JPG）
  • 选择 iOS 或 Android
  • 先预览再下载，避免盲改
  • 下载一个可直接放进工程的 zip
  • 全程 浏览器本地处理，无需上传

---

一句话总结

如果你想快速拿到"可落地到工程"的图标包，而不是一堆散落的 PNG，那么 App Icon Resizer 的使用路径就是：

  1. 上传或粘贴一张图
  2. 选 iOS / Android
  3. 生成并预览
  4. 下载 zip
  5. iOS 放进 Assets.xcassets，Android 放进 app/src/main/res/

---

它能生成什么？

iOS 输出（Xcode 友好）

你会得到完整的 AppIcon.appiconset 文件夹，并自动生成 Contents.json，让 Xcode 能把每个尺寸映射到正确槽位。很多工具只会给你一堆 PNG，但真正省时间的是：Xcode 可直接识别、可直接落地。

Android 输出（Android Studio 友好）

你会得到标准 mipmap-* 密度目录，每个目录里使用常见的启动图标文件名 ic_launcher.png，同时包含商店展示所需的图标尺寸。对开发来说这不是"好看"，而是"少踩坑"。

商店图标尺寸默认包含

  • App Store： 1024×1024
  • Google Play： 512×512

---

同类工具很多，为什么它更适合"真发布"？

市面上的"图标生成器/缩放器"大致可以分几类：在线上传型、设计软件导出型、脚本/CLI 型、以及普通图片缩放器。它们都能"把图变小"，但经常在真正发布时暴露问题：目录结构不对、命名不对、iOS 映射缺失、预览不足导致被系统圆角裁切、最小尺寸不可读……

App Icon Resizer 的优势更偏"交付导向"，主要体现在：

1）本地处理，不上传：更安心

很多在线工具需要把 Logo 上传到服务器生成 zip。对未发布产品、品牌素材管理严格的团队来说，这一步本身就会引入风险和审批成本。App Icon Resizer 在浏览器里本地完成处理，你的图标不会离开设备。

2）输出的是"工程可用结构"，不是一堆散图

iOS 直接给 AppIcon.appiconset + Contents.json；Android 直接给 mipmap-* 目录结构 + ic_launcher.png。开发同学拿到 zip 解压后就知道怎么落地，不需要再对照文档手动摆放、重命名、补映射。

3）默认不拉伸：保持比例 + 居中

图标最怕被拉伸变形，一变形就显"廉价"。工具按"保持宽高比 + 居中"的方式处理：如果源图不是正方形，不会被硬拉成正方形，而是以不变形为优先，居中放入方形画布。

4）预览能力更"工程化"，提前发现线上问题

只给你 zip 的工具很容易让你"下载—替换—跑起来—发现不对—返工"。App Icon Resizer 提供多种预览，尽量让问题在下载前暴露出来：

  • 多尺寸预览网格（快速检查清晰度/可读性）
  • iOS 圆角/安全区遮罩预览（确认关键信息不被裁掉）
  • Android adaptive icon 形状预览（不同 mask 下的效果）
  • 设备桌面预览（更接近真实观感）
  • 支持单个尺寸直接下载（临时只要某张图时很省事）
生成后的多尺寸预览网格
生成后的多尺寸预览网格
iOS 圆角/安全区遮罩预览
iOS 圆角/安全区遮罩预览
Android mask 形状预览 + 设备预览
Android mask 形状预览 + 设备预览

5）自带落地指引与可复制片段

"生成"只是第一步，真正节省沟通成本的是：告诉你放到哪里、怎么引用、常见坑是什么。工具页面内置 iOS/Android/Xcode/Android Studio/Flutter 等指引，并提供可复制的示例配置，适合跨端团队和新同学快速上手。

---

解压后的目录长什么样？（让开发同学一眼放心）

很多时候，开发不愿意用工具不是因为不需要，而是因为"看不懂输出能不能直接放工程"。这里给一个直观的目录树示例，基本与 zip 解压后的结构一致。

iOS 包结构示例

ios/
  AppIcon.appiconset/
    Contents.json
    icon-20@2x.png
    icon-20@3x.png
    icon-29@2x.png
    icon-29@3x.png
    ...
    icon-1024.png

Android 包结构示例

android/
  playstore/
    ic_launcher.png   (512x512)
  mipmap-mdpi/
    ic_launcher.png   (48x48)
  mipmap-hdpi/
    ic_launcher.png   (72x72)
  mipmap-xhdpi/
    ic_launcher.png   (96x96)
  mipmap-xxhdpi/
    ic_launcher.png   (144x144)
  mipmap-xxxhdpi/
    ic_launcher.png   (192x192)

🖼️ 截图占位： zip 解压后的目录展示（后续替换为真实截图）

---

60 秒上手流程

1）上传源图 支持 PNG/JPG；支持拖拽；也支持从剪贴板直接粘贴（非常适合从设计工具里复制一张图快速试效果）。

2）选择平台 选择 iOS 或 Android。

3）生成并预览 建议优先检查最小尺寸（例如 29×29、40×40、48×48），这些尺寸最容易暴露"糊成一团/对比度不足/细节丢失"的问题。

4）下载 zip 并落地到工程 照着下面的步骤做即可。

---

集成落地（可复制、可粘贴）

iOS（Xcode）

  1. 解压下载的 zip
  2. 把 AppIcon.appiconset 拖入：YourApp/Assets.xcassets/
  3. 在 Xcode 检查应用目标的 App Icon 设置：

Target → General → App Icons and Launch Images → App Icons Source

Contents.json 会完成映射，通常不需要你手动逐项设置。

Android（Android Studio）

  1. 解压 zip
  2. 把 mipmap-* 目录复制到：app/src/main/res/
  3. 在 Manifest 里确认 icon 引用：
<!-- AndroidManifest.xml -->
<application
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher"
    ... >
</application>

Flutter（可选）

如果团队习惯 Flutter 的统一工具链，可以继续用 flutter_launcher_icons，也可以用生成出来的文件手动替换。

# pubspec.yaml
dev_dependencies:
  flutter_launcher_icons: ^0.13.1

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon.png"

---

使用注意点（建议放在 blog 的"避坑"段落）

1）尽量从 1024×1024 的源图开始

商店与多尺寸缩放都需要高质量源图；源图太小会造成插值模糊，尤其在小尺寸上会出现明显锯齿或糊边。

2）iOS 不要预先做圆角

iOS 会对图标做系统级圆角遮罩。你给正方形、边缘留足安全区即可。建议用工具提供的安全区遮罩预览确认关键信息不贴边、不被裁切。

3）透明背景规则要分平台看

  • iOS： 图标要求不透明（避免透明背景）
  • Android： 常规 launcher icon 一般建议不透明；但 adaptive icon 的前景层在某些设计里可以使用透明

由于工具会"保持比例并居中"，如果你的源图是非正方形且背景透明，可能会出现透明 padding。面向 iOS 提审时，建议先把背景铺成纯色再生成。

4）关于 Android adaptive icon：要明确边界

该工具生成的是标准 mipmap launcher icons。如果你需要"完整的 adaptive icon（前景/背景分层）"，仍建议准备分层素材。你可以先用工具的形状预览判断现有图标在不同 mask 下是否能接受，再决定是否升级到分层设计。

5）一定检查最小尺寸可读性

1024 看起来完美，不代表 29×29 也清晰。建议对最小尺寸做"快速扫一遍"：形状是否还辨认得出？对比度够不够？细线有没有糊掉？

---

上线前检查清单（建议直接贴到发布 PR）

  • [ ] 源图至少 1024×1024，清晰无过度压缩
  • [ ] iOS 图标为正方形且不透明（无透明背景）
  • [ ] iOS 未预先做圆角（由系统遮罩处理）
  • [ ] 最小尺寸（29/40/48）仍可读、轮廓清晰
  • [ ] Android 在不同 mask 下观感可接受（adaptive 预览）
  • [ ] 输出目录已放入正确工程路径（iOS/Android 各自位置）
  • [ ] 真机/模拟器确认桌面图标显示正确

---

对比表（快速说明差异点）

方案常见流程常见问题App Icon Resizer 的优势
普通图片缩放器导出多张 PNG无目录/命名/映射输出工程可用结构
在线上传生成器上传 → 下载资产外传风险、输出不一致本地处理无需上传
设计软件手工导出手动多尺寸导出易漏尺寸/命名错误尺寸一致 + 预览校验
脚本/CLI配环境写配置上手成本高、团队摩擦浏览器即用、易共享

---

行动号召（CTA）

如果你的目标是：不要再把时间浪费在图标尺寸和目录结构上，那么 App Icon Resizer 就是为你准备的。 用它快速生成 iOS/Android 可落地的图标包，配合预览把问题挡在下载前。

另外，如果你还需要任意自定义尺寸的批量缩放（比如市场物料、截图、多平台素材），也可以再看看 Image Resizer 的能力，适合更通用的素材流水线。