Back to Details

ios-app-icon

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

iOS App Icon Generation

iOS应用图标生成

Generate premium, Apple Design Award-worthy app icons using Nanobanana.
使用Nanobanana生成可媲美苹果设计奖品质的优质应用图标。

Quick Start

快速开始

bash
bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "App icon design for [app type]. [Main element] with [style] on [color] gradient. Premium quality, sophisticated, single focal point, subtle depth" \
  --size 1024x1024 \
  --output "AppIcon.png"
bash
bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "App icon design for [app type]. [Main element] with [style] on [color] gradient. Premium quality, sophisticated, single focal point, subtle depth" \
  --size 1024x1024 \
  --output "AppIcon.png"

Requirements

要求

SpecValue
Master size1024×1024 px
FormatPNG
BackgroundFully opaque (no transparency)
CornersDon't add—iOS applies mask
Shadows/glossDon't add—iOS applies effects
规格数值
主图尺寸1024×1024 px
格式PNG
背景完全不透明（无透明度）
圆角无需添加——iOS会自动应用遮罩
阴影/光泽无需添加——iOS会自动添加效果

Prompt Formula

提示词公式

"App icon design for [purpose]. [Main element] with [visual style] on [color description] gradient background. Premium quality, sophisticated, minimal, single focal point, [lighting], rich colors"
Key elements:
  • Purpose: meditation app, fitness tracker, note-taking app
  • Main element: lotus flower, dumbbell, pencil
  • Visual style: subtle 3D depth, metallic sheen, soft glow
  • Color: rich purple-to-violet, vibrant orange-to-red, deep blue
  • Lighting: subtle lighting from top-left, ambient glow
"App icon design for [purpose]. [Main element] with [visual style] on [color description] gradient background. Premium quality, sophisticated, minimal, single focal point, [lighting], rich colors"
关键元素：
  • 用途：冥想应用、健身追踪器、笔记应用
  • 主要元素：莲花、哑铃、铅笔
  • 视觉风格：细腻3D立体感、金属光泽、柔和发光效果
  • 颜色：浓郁的紫到紫罗兰渐变、鲜亮的橙到红渐变、深蓝色
  • 光照：左上方柔和光照、环境光

Examples

示例

Meditation App:
bash
bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "App icon design for meditation app. Elegant lotus flower with subtle 3D depth on rich purple-to-violet gradient. Premium quality, sophisticated, single focal point, subtle top-left lighting" \
  --size 1024x1024 \
  --output "AppIcon-Meditation.png"
Fitness App:
bash
bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "App icon design for fitness app. Bold dumbbell with metallic chrome finish on vibrant orange-to-red gradient. Premium quality, energetic, single focal point, dynamic lighting" \
  --size 1024x1024 \
  --output "AppIcon-Fitness.png"
Finance App:
bash
bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "App icon design for finance app. Elegant coin stack with gold metallic sheen on deep emerald-to-teal gradient. Premium quality, trustworthy, single focal point, subtle ambient glow" \
  --size 1024x1024 \
  --output "AppIcon-Finance.png"
冥想应用：
bash
bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "App icon design for meditation app. Elegant lotus flower with subtle 3D depth on rich purple-to-violet gradient. Premium quality, sophisticated, single focal point, subtle top-left lighting" \
  --size 1024x1024 \
  --output "AppIcon-Meditation.png"
健身应用：
bash
bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "App icon design for fitness app. Bold dumbbell with metallic chrome finish on vibrant orange-to-red gradient. Premium quality, energetic, single focal point, dynamic lighting" \
  --size 1024x1024 \
  --output "AppIcon-Fitness.png"
金融应用：
bash
bun .claude/skills/nanobanana-skill/nanobanana.ts \
  --prompt "App icon design for finance app. Elegant coin stack with gold metallic sheen on deep emerald-to-teal gradient. Premium quality, trustworthy, single focal point, subtle ambient glow" \
  --size 1024x1024 \
  --output "AppIcon-Finance.png"

Resize to All iOS Sizes

调整为所有iOS尺寸

After generating the 1024x1024 master:
bash
undefined
生成1024x1024主图后：
bash
undefined

All required sizes

全部所需尺寸

magick AppIcon.png -resize 1024x1024 AppIcon-1024.png # App Store magick AppIcon.png -resize 180x180 AppIcon-60@3x.png # iPhone @3x magick AppIcon.png -resize 120x120 AppIcon-60@2x.png # iPhone @2x magick AppIcon.png -resize 167x167 AppIcon-83.5@2x.png # iPad Pro @2x magick AppIcon.png -resize 152x152 AppIcon-76@2x.png # iPad @2x magick AppIcon.png -resize 87x87 AppIcon-29@3x.png # Spotlight @3x magick AppIcon.png -resize 80x80 AppIcon-40@2x.png # Spotlight @2x magick AppIcon.png -resize 58x58 AppIcon-29@2x.png # Settings @2x magick AppIcon.png -resize 40x40 AppIcon-40@1x.png # Spotlight @1x

---
magick AppIcon.png -resize 1024x1024 AppIcon-1024.png # App Store magick AppIcon.png -resize 180x180 AppIcon-60@3x.png # iPhone @3x magick AppIcon.png -resize 120x120 AppIcon-60@2x.png # iPhone @2x magick AppIcon.png -resize 167x167 AppIcon-83.5@2x.png # iPad Pro @2x magick AppIcon.png -resize 152x152 AppIcon-76@2x.png # iPad @2x magick AppIcon.png -resize 87x87 AppIcon-29@3x.png # Spotlight @3x magick AppIcon.png -resize 80x80 AppIcon-40@2x.png # Spotlight @2x magick AppIcon.png -resize 58x58 AppIcon-29@2x.png # 设置 @2x magick AppIcon.png -resize 40x40 AppIcon-40@1x.png # Spotlight @1x

---

Size Reference

尺寸参考

Size (px)Usage
1024×1024App Store
180×180iPhone App @3x
120×120iPhone App @2x
167×167iPad Pro @2x
152×152iPad @2x
87×87Spotlight @3x
80×80Spotlight @2x
58×58Settings @2x
40×40Spotlight @1x
尺寸 (px)用途
1024×1024App Store
180×180iPhone 应用 @3x
120×120iPhone 应用 @2x
167×167iPad Pro @2x
152×152iPad @2x
87×87Spotlight @3x
80×80Spotlight @2x
58×58设置 @2x
40×40Spotlight @1x

Prompt Tips

提示词技巧

Do:
  • "App icon design for [purpose]" — specific context
  • "Premium quality, sophisticated" — quality signals
  • "Rich [color]-to-[color] gradient" — specific colors
  • "Subtle 3D depth" or "metallic sheen" — visual interest
  • "Single focal point" — clarity
Avoid:
  • "iOS app icon" — triggers generic looks
  • "Simple" alone — undersells quality
  • "Flat design" — too basic
  • Vague colors like just "purple" or "blue"
推荐做法：
  • 开头写"App icon design for [用途]" —— 提供明确上下文
  • 加入"Premium quality, sophisticated" —— 提示生成高品质内容
  • 写"Rich [颜色1]-to-[颜色2] gradient" —— 指定明确的颜色
  • 加入"Subtle 3D depth" 或 "metallic sheen" —— 增加视觉层次感
  • 加入"Single focal point" —— 保证图标清晰易识别
避免做法：
  • 写"iOS app icon" —— 会生成过于通用的效果
  • 只写"Simple" —— 会降低生成品质
  • 写"Flat design" —— 效果会过于简陋
  • 使用模糊的颜色描述，比如只写"purple"或"blue"

Quality Check

质量检查

After generation:
  1. View the icon with Read tool
  2. Verify:
    • Colors are rich, not washed out
    • Single clear focal point
    • Recognizable at small sizes (check 40x40)
    • Premium feel, not generic
  3. If issues: adjust prompt, regenerate
生成后：
  1. 使用Read工具查看生成的图标
  2. 验证以下内容：
    • 颜色饱满，没有发灰褪色
    • 有唯一清晰的视觉焦点
    • 小尺寸下可识别（检查40x40版本）
    • 质感高级，不通用
  3. 如果有问题：调整提示词，重新生成

Notes

注意事项

  • Rounded corners: AI often adds them. That's OK—iOS applies its own mask anyway.
  • Gradients: Always better than flat colors for premium feel.
  • Test small: Resize to 40x40 to verify readability.
  • 圆角：AI经常会自动添加圆角，没问题——反正iOS会应用自己的遮罩
  • 渐变：比纯色更能营造高级质感
  • 小尺寸测试：调整到40x40尺寸验证可读性