快速生成 iOS app icons 详细步骤

本文档提供三种方法生成最终的PNG图标资源。

首先，可以让 AI 结合项目 base code 生成适合本项目的 svg 设计稿。比如在 cursor 中让 claude opus 基于整个工程生成一个设计稿，文件名为 AppIcon_Template.svg。

接下来开始批量生成与导出 iOS app 上线所需的 icons。

方法1：使用 Figma（推荐，最简单）

步骤1：导入SVG模板

1. 打开 Figma^[1]（免费账户即可）
2. 创建新文件：New Design File
3. 拖拽 AppIcon_Template.svg 到画布
4. 调整画布大小为 1024×1024（右侧面板 → Frame → W: 1024, H: 1024）

步骤2：精细调整（可选）

1. 比如选中模板文件中的麦克风图形，调整颜色/大小
2. 试验不同渐变角度（背景层 → Fill → Linear Gradient）
3. 添加/移除AI星点装饰（取消隐藏 microphone-with-sparkles 图层）

步骤3：设置导出预设

在右侧 Export 面板：

1. 点击 + 添加导出配置
2. 添加以下尺寸：

   29w (Icon-App-29x29@1x.png)
   58w (Icon-App-29x29@2x.png)
   87w (Icon-App-29x29@3x.png)
   40w (Icon-App-20x20@2x.png)
   60w (Icon-App-20x20@3x.png)
   80w (Icon-App-40x40@2x.png)
   120w (Icon-App-40x40@3x.png) 和 (Icon-App-60x60@2x.png)
   180w (Icon-App-60x60@3x.png)
   1024w (ItunesArtwork@2x.png)
   

3. 格式选择 PNG

步骤4：导出并重命名

1. 点击 Export 图层名 按钮
2. Figma会生成所有尺寸的PNG文件
3. 手动重命名为标准iOS文件名（参考下方文件列表）
4. 复制到 SpeechNote/Assets.xcassets/AppIcon.appiconset/ 目录

方法2：使用在线工具（最快速）

选项A：makeappicon.com

1. 访问 https://makeappicon.com/^[2]
2. 上传 AppIcon_Template.svg 或自己设计的1024×1024 PNG
3. 选择 iOS 平台
4. 点击 Generate
5. 下载生成的ZIP包
6. 解压后替换到 SpeechNote/Assets.xcassets/AppIcon.appiconset/

选项B：appicon.co

1. 访问 https://appicon.co/^[3]
2. 拖拽1024×1024图标到页面
3. 自动生成所有iOS尺寸
4. 下载并替换到项目

选项C：Icon Set Creator (Mac App)

1. 从Mac App Store下载 Icon Set Creator
2. 打开应用，导入1024×1024图标
3. 选择 iOS 模板
4. 导出到 AppIcon.appiconset 文件夹
5. 整个文件夹替换到项目

方法3：使用命令行（适合开发者）

前提条件

• macOS系统
• 安装了ImageMagick：brew install imagemagick

步骤1：转换SVG为PNG主图

cd /Users/Work/MF_Projects/SpeechNote/docs

# 使用ImageMagick转换SVG为1024×1024 PNG
convert -background none -size 1024x1024 AppIcon_Template.svg icon_1024.png

步骤2：批量生成所有尺寸

创建脚本 generate_icons.sh：

#!/bin/bash

# 设置源文件和输出目录
SOURCE="icon_1024.png"
OUTPUT_DIR="../SpeechNote/Assets.xcassets/AppIcon.appiconset"

# 定义所有需要的尺寸和文件名
declare -A SIZES=(
  ["29"]="Icon-App-29x29@1x.png"
  ["58"]="Icon-App-29x29@2x.png"
  ["87"]="Icon-App-29x29@3x.png"
  ["40"]="Icon-App-20x20@2x.png"
  ["60"]="Icon-App-20x20@3x.png"
  ["80"]="Icon-App-40x40@2x.png"
  ["120a"]="Icon-App-40x40@3x.png"
  ["120b"]="Icon-App-60x60@2x.png"
  ["180"]="Icon-App-60x60@3x.png"
  ["1024"]="ItunesArtwork@2x.png"
)

# 批量转换
for size in"${!SIZES[@]}"; do
  filename="${SIZES[$size]}"
  actual_size="${size//[a-z]/}"# 移除字母后缀
echo"生成 ${filename} (${actual_size}×${actual_size})..."
  convert "$SOURCE" -resize "${actual_size}x${actual_size}""$OUTPUT_DIR/$filename"
done

echo"所有图标生成完成！"

运行脚本：

chmod +x generate_icons.sh
./generate_icons.sh

步骤3：验证输出

cd ../SpeechNote/Assets.xcassets/AppIcon.appiconset
ls -lh *.png

文件清单（替换前检查）

替换到 SpeechNote/Assets.xcassets/AppIcon.appiconset/ 的文件：

✅ Icon-App-29x29@1x.png      (29×29)
✅ Icon-App-29x29@2x.png      (58×58)
✅ Icon-App-29x29@3x.png      (87×87)
✅ Icon-App-20x20@2x.png      (40×40)
✅ Icon-App-20x20@3x.png      (60×60)
✅ Icon-App-40x40@2x.png      (80×80)
✅ Icon-App-40x40@3x.png      (120×120)
✅ Icon-App-60x60@2x.png      (120×120)
✅ Icon-App-60x60@3x.png      (180×180)
✅ ItunesArtwork@2x.png       (1024×1024)

注意：120×120尺寸有两个不同的文件名（Spotlight和主屏幕@2x）。确保两个文件内容相同。

在Xcode中集成

步骤1：替换文件

# 备份旧图标（可选）
cd /Users/Work/MF_Projects/SpeechNote/SpeechNote/Assets.xcassets/AppIcon.appiconset
mkdir backup_$(date +%Y%m%d)
cp *.png backup_$(date +%Y%m%d)/

# 复制新图标到此目录
# （使用上述任一方法生成的PNG文件）

步骤2：验证Contents.json

确认 Contents.json 包含所有图像引用（已存在，无需修改）：

{
"images":[
{
"size":"20x20",
"idiom":"iphone",
"filename":"Icon-App-20x20@2x.png",
"scale":"2x"
},
    ...
]
}

步骤3：清理并重新编译

1. 在Xcode中打开 SpeechNote.xcworkspace
2. Product → Clean Build Folder (或 Cmd+Shift+K)
3. Product → Build (或 Cmd+B)
4. 检查Build日志无警告/错误

步骤4：真机测试

1. 连接iPhone到Mac
2. Product → Run (或 Cmd+R)
3. 安装后检查主屏幕图标
4. 进入 设置 → 通知 查看小尺寸图标
5. 使用Spotlight搜索应用查看80×80图标

质量检查清单

在提交App Store前，验证以下项：

• ☐ 1024×1024: 边缘清晰，无锯齿，渐变平滑
• ☐ 180×180: 主屏幕@3x显示，麦克风轮廓清晰
• ☐ 120×120: Spotlight和@2x主屏幕，细节可辨
• ☐ 60×60: 通知图标，核心形状突出
• ☐ 29×29: 设置图标，简化为最小必要元素
• ☐ 对比度: 在白色/黑色/绿色背景下均可见
• ☐ 文件大小: 每个PNG < 500KB
• ☐ 无alpha通道: 背景完全不透明
• ☐ RGB色彩: 非CMYK格式

常见问题

Q1: SVG在Xcode中不显示？

A: iOS不直接支持SVG图标。必须转换为PNG后使用。

Q2: 图标在真机上显示模糊？

A: 检查是否提供了@2x和@3x版本。iPhone使用@3x（如180×180），缺失会导致系统缩放产生模糊。

Q3: 图标边缘有白边？

A: 确保PNG背景完全不透明，使用绿色填充而非透明背景。

Q4: 需要iPad图标吗？

A: 如果应用仅支持iPhone，可以不提供iPad尺寸。如需支持，需额外添加：

• 20×20@1x, @2x (iPad通知)
• 29×29@1x, @2x (iPad设置)
• 40×40@1x, @2x (iPad Spotlight)
• 76×76@1x, @2x (iPad主屏幕)
• 83.5×83.5@2x (iPad Pro)

Q5: App Store上传失败？

A: 确保1024×1024版本：

• 没有alpha通道（完全不透明）
• 没有圆角（系统会自动添加）
• RGB色彩空间
• 文件大小 < 1MB

真机测试

图标生成完成后：

1. ✅ 替换所有PNG文件到 AppIcon.appiconset
2. ✅ 在Xcode中Clean并重新Build
3. ✅ 真机测试各尺寸显示效果
4. ✅ 截图保存用于App Store提交
5. ✅ 更新App Store Connect中的应用图标预览

完成标志：在iPhone主屏幕看到绿色麦克风图标！✨