A splash screen is on screen for 1-3 seconds. That is long enough to brand the app and short enough that any visual noise becomes the user’s first frustration. The prompts below reserve a clean center rectangle for the logo and push a calm gradient or motion-feel pattern to the surround, so the result reads as a polished startup instead of generic loading-screen filler.
One thing that bites people first: AI image tools cannot render a true phone splash ratio in a single pass. A modern iPhone screen is roughly 9:19.5 (2868x1320 px on the iPhone 17 Pro Max), and Midjourney v7/v8 only accepts ratios between 1:2 and 2:1 (--ar 1:2 is the tallest it allows). So you generate at the closest legal ratio, then crop or out-paint to the exact device size. The sections below treat that as a step, not an afterthought.
Best for
- Mobile and tablet splash screens (iOS
LaunchScreen.storyboard, Android 12+SplashScreenAPI) - Brand-first launches where the first second is a marketing surface
- Marketing landing screens that mirror the in-app splash
- Replacing default Xcode / Android Studio splash placeholders
TL;DR
- Keep the visual calm and the logo center clear; render the background, overlay the wordmark in code.
- AI generators top out at
--ar 1:2; generate close, then crop or out-paint to the real device pixel size. - iOS launch screens are fully static (no animation, no text localization). Android 12+ animates the icon, not a custom image.
- Export at least two ratios (phone and tablet) and test brightness in low light, the real launch context.
Brand Color Hero
app splash screen visual, brand color [hex] gradient, soft geometric pattern,
center area reserved for logo, modern minimal style, flat, no text --ar 1:2Motion-feel Splash
app splash screen, dynamic abstract waves in brand palette, subtle motion feel,
center reserved for logo, no text --ar 1:2Dark-mode Variant
app splash screen, deep navy gradient with soft brand color highlights,
low brightness, center area reserved for logo, calm minimal style, no text --ar 1:2Variables to fill before you prompt
- Brand color: one hex value or a two-stop gradient. Replace
[hex]with your actual code (for example#2563eb). - Pattern density: low (gradient only), medium (soft shapes), high (waves). Default to low; detail vanishes at thumbnail size.
- Center reserve: keep a 40-50% square in the middle untextured so the logo has breathing room.
- Target ratio: generate at
--ar 1:2, then crop to the device. Phones land near 9:19.5; older phones 9:16; tablets 3:4.
Device specs that decide your export sizes
You are not exporting one image. iOS and Android handle the splash differently, and the dimensions are specific (as of June 2026):
| Target | Format | Key dimension | Notes |
|---|---|---|---|
| iOS launch screen | Storyboard, not an image | Auto-laid-out | Storyboard is mandatory for App Store submission; fully static, no code runs |
| iOS background asset | PNG @3x | 2868x1320 px (iPhone 17 Pro Max) | Design at 956x440 pt, export @1x/@2x/@3x |
| Android 12+ icon | Vector drawable | 288 dp canvas, inner 2/3 visible | Center icon fills ~192 dp of the 288 dp window |
| Android 12+ branded image | PNG/vector | 200x80 dp | Optional bottom logo strip |
| Tablet | PNG | Render 3:4 separately | Phone art letterboxes badly on tablets |
A blunt consequence: on iOS you usually do not ship a generated full-screen image at all. Apple’s launch screen is a static storyboard that should look nearly identical to your app’s first screen, so the AI background is most useful for the brand color and any centered mark, not edge-to-edge art. (See Apple’s Launching guidance.)
When this fits
Use these prompts when you ship the icon and splash together and want them to feel like one brand surface. For full marketing screens or onboarding backgrounds, use the app onboarding background prompts or the broader app background image prompts.
How to refine
- Generate four variants at
--ar 1:2in your tool of choice. ChatGPT’s image model is better when you want a centered mark or any in-image text rendered crisply; Midjourney wins on gradient and texture quality. - Crop or out-paint to the device pixel size from the table above. Keep the logo region centered through the crop.
- Drop your real logo over the reserved center to check breathing room at actual size, not the preview.
- Test brightness in low light. Most people open apps in dim rooms, so a high-saturation splash hits like a flash. Pull saturation down 10-20% if it stings.
The AI app background images tutorial covers export sizes and dark-mode variants end to end.
Common mistakes
- Logo area not reserved, so the illustration competes with the brand mark.
- Color too bright at launch; the splash should feel calm, not aggressive.
- Single ratio rendered; export both phone and tablet versions.
- Pattern too detailed; it reads as texture noise in small thumbnails.
- High-saturation gradient that fights the system status bar.
- Animating the iOS launch screen. It is static by design; if you want motion, animate a real view that loads immediately after.
FAQ
Should the splash include the app name? Most apps render the wordmark over the splash at runtime. Keep the prompt focused on the background and overlay the wordmark in code, especially on iOS, where launch-screen text is not localized.
PNG, SVG, or vector PDF? PNG works everywhere but inflates file size. For an iOS background asset, a high-resolution PNG at the asset catalog’s @3x is the safest default. On Android 12+, the centered icon must be a vector drawable, not a raster image.
How long should the splash stay on screen? As short as your launch path allows, typically 0.5 to 1.5 seconds. Android recommends splash animations stay under 1,000 ms with a start delay no longer than 166 ms. Anything over 3 seconds invites frustration no matter how nice the visual is.
Why can’t my generator output 9:20 directly? Midjourney caps ratios at 1:2, and most diffusion models degrade past that. Generate at 1:2 and crop or out-paint to the true device ratio rather than forcing an extreme aspect.
Can I animate the splash? On iOS the launch screen itself is static; the standard trick is to swap in an identical-looking view controller that animates. On Android 12+ the system animates the app icon (an AnimatedVectorDrawable), not a custom background image.
Before you publish
App store reviewers reject splash screens that imply functionality, such as loading bars on a static image or fake spinners. Apple and Google also revise their policies on AI-generated visuals, so verify the latest App Store Review Guidelines and Android splash documentation before submission. See the disclaimer for the broader note.
Related
- App onboarding background prompts — companion patterns for onboarding screens
- App background image prompts — broader app surface library
- AI app background images — production workflow with export sizes
- AI image aspect ratio guide — ratios for app surfaces
Tags: #App background