Cocos Creator 3.x 项目上架前必做：一键生成五种尺寸图标并替换APP图标的懒人教程
Cocos Creator 3.x 项目上架前必做：一键生成五种尺寸图标并替换APP图标的懒人教程
当你完成了一个精彩的Cocos Creator游戏开发，准备在TapTap等平台发布时，APP图标可能是最容易被忽视却至关重要的环节。一个专业、适配各种尺寸的图标不仅能提升应用商店的展示效果，还能避免因图标不规范导致的审核问题。本文将分享一套高效的工作流，让你在5分钟内完成所有图标尺寸的生成和替换。
1. 为什么需要五种尺寸的图标？
安卓系统对应用图标有着严格的多尺寸要求，主要原因是：
- 不同设备密度：从低密度手机到4K平板，系统会根据屏幕DPI自动选择最合适的图标
- 系统界面适配：应用列表、桌面、设置界面等不同场景需要不同大小的图标
- 商店展示需求：应用商店会抓取不同分辨率的图标用于各种展示位
以下是必须准备的五种标准尺寸及其用途：
| 尺寸(px) | 密度类型 | 主要使用场景 |
|---|---|---|
| 72×72 | hdpi | 普通手机应用列表 |
| 48×48 | mdpi | 小尺寸设备及系统界面 |
| 96×96 | xhdpi | 主流高清手机 |
| 144×144 | xxhdpi | 2K屏设备 |
| 192×192 | xxxhdpi | 4K设备及应用商店主展示 |
2. 一键生成多尺寸图标的三种方案
2.1 使用在线工具批量生成（推荐新手）
改图宝是最简单的解决方案：
- 访问改图宝官网
- 上传你的原始图标（建议1024×1024以上）
- 在"批量修改尺寸"功能中依次添加五个目标尺寸
- 设置输出格式为PNG（必须透明背景）
- 点击"开始生成"并下载ZIP包
注意：确保原始图标有足够的细节，缩小后仍能清晰辨认核心元素
2.2 使用Photoshop动作脚本
如果你熟悉PS，可以创建自动化动作：
// Photoshop脚本示例 var sizes = [72, 48, 96, 144, 192]; var doc = app.activeDocument; var folder = Folder.selectDialog("选择输出目录"); for(var i=0; i<sizes.length; i++){ var newDoc = doc.duplicate(); newDoc.resizeImage(sizes[i], sizes[i], 300, ResampleMethod.BICUBICSHARPER); var saveFile = new File(folder.fsName + "/icon_" + sizes[i] + "x" + sizes[i] + ".png"); SavePNG(newDoc, saveFile); newDoc.close(); } function SavePNG(doc, file){ var opts = new PNGSaveOptions(); opts.compression = 9; opts.interlaced = false; doc.saveAs(file, opts); }2.3 Cocos项目自动化脚本
在项目根目录创建generate_icons.js：
const sharp = require('sharp'); const fs = require('fs'); const path = require('path'); const inputIcon = './assets/textures/icon.png'; // 你的原始图标路径 const outputDir = './native/engine/android/res/'; const sizes = [ {name: 'mipmap-hdpi', size: 72}, {name: 'mipmap-mdpi', size: 48}, {name: 'mipmap-xhdpi', size: 96}, {name: 'mipmap-xxhdpi', size: 144}, {name: 'mipmap-xxxhdpi', size: 192} ]; async function generateIcons() { try { const image = sharp(inputIcon); for (const item of sizes) { const dir = path.join(outputDir, item.name); if (!fs.existsSync(dir)) fs.mkdirSync(dir, {recursive: true}); await image .resize(item.size, item.size) .toFile(path.join(dir, 'ic_launcher.png')); console.log(`Generated ${item.name} icon`); } } catch (err) { console.error('Error generating icons:', err); } } generateIcons();运行前需安装sharp库：
npm install sharp --save-dev3. 图标替换的精准操作流程
生成的图标需要放入正确目录：
- 打开项目中的
native/engine/android/res目录 - 你会看到五个mipmap文件夹：
mipmap-hdpi/ mipmap-mdpi/ mipmap-xhdpi/ mipmap-xxhdpi/ mipmap-xxxhdpi/ - 将对应尺寸的图标重命名为
ic_launcher.png替换原文件
重要：必须保持文件名一致，Android系统通过固定名称识别图标
4. 验证图标替换效果的三种方法
4.1 Android Studio实时预览
- 在Android Studio中打开
res目录 - 右键点击任意mipmap文件夹
- 选择"Preview"选项查看所有密度下的显示效果
4.2 使用模拟器多设备测试
# 启动不同DPI的模拟器 emulator -avd Pixel_3_API_30 -skin 1080x1920 -dpi-device 420 emulator -avd Nexus_7_API_28 -skin 1200x1920 -dpi-device 3204.3 APK分析工具检查
使用Android SDK自带的aapt工具：
aapt dump badging your_app.apk | grep icon应该看到类似输出：
application-icon-120:'res/mipmap-hdpi/ic_launcher.png' application-icon-160:'res/mipmap-mdpi/ic_launcher.png' application-icon-240:'res/mipmap-xhdpi/ic_launcher.png'5. 高级技巧：自适应图标与圆形/方形适配
从Android 8.0开始，系统支持自适应图标：
- 在
res/mipmap-anydpi-v26/目录创建ic_launcher.xml：
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@drawable/ic_launcher_background"/> <foreground android:drawable="@drawable/ic_launcher_foreground"/> </adaptive-icon>准备两张1024×1024的图层：
- 背景层（纯色或简单图案）
- 前景层（主要图标元素）
为各密度生成两种资源：
drawable-hdpi/ic_launcher_background.png drawable-hdpi/ic_launcher_foreground.png
这种方案能让图标在不同厂商的桌面上保持统一风格，避免被强制裁剪成圆形或方形。
6. 常见问题排查
图标显示为默认Android机器人：
- 检查文件名是否完全匹配
ic_launcher.png - 确认图片已正确复制到所有密度目录
- 清理项目后重新构建：
Build > Clean Project
图标边缘出现白边：
- 确保使用透明背景的PNG格式
- 检查图片实际内容是否填满画布
- 在PS中开启"对齐像素网格"功能
商店审核提示图标分辨率不足：
- 确认xxxhdpi版本使用192×192尺寸
- 原始设计稿至少需要512×512分辨率
- 避免在图标中使用细于3px的线条
在实际项目中，我习惯将图标生成脚本集成到构建流程中，这样每次发布时都会自动检查并更新图标资源。对于团队协作项目，可以在Git hooks中添加图标校验步骤，确保所有成员提交的资源都符合规范。