app-icon

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

App Icon

应用图标

Generate a store-quality launcher icon (iOS App Store icon + Android adaptive icon + web favicon) for an Expo / React Native app, then post-process it to meet store requirements.
<aesthetic_target> The target is a premium, vibrant, dimensional icon like top App Store featured apps — NOT a flat pictogram. See
references/
for the north star:
  • references/example-character-mascot.webp
    — what this recipe produces for a character app (glossy 3D mascot + heart, full-bleed warm gradient).
  • references/example-symbol-object.webp
    — what it produces for a symbol / monochrome brand (glossy 3D spark on a deep ink background — proof a one-color brand still gets a dimensional icon, not a flat glyph).
  • references/inspiration-premium-icons.webp
    — external inspiration (soft glossy blob mascot on a vivid gradient tile).
The look every time: one dimensional hero (a soft glossy 3D character/mascot, or a bold symbolic object/abstract form) with smooth gradients, soft studio lighting, gentle rim light and a subtle glow, centered on a full-bleed vivid branded background that reaches all four edges. Saturated, high-contrast, polished, delightful.
The #1 failure to avoid: a flat monochrome pictogram / black-on-white glyph / line icon on a plain white background. If the output looks like an SVG symbol, it is wrong — regenerate. </aesthetic_target>
<capability_gate> Use ANY image-generation tool you have. Generate the icon yourself; do not just hand the prompt back if you can run a tool.
  • Codex → the built-in
    image_gen
    tool. Generate, then copy the file into the repo.
  • gemini-cli
    available
    (the api2cli CLI —
    gemini-cli image generate
    ) → use it directly; it is excellent for icons (exact command in
    <generation_loop>
    ). One-time auth:
    gemini-cli auth set <GOOGLE_API_KEY>
    . (Install:
    npx api2cli bundle gemini && npx api2cli link gemini
    .)
  • Any other raster image tool (gpt-image, an MCP image tool, Imagen, etc.) → use it with the prompt from
    <icon_recipe>
    .
  • Truly no image tool reachable → do NOT fake it (no SVG-to-PNG pipelines — that produces flat, amateur results). Build the final prompt from
    <icon_recipe>
    , give it to the user to run, then resume at
    <post_processing>
    with the file they provide. </capability_gate>
<locate_assets> Find where this app's icon actually lives before writing anything. Read the Expo config (
app.json
,
app.config.js
, or
app.config.ts
) and use the real paths:
  • iOS icon →
    expo.icon
    (commonly
    ./assets/icon.png
    or
    ./assets/images/icon.png
    )
  • Android adaptive icon foreground →
    expo.android.adaptiveIcon.foregroundImage
    (commonly
    ./assets/adaptive-icon.png
    )
  • Android adaptive background color →
    expo.android.adaptiveIcon.backgroundColor
  • Web favicon →
    expo.web.favicon
    (commonly
    ./assets/favicon.png
    )
In a monorepo the app may live under
mobile-app/
or
apps/<name>/
— resolve paths relative to the Expo project root. Below,
<ASSETS>
means that app's resolved assets directory. Pull brand colors and app concept/name from the project (a brand/site config, the README, or ask the user). Use color names in the prompt, never hex. </locate_assets>
<objective> | Asset | Target file (typical) | Spec | | --- | --- | --- | | iOS app icon | `<ASSETS>/icon.png` | 1024x1024, square, **NO transparency**, **no baked rounded mask** (iOS applies its own) | | Android adaptive icon | `<ASSETS>/adaptive-icon.png` | foreground layer, subject inside the central ~66% safe circle, padded | | Web favicon | `<ASSETS>/favicon.png` | 192x192 derived from the icon | </objective>
<icon_recipe> Fill the two project blanks — Subject (the product's concept/mascot/symbol) and the Color palette (named brand colors, never hex) — then send the whole block as ONE prompt to your image tool.
Create a 1024x1024 square app icon — premium, vibrant and dimensional, in the style of top App Store featured apps.

Subject: <single hero for <AppName> — a friendly soft 3D character/mascot with simple dot eyes, OR a bold symbolic object/abstract form; instantly readable at small sizes>

The look (north star): one dimensional hero rendered in soft glossy 3D (or rich 2.5D) — smooth color gradients, soft studio lighting, gentle rim light, a subtle soft glow, rounded volumes and real depth — centered on a FULL-BLEED vivid branded background (solid color or smooth gradient) that reaches all four edges. Saturated, high-contrast, polished, delightful. Like a soft glossy jelly/clay form with tasteful highlights.

Background: fill the ENTIRE square edge-to-edge with a bold branded color or smooth gradient (e.g. a vivid blue gradient, or a deep dark backdrop for high contrast). Never plain white, never empty. The background is part of the icon.

Subject treatment: dimensional and glossy — soft rounded 3D forms, smooth gradients, gentle highlights and rim light, a subtle inner glow, clear depth and volume. Rich saturated color. One strong, simple silhouette.

Composition: the hero centered, filling ~60-80% of the canvas with comfortable breathing room; the branded background fills the rest to the edges. One focal point, no clutter.

If the brand is monochrome (one ink + one accent), STILL make it fully dimensional and premium — glossy 3D form, tonal gradients within the brand color, soft lighting, a bold full-bleed background. Never a flat single-color glyph.

Do NOT: flat monochrome pictogram, black-on-white glyph, single-color line/silhouette icon, plain SVG/vector symbol, sticker or clip-art; plain white or empty background; a smaller rounded card/icon floating inside the canvas (no icon-in-icon, no outer margins); baked rounded app-icon corners or device-rounded corners (keep a full square with sharp 90 degree corners — iOS applies its own mask); any text, letters, numbers, monograms or watermark; realistic human faces or photos as the main subject; real or trademarked brand logos; mirror chrome, garish neon, or lens flares.

Color palette: <brand colors as names — e.g. "vivid blue gradient background, soft white-to-sky-blue glossy character with subtle highlights">. High saturation, strong contrast on the home screen.

Technical: square 1:1; background bleeds to all four edges with sharp corners; keep critical details within the central ~70% so an Android circular/rounded mask never clips them; punchy and readable at 60px (blur test).
Archetype (pick one, internal): a friendly character/mascot (simple dot eyes) is a strong default for consumer / social / wellness / AI apps; a symbolic object or abstract form fits finance, productivity, dev tools, utilities. Don't force a face onto a utility, and don't flatten a playful app into a glyph. </icon_recipe>
<generation_loop>
  1. Generate with your tool. With
    gemini-cli
    the validated command (Nano Banana Pro) is:
    bash
    PROMPT="$(cat <<'EOF'
    <paste the filled icon_recipe prompt here>
    EOF
    )"
    gemini-cli image generate --prompt "$PROMPT" \
      --model gemini-3-pro-image-preview --aspect-ratio 1:1 --image-size 2K \
      --out ./icon-raw.png --images-only --json
    (
    gemini-3-pro-image-preview
    = Nano Banana Pro, best for icons;
    gemini-2.5-flash-image
    is the cheaper fallback. Codex: use the
    image_gen
    tool with the same prompt.)
  2. Visually inspect every output: premium and dimensional (glossy 3D, depth)? full-bleed branded background (NOT white)? strong simple silhouette? readable at small size? NO flat-glyph look, NO accidental text/watermark?
  3. Reject and regenerate anything that drifts flat/monochrome/SVG-like or lands on a white background — tighten the prompt, don't accept "almost".
  4. Safety-filter gotcha: reword ambiguous prompts to a plain neutral paragraph and retry.
  5. Blur test: shrink to ~64px — if the mark turns to mush, simplify the silhouette. </generation_loop>
<post_processing> Models often bake rounded corners or a light border around the tile. Scale up slightly and center-crop so the rounded ring falls off-canvas, leaving a true full-bleed square.
sips
is built into macOS; ImageMagick (
magick
,
brew install imagemagick
) is only needed for Android padding. Replace
<ASSETS>
and
<brand-bg-color>
with the values from
<locate_assets>
.
bash
undefined
为Expo / React Native应用生成符合应用商店标准的启动图标(iOS App Store图标 + Android自适应图标 + Web网站图标),然后进行后期处理以满足商店要求。
<aesthetic_target> 目标是打造像App Store精选顶级应用那样的高品质、富有活力的立体图标——而非扁平化象形图。参考
references/
中的标杆示例:
  • references/example-character-mascot.webp
    —— 为角色类应用生成的效果(光泽感3D吉祥物+爱心,全幅暖色调渐变)。
  • references/example-symbol-object.webp
    —— 为符号/单色品牌生成的效果(深墨色背景上的光泽感3D火花——证明单色品牌依然能打造立体图标,而非扁平化字形)。
  • references/inspiration-premium-icons.webp
    —— 外部灵感来源(鲜艳渐变背景上的软光泽 blob 吉祥物)。
每次生成的视觉风格:一个立体主体(软光泽3D角色/吉祥物,或醒目的符号化对象/抽象形态)搭配平滑渐变、柔和工作室灯光、柔和轮廓光和微妙光晕,居中放置在全幅鲜艳品牌背景上,背景延伸至四边。色彩饱和、高对比度、精致美观。
需避免的头号错误: 纯白色背景上的扁平化单色象形图/黑白字形/线条图标。如果输出看起来像SVG符号,那就是错误的——重新生成。 </aesthetic_target>
<capability_gate> 使用你拥有的任意图像生成工具。自行生成图标;若能运行工具,请勿仅返回提示词。
  • Codex → 内置的**
    image_gen
    **工具。生成后将文件复制到仓库中。
  • gemini-cli
    可用
    (api2cli命令行工具 ——
    gemini-cli image generate
    )→ 直接使用;它非常适合生成图标(
    <generation_loop>
    中有确切命令)。一次性授权:
    gemini-cli auth set <GOOGLE_API_KEY>
    。(安装:
    npx api2cli bundle gemini && npx api2cli link gemini
    。)
  • 其他任何光栅图像工具(gpt-image、MCP图像工具、Imagen等)→ 使用
    <icon_recipe>
    中的提示词运行。
  • 确实无法访问任何图像工具 → 请勿伪造结果(不要使用SVG转PNG流程——这会产生扁平化、业余的效果)。根据
    <icon_recipe>
    构建最终提示词,交给用户运行,然后在用户提供文件后从
    <post_processing>
    步骤继续。 </capability_gate>
<locate_assets> 在进行任何操作前,先找到该应用图标的实际存储位置。读取Expo配置文件(
app.json
app.config.js
app.config.ts
)并使用真实路径:
  • iOS图标 →
    expo.icon
    (通常为
    ./assets/icon.png
    ./assets/images/icon.png
  • Android自适应图标前景 →
    expo.android.adaptiveIcon.foregroundImage
    (通常为
    ./assets/adaptive-icon.png
  • Android自适应图标背景色 →
    expo.android.adaptiveIcon.backgroundColor
  • Web网站图标 →
    expo.web.favicon
    (通常为
    ./assets/favicon.png
在单体仓库中,应用可能位于
mobile-app/
apps/<name>/
目录下——路径需相对于Expo项目根目录解析。下方的
<ASSETS>
指该应用已解析的资源目录。从项目中提取品牌颜色应用概念/名称(品牌/站点配置文件、README,或询问用户)。提示词中使用颜色名称,切勿使用十六进制值。 </locate_assets>
<objective> | 资源 | 目标文件(典型路径) | 规范 | | --- | --- | --- | | iOS应用图标 | `<ASSETS>/icon.png` | 1024x1024像素,正方形,**无透明区域**,**无内置圆角遮罩**(iOS会自行添加) | | Android自适应图标 | `<ASSETS>/adaptive-icon.png` | 前景层,主体位于中心约66%的安全圈内,带内边距 | | Web网站图标 | `<ASSETS>/favicon.png` | 从图标衍生的192x192像素图像 | </objective>
<icon_recipe> 填写两个项目空白项——主体(产品的概念/吉祥物/符号)和调色板(品牌颜色名称,切勿使用十六进制值)——然后将整个模块作为单个提示词发送到你的图像工具。
Create a 1024x1024 square app icon — premium, vibrant and dimensional, in the style of top App Store featured apps.

Subject: <single hero for <AppName> — a friendly soft 3D character/mascot with simple dot eyes, OR a bold symbolic object/abstract form; instantly readable at small sizes>

The look (north star): one dimensional hero rendered in soft glossy 3D (or rich 2.5D) — smooth color gradients, soft studio lighting, gentle rim light, a subtle soft glow, rounded volumes and real depth — centered on a FULL-BLEED vivid branded background (solid color or smooth gradient) that reaches all four edges. Saturated, high-contrast, polished, delightful. Like a soft glossy jelly/clay form with tasteful highlights.

Background: fill the ENTIRE square edge-to-edge with a bold branded color or smooth gradient (e.g. a vivid blue gradient, or a deep dark backdrop for high contrast). Never plain white, never empty. The background is part of the icon.

Subject treatment: dimensional and glossy — soft rounded 3D forms, smooth gradients, gentle highlights and rim light, a subtle inner glow, clear depth and volume. Rich saturated color. One strong, simple silhouette.

Composition: the hero centered, filling ~60-80% of the canvas with comfortable breathing room; the branded background fills the rest to the edges. One focal point, no clutter.

If the brand is monochrome (one ink + one accent), STILL make it fully dimensional and premium — glossy 3D form, tonal gradients within the brand color, soft lighting, a bold full-bleed background. Never a flat single-color glyph.

Do NOT: flat monochrome pictogram, black-on-white glyph, single-color line/silhouette icon, plain SVG/vector symbol, sticker or clip-art; plain white or empty background; a smaller rounded card/icon floating inside the canvas (no icon-in-icon, no outer margins); baked rounded app-icon corners or device-rounded corners (keep a full square with sharp 90 degree corners — iOS applies its own mask); any text, letters, numbers, monograms or watermark; realistic human faces or photos as the main subject; real or trademarked brand logos; mirror chrome, garish neon, or lens flares.

Color palette: <brand colors as names — e.g. "vivid blue gradient background, soft white-to-sky-blue glossy character with subtle highlights">. High saturation, strong contrast on the home screen.

Technical: square 1:1; background bleeds to all four edges with sharp corners; keep critical details within the central ~70% so an Android circular/rounded mask never clips them; punchy and readable at 60px (blur test).
原型(选其一,内部参考):友好的角色/吉祥物(简单圆点眼睛)是消费类/社交类/健康类/AI应用的强力默认选项;符号化对象或抽象形态适合金融、生产力、开发工具、实用工具类应用。不要强行给工具类应用添加人脸,也不要将趣味类应用简化为字形。 </icon_recipe>
<generation_loop>
  1. 生成:使用你的工具。使用
    gemini-cli
    时,经过验证的命令(Nano Banana Pro)如下:
    bash
    PROMPT="$(cat <<'EOF'
    <paste the filled icon_recipe prompt here>
    EOF
    )"
    gemini-cli image generate --prompt "$PROMPT" \
      --model gemini-3-pro-image-preview --aspect-ratio 1:1 --image-size 2K \
      --out ./icon-raw.png --images-only --json
    gemini-3-pro-image-preview
    = Nano Banana Pro,最适合生成图标;
    gemini-2.5-flash-image
    是更经济的备选方案。Codex:使用
    image_gen
    工具和相同提示词。)
  2. 视觉检查每个输出:是否高品质且立体(光泽感3D、有深度)?是否为全幅品牌背景(非白色)?是否有清晰简洁的轮廓?小尺寸下是否可读?是否无扁平化字形、无意外文本/水印?
  3. 拒绝并重新生成任何趋向扁平化/单色/SVG风格或背景为白色的结果——收紧提示词,不要接受“差不多”的结果。
  4. 安全过滤器陷阱:将模糊的提示词改写为平实中性的段落并重试。
  5. 模糊测试:缩小至约64像素——如果标志变得模糊不清,简化其轮廓。 </generation_loop>
<post_processing> 模型通常会在图标周围添加圆角或浅色边框。略微放大并居中裁剪,使圆角环移出画布,得到真正的全幅正方形。
sips
是macOS内置工具;ImageMagick(
magick
,通过
brew install imagemagick
安装)仅在处理Android内边距时需要。将
<ASSETS>
<brand-bg-color>
替换为
<locate_assets>
中的值。
bash
undefined

1. Full-bleed fix: push any baked rounded corners / border off-canvas, then normalize to 1024.

1. 全幅修复:将任何内置圆角/边框移出画布,然后标准化为1024像素。

sips -z 1126 1126 icon-raw.png --out /tmp/icon-up.png # scale up ~10% sips -c 1024 1024 /tmp/icon-up.png --out /tmp/icon-fullbleed.png # center-crop to 1024 square
sips -z 1126 1126 icon-raw.png --out /tmp/icon-up.png # 放大约10% sips -c 1024 1024 /tmp/icon-up.png --out /tmp/icon-fullbleed.png # 居中裁剪为1024像素正方形

(skip step 1 if the generated background already bleeds to sharp corners.)

(如果生成的背景已延伸至直角边缘,可跳过步骤1。)

2. iOS icon: enforce 1024 and guarantee NO transparency (App Store rejects alpha).

2. iOS图标:强制尺寸为1024像素并确保无透明区域(App Store会拒绝带透明通道的图标)。

sips -s format png /tmp/icon-fullbleed.png --out <ASSETS>/icon.png sips -g hasAlpha <ASSETS>/icon.png # must say: hasAlpha no
sips -s format png /tmp/icon-fullbleed.png --out <ASSETS>/icon.png sips -g hasAlpha <ASSETS>/icon.png # 必须显示:hasAlpha no

If it reports alpha, flatten: magick in.png -background "<brand-bg-color>" -alpha remove -alpha off <ASSETS>/icon.png

如果检测到透明通道,进行扁平化处理:magick in.png -background "<brand-bg-color>" -alpha remove -alpha off <ASSETS>/icon.png

3. Android adaptive icon: pad the subject into the central ~66% safe circle on a brand background.

3. Android自适应图标:将主体放置在品牌背景上中心约66%的安全圈内并添加内边距。

magick <ASSETS>/icon.png -resize 66% -background "<brand-bg-color>" -gravity center -extent 1024x1024 <ASSETS>/adaptive-icon.png
magick <ASSETS>/icon.png -resize 66% -background "<brand-bg-color>" -gravity center -extent 1024x1024 <ASSETS>/adaptive-icon.png

Make app config match: expo.android.adaptiveIcon.backgroundColor == <brand-bg-color>.

确保应用配置匹配:expo.android.adaptiveIcon.backgroundColor == <brand-bg-color>

No magick? Re-run the recipe adding "leave ~20% padding for the Android adaptive safe zone".

没有magick?重新运行生成流程并添加提示“为Android自适应安全区留出约20%的内边距”。

4. Favicon + final verification

4. 网站图标 + 最终验证

sips -z 192 192 <ASSETS>/icon.png --out <ASSETS>/favicon.png sips -g pixelWidth -g pixelHeight -g hasAlpha <ASSETS>/icon.png <ASSETS>/adaptive-icon.png <ASSETS>/favicon.png

Remember: **icon and adaptive-icon changes require a native rebuild** (`npx expo run:ios` / `npx expo run:android`, or a new EAS build) — they will NOT appear on hot reload. The favicon is a web asset and reloads normally.
</post_processing>

<render_verification>
File inspection is not enough — confirm the icon on a device/simulator after a native rebuild.

1. Rebuild the dev client (`npx expo run:ios` or `npx expo run:android`).
2. On the home screen confirm: the new art shows (not the old/default), iOS applies a clean rounded mask with **no double-rounding and no white/transparent corner halo**, and the mark is readable at home-screen size.
3. Fail the run if the icon still shows the previous art, a flat glyph, or a corner halo. Fix before reporting completion.
</render_verification>

<failure_modes>
- **Flat monochrome glyph / black-on-white pictogram** (the most common, worst failure) → the prompt leaned minimal/matte; re-emphasize "premium vibrant dimensional, glossy 3D, full-bleed branded background, NOT a flat SVG symbol", and regenerate.
- White/transparent corner halo after the iOS mask → baked rounded corners; run the step-1 scale-up + center-crop, verify `hasAlpha no`, rebuild.
- Generated icon has transparency → App Store rejection; flatten onto the brand bg (`magick ... -alpha remove -alpha off`).
- Android adaptive icon looks cropped at the edges → subject sat outside the central 66% safe circle; increase padding or regenerate with explicit padding.
- Icon unchanged after editing the PNG → no native rebuild; hot reload never updates the launcher icon.
- Prompt rejected by safety filter → reword neutrally, simplify to one plain paragraph.
- Mark turns to mush at small size → too detailed; simplify to a single strong silhouette (blur/64px test).
</failure_modes>
sips -z 192 192 <ASSETS>/icon.png --out <ASSETS>/favicon.png sips -g pixelWidth -g pixelHeight -g hasAlpha <ASSETS>/icon.png <ASSETS>/adaptive-icon.png <ASSETS>/favicon.png

注意:**图标和自适应图标更改需要重新构建原生应用**(`npx expo run:ios` / `npx expo run:android`,或新的EAS构建)——热重载不会更新启动图标。网站图标是Web资源,可正常重载。
</post_processing>

<render_verification>
仅检查文件是不够的——重新构建原生应用后,在设备/模拟器上确认图标显示正常。

1. 重新构建开发客户端(`npx expo run:ios`或`npx expo run:android`)。
2. 在主屏幕上确认:新图标已显示(而非旧图标/默认图标),iOS添加了干净的圆角遮罩且**无双重圆角和白色/透明边角光晕**,标志在主屏幕尺寸下可读。
3. 如果图标仍显示旧内容、扁平化字形或边角光晕,则判定失败。修复后再报告完成。
</render_verification>

<failure_modes>
- **扁平化单色字形 / 黑白象形图**(最常见、最严重的错误)→ 提示词偏向极简/哑光风格;重新强调“高品质富有活力的立体、光泽感3D、全幅品牌背景、非扁平化SVG符号”,然后重新生成。
- iOS遮罩后出现白色/透明边角光晕→ 内置了圆角;执行步骤1的放大+居中裁剪,验证`hasAlpha no`,重新构建应用。
- 生成的图标带有透明通道→ 会被App Store拒绝;在品牌背景上进行扁平化处理(`magick ... -alpha remove -alpha off`)。
- Android自适应图标边缘被裁剪→ 主体位于中心66%安全圈外;增加内边距或明确要求内边距后重新生成。
- 编辑PNG后图标未更改→ 未重新构建原生应用;热重载永远不会更新启动图标。
- 提示词被安全过滤器拒绝→ 改为中性表述,简化为平实段落。
- 小尺寸下标志模糊不清→ 细节过多;简化为单一清晰的轮廓(模糊/64像素测试)。
</failure_modes>