App Icon & Splash Generation

Proven prompts and workflow for generating professional app icons and splash screens using the Replicate API. Icons use flux-1.1-pro, splash screens use nano-banana.

Quick Setup

After generating images, place them in assets/source/:

# Copy icon
cp assets/source/icon-source.png assets/icon.png
cp assets/source/icon-source.png assets/adaptive-icon.png

# Copy splash
cp assets/source/splash-logo.png assets/splash.png

# Generate favicon
cp assets/icon.png assets/favicon.png && sips -z 48 48 assets/favicon.png

Or run npm run generate:assets if sharp is installed. Then update app.json splash backgroundColor to match your brand primary color.

Icon Generation

Model: black-forest-labs/flux-1.1-pro via Replicate API. Best quality for icons. ~8s per image. Supports exact 1024x1024 dimensions.

Style 1: Identifier Apps (SnakeID Pattern)

For apps that identify/scan objects (fish, snakes, jewelry, wood, etc.). Brand color background, realistic 3D object, white L-shaped scanner brackets in corners. The gold standard reference is the SnakeID icon — red background, coiled snake, perfect white L-brackets.

Identifier App Prompt Template
A 1024x1024 square image. [BRAND_COLOR] background.
A [photorealistic/stunning realistic] 3D [OBJECT_DESCRIPTION], centered
[and floating] with soft shadow [beneath].
Four crisp white L-shaped corner brackets overlay the image in each
corner like a scanning viewfinder. The brackets are bold thick white lines.
No text no letters no words.

Examples That Worked

App TypeObject Description
Snake ID"A photorealistic 3D coiled red snake with detailed scales, centered with soft shadow"
Fish ID"A photorealistic 3D rainbow trout with iridescent spotted scales, centered floating with shadow"
Pet Paw"A photorealistic 3D bear paw print pressed into soft earth, centered with shadow"
Jewelry ID"A 3D gold chain necklace with an amethyst teardrop gemstone pendant, centered with shadow"

Style 2: AI Tool / Concept Apps

For apps that are tools (text rewriter, book summaries, cover letter, etc.). Brand color background, realistic 3D concept object, no scanner frame.

AI Tool App Prompt Template
A 1024x1024 square image. [BRAND_COLOR] background with soft radial glow.
In the center, [3D_CONCEPT_OBJECT_DESCRIPTION].
Warm soft lighting with gentle shadow beneath.
Premium realistic 3D render quality.
No text no letters no words.

Icon Generation Script

PROMPT="your prompt here"
ESCAPED=$(python3 -c "import json,sys; print(json.dumps(sys.stdin.read().strip()))" <<< "$PROMPT")

curl -s -X POST "https://api.replicate.com/v1/models/black-forest-labs/flux-1.1-pro/predictions" \
  -H "Authorization: Bearer $REPLICATE_API_KEY" \
  -H "Content-Type: application/json" \
  -d "{"input":{"prompt":$ESCAPED,"width":1024,"height":1024,"output_format":"png","safety_tolerance":3,"prompt_upsampling":true}}"

Common Pitfalls

ProblemFix
L-brackets become arrowsSay "crisp white L-shaped corner brackets like a scanning viewfinder"
Wrong background colorBe explicit: "Solid [COLOR] [HEX] background" at the start
Text appears in imageAlways end with "No text no letters no words"
Model ignores bracketsMake object smaller — say "small", "centered with lots of space around it"

Splash Screen Generation

Model: google/nano-banana via Replicate API. Better at text rendering and following layout instructions. ~8s per image.

Prompt Template

A mobile app splash screen in portrait 9:16 ratio.
Flat solid [BRAND_COLOR_HEX] background.
Centered vertically: a small [EXACT_ICON_DESCRIPTION_FROM_YOUR_ICON].
Below that the word [BRAND_NAME] in large bold white sans-serif text.
Below that [TAGLINE] in smaller thin white text.
Only these three elements centered on solid [BRAND_COLOR_HEX]. Nothing else.
Describe the ACTUAL icon you generated, not a generic concept. If your icon is "two boxing gloves clashing with a golden spark," say exactly that in the splash prompt.

Splash Generation Script

PROMPT="your splash prompt here"
ESCAPED=$(python3 -c "import json,sys; print(json.dumps(sys.stdin.read().strip()))" <<< "$PROMPT")

curl -s -X POST "https://api.replicate.com/v1/models/google/nano-banana/predictions" \
  -H "Authorization: Bearer $REPLICATE_API_KEY" \
  -H "Content-Type: application/json" \
  -d "{"input":{"prompt":$ESCAPED,"aspect_ratio":"9:16","output_format":"png"}}"

Common Pitfalls

ProblemFix
Phone mockup appearsAdd "No phone mockup" explicitly
Icon doesn't matchDescribe the EXACT icon, not a generic concept
Background has gradientSay "Flat solid [COLOR]" not just "[COLOR] background"
Extra elements appearEnd with "Only these three elements... Nothing else."

After Generation Checklist

FileDescription
assets/source/icon-source.png1024x1024 final icon
assets/source/splash-logo.pngPortrait splash screen
assets/icon.pngCopy of icon-source.png
assets/adaptive-icon.pngCopy of icon-source.png
assets/favicon.png48x48 resized from icon
app.json splash.backgroundColorMust match brand primary color
Assets Proven in Production

Generation scripts for 20+ app types

flux-1.1-pro icon prompts and nano-banana splash prompts that actually work.

flux-1.1-pro icons
nano-banana splash
Batch generation scripts
Get ShipReactNative
Save 40+ hours of setup