Splash Screen Generator: Launch Without Delay

A splash screen generator workflow should produce a static launch screen that appears only while the app is genuinely starting, then resolves into the first real screen with no timer or extra hold. On iOS, use a static LaunchScreen storyboard placeholder rather than a brand advert. On Android 12 and later, configure the system SplashScreen API’s required icon-on-background pattern. Center a square icon inside Android’s documented safe circle, use constraints rather than screen-edge offsets, and match the launch background, logo position, and initial UI state to the first rendered screen.

Key takeaways

•Apple defines the launch screen as a static placeholder, not a branded introduction.
•Android 12+ displays a system splash screen with an app icon on a background.
•Android’s icon-safe circle is 192 dp without an icon background and 160 dp with one.
•An artificial launch delay should be 0 seconds; dismiss when the first screen is ready.
•Use Auto Layout center constraints on iOS instead of offsets tied to one iPhone size.

This guide is for mobile product designers, Flutter or Expo teams, and native engineers who already ship iOS and Android app builds.

Time: 35 minutes · You'll need: Xcode with the iOS target’s LaunchScreen storyboard, Android Studio with an Android 12+ emulator, A real device or emulator running Android API level 31 or later, Your app’s first-screen background colour and app icon source asset, Flutter or Expo project files, if applicable

What's on this page

•Define the app launch screen as a placeholder
•Match the app launch screen to its first frame
•Configure Android 12+ system splash behaviour
•Remove every artificial splash-screen delay
•Export assets and wire iOS, Flutter, and Expo
•Reference table

•Common mistakes
•FAQs

Creating a splash screen generator-ready launch screen

1. Define the app launch screen as a placeholder

Build one static composition: a background colour and, if needed, one centred app mark. Apple’s Human Interface Guidelines describes the launch screen as a placeholder that helps the app feel responsive while it loads; it is not a place for promotional copy, onboarding claims, a loading percentage, or a second logo lockup. Remove taglines, sign-in prompts, and buttons because none can be interacted with during launch.

In Xcode, set the target’s Launch Screen File to LaunchScreen and edit LaunchScreen.storyboard. Add a full-screen background view and an image view. Use the same base background colour that the first real view controller or SwiftUI root view renders before network content arrives. The expected result is a screen that could plausibly be the initial, empty state of the app rather than an interstitial advert.

If the first screen requires authentication or remote content, show the local shell first. A blank list, skeleton-free neutral surface, or locally cached navigation structure is preferable to holding the launch screen after the app is already capable of drawing UI.

Tip: A wordmark that is readable only after a pause is evidence that the launch screen contains more branding than the startup state needs.

2. Match the app launch screen to its first frame

Capture the first fully rendered frame of a cold launch on both platforms. Compare four properties against the launch screen: background colour, icon or logo centre point, top-level surface shape, and dark-mode appearance. Make those properties identical wherever the first screen can render immediately. This makes the system handoff read as one continuous screen instead of a flash between two unrelated compositions.

On iOS, constrain the image view with Center Horizontally in Container and Center Vertically in Container. Do not position it using a fixed top margin that was chosen on one iPhone canvas. Keep the launch scene static; Apple does not permit a launch screen to function as a custom loading experience. On Android, set the splash background to the same colour as the activity’s first drawn window or root Compose/View background.

Test a light appearance and dark appearance separately. If the first screen changes surface colour in dark mode, provide a corresponding launch treatment rather than showing a white launch screen followed by a dark root screen.

Tip: Match the earliest local frame, not the final data-loaded screen; a feed that changes after a network response cannot be the visual target.

3. Configure Android 12+ system splash behaviour

For Android 12 and later, use the AndroidX SplashScreen compatibility library and the platform splash theme rather than drawing a custom full-screen activity. Android’s SplashScreen API presents the app icon on a background at launch, then transfers control to the app’s starting activity. In the Android 12 theme, set windowSplashScreenBackground, windowSplashScreenAnimatedIcon, and postSplashScreenTheme; use Theme.SplashScreen or Theme.SplashScreen.IconBackground as the parent theme appropriate to the asset.

Design the mark as a square source asset. Android documents a 288 × 288 dp icon area with a 192 dp inner safe circle when the icon has no background. For an icon with its own background, Android documents a 240 × 240 dp area with a 160 dp inner safe circle. Keep every meaningful edge of the logo inside the applicable inner circle. This prevents cropping by the system’s circular mask across tall phones, short landscape windows, foldables, and tablets.

Call installSplashScreen() before super.onCreate() in the launch activity when implementing the API manually. Do not replace the system splash with a branded activity.

Tip: Use the no-background variant only when the mark remains recognisable against every configured splash background colour.

4. Remove every artificial splash-screen delay

Set the artificial delay to 0 seconds. A launch screen exists to cover work that is already required for startup; it must disappear when the first real screen is ready to draw. Do not add Handler.postDelayed, DispatchQueue.main.asyncAfter, a fixed animation duration, or a Flutter/JavaScript timer merely to make the logo “readable.” Those mechanisms turn a fast cold start into a slower one.

On Android, keep the system screen only while there is a real readiness condition, such as restoring essential local state needed to select the initial destination. The Android SplashScreen API supports setKeepOnScreenCondition; return true only until that necessary condition resolves. On iOS, do not use the launch screen as a gate. Move nonessential work—analytics setup, cache warming, and noncritical remote requests—after the first interactive view appears.

Measure a cold start with the app force-stopped or removed from recents. The desired result is immediate transition when startup is fast, and a static placeholder only when startup genuinely takes longer.

Tip: If product wants a minimum logo exposure time, treat it as an explicit performance regression, not as a visual polish task.

5. Export assets and wire iOS, Flutter, and Expo

Create light and dark variants from the same centred square master. For a manual iOS implementation, add the appropriate colour assets to the asset catalog, use named colours in LaunchScreen.storyboard, and verify the storyboard in both interface appearances. Keep the image view constrained to the container centre, so the composition adapts without maintaining separate layouts for each iPhone ratio.

For a native Android or Flutter Android target, place the splash icon in the Android resources referenced by windowSplashScreenAnimatedIcon, then define the Android 12 splash theme in styles.xml. For Flutter iOS, keep the native LaunchScreen.storyboard; the Dart first frame should use the same initial surface. For Expo, configure the expo-splash-screen plugin in app.json or app.config.js with its backgroundColor, image, dark, and imageWidth settings, then ensure the first React Native view uses the matching background.

After manual validation, hand the final source artwork to floow.design’s free Splash Screen Generator to generate each iOS and Android size in light and dark, plus Flutter and Expo configuration. Re-test generated output on an iPhone and an Android 12+ device before release.

Tip: Do not use one raster image stretched to fill an iPhone launch storyboard; the Android system icon and iOS launch composition solve different layout problems.

Reference table

Android splash icon sizing limits

Configuration	Documented asset area	Keep meaningful artwork within
Icon without background	288 × 288 dp	192 dp inner circle
Icon with background	240 × 240 dp	160 dp inner circle
Artificial display delay	0 seconds	Dismiss when ready

Do it with the free Splash Screen Generator

Generate launch screens at every iOS and Android size in light and dark, with the Flutter and Expo config.

Open the Splash Screen Generator → — free, no sign-up.

Common mistakes

Showing a marketing tagline, loading percentage, or onboarding message at launch.

Use only a static placeholder composition. Apple’s launch-screen guidance treats it as a temporary representation of the app, not a branded intro screen.

Using a full-screen custom Android activity to imitate a splash screen.

Use the Android 12+ SplashScreen API and its icon-on-background treatment. It gives the system a consistent transition into the starting activity.

Placing the logo 180 points from the top because it looked centred on one iPhone.

Use horizontal and vertical container-centre constraints in the iOS LaunchScreen storyboard. A fixed top offset changes the perceived position on different aspect ratios.

Adding a 1-second timer so users can see the logo.

Remove the timer. Keep the launch screen visible only for startup work that blocks the first real screen from rendering.

Frequently asked questions

What should an iOS launch screen contain?

An iOS launch screen should contain a static visual placeholder that resembles the first screen of the app. Apple recommends avoiding content that looks like a branded introduction or a separate experience. Use the first screen’s background and, where appropriate, one centred app mark with Auto Layout constraints.

How does Android 12 splash screen design work?

Android 12 splash screen design uses the system SplashScreen API to show an app icon on a configured background before the starting activity appears. Configure windowSplashScreenBackground, windowSplashScreenAnimatedIcon, and postSplashScreenTheme in the launch theme. Keep meaningful artwork within the documented 192 dp or 160 dp inner safe circle.

Should I add a delay so my splash screen is visible?

No, a splash screen should never have an artificial minimum display delay. It should remain only while essential startup work prevents the first real screen from drawing. A fixed delay makes fast launches slower and creates an obvious branded interstitial rather than a responsive app start.

What size should a splash screen logo be on every phone?

Use a centred square Android asset and keep the meaningful logo inside the 192 dp inner circle without an icon background or 160 dp with one. Those limits account for the system mask rather than any single phone ratio. On iOS, center the image view with Auto Layout instead of sizing or positioning it from a specific device canvas.

Can Expo use a different dark-mode splash screen?

Yes, Expo can define a dark-mode splash image and background through the expo-splash-screen configuration plugin. Set the normal backgroundColor and image, then provide the dark configuration for the alternate appearance. Match both variants to the first React Native view’s light and dark surfaces.

Where this leaves you

A launch screen earns its place only when it hides real cold-start work without becoming work of its own. Apple’s static-placeholder rule and Android 12’s system-owned icon treatment lead to the same outcome: a short, quiet handoff into an interface that already looks present. The logo should survive Android’s documented safe circle, while iOS constraints preserve its centre across screen ratios. Ship with no artificial delay, then make the next action a cold-start test on an Android 12+ device and an iPhone in both light and dark appearance.

Design the screens first

Describe the screen you need in plain English and floow.design generates production-ready iOS and Android layouts you can iterate on by chat, then export to Figma or code. Design your mobile app screens in floow.design first, then build.

Start designing free →

•WebP Converter — Batch-convert PNG, JPEG, WebP and AVIF in your browser, with a quality slider, optional resize and a live size comparison.
•SVG to PNG Converter — Rasterise any SVG at 1x to 4x, or export every iOS scale and Android density as one archive.
•App Icon Generator: Design Icons at Every Size — Use an app icon generator workflow to prove one mark reads at 40px, then prepare correct i
•iOS App Icon Sizes: Export Every Required Size — Export every iOS app icon size from one 1024px master, including App Store Connect rules,
•Gemini 3.1 for Mobile App UI Design: 4 Real Prompts Tested Hands-On (2026) — I tested Gemini 3.1 Pro with 4 real mobile app UI prompts — fitness tracker, food delivery