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.pngOr run npm run generate:assets if sharp is installed. Then update app.json splash backgroundColor to match your brand primary color.
Icon Generation
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.
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 Type | Object 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.
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
| Problem | Fix |
|---|---|
| L-brackets become arrows | Say "crisp white L-shaped corner brackets like a scanning viewfinder" |
| Wrong background color | Be explicit: "Solid [COLOR] [HEX] background" at the start |
| Text appears in image | Always end with "No text no letters no words" |
| Model ignores brackets | Make object smaller — say "small", "centered with lots of space around it" |
Splash Screen Generation
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.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
| Problem | Fix |
|---|---|
| Phone mockup appears | Add "No phone mockup" explicitly |
| Icon doesn't match | Describe the EXACT icon, not a generic concept |
| Background has gradient | Say "Flat solid [COLOR]" not just "[COLOR] background" |
| Extra elements appear | End with "Only these three elements... Nothing else." |
After Generation Checklist
| File | Description |
|---|---|
assets/source/icon-source.png | 1024x1024 final icon |
assets/source/splash-logo.png | Portrait splash screen |
assets/icon.png | Copy of icon-source.png |
assets/adaptive-icon.png | Copy of icon-source.png |
assets/favicon.png | 48x48 resized from icon |
app.json splash.backgroundColor | Must match brand primary color |
Generation scripts for 20+ app types
flux-1.1-pro icon prompts and nano-banana splash prompts that actually work.