--- title: "Splash screen UI: anatomy, variants and examples | Kombai" description: "A splash screen is the first screen an app shows while it starts, usually just the brand's mark on a plain background." canonical_url: https://kombai.com/glossary/splash-screen/ author: "The Kombai Team" --- # Splash screen A splash screen is the first screen an app shows while it starts, usually just the brand's mark on a plain background. - Also called: launch screen - Platforms: Mobile - In the Kombai gallery: [35 mobile designs](https://kombai.com/gallery/mobile/splash-screen/) - [Pomelo](https://kombai.com/gallery/inspirations/splash-screen-ios-23/) (Mobile) - [Stellum](https://kombai.com/gallery/inspirations/splash-screen-ios-32/) (Mobile) - [Fernwood](https://kombai.com/gallery/inspirations/splash-screen-ios-18/) (Mobile) ## What is a splash screen? A splash screen fills the gap between tapping an app icon and seeing the first real screen. It shows a logo or a name centered on a solid color, a gradient or a photo, and disappears as soon as the app is ready. On iOS this is the launch screen; Android and installed web apps show a similar screen built from the app icon and a background color. - One centered mark or name, with no buttons, links or text to read. - Shown only while the app loads, then replaced by the first screen. ## When to use splash screen - **Cold starts.** The second or two while a native app loads its first screen. - **Installed web apps.** A web app added to the home screen gets one from its icon and colors. - **Brand recognition.** A quick, consistent mark that tells people they opened the right app. ## When not to use one - **As a delay.** Don't hold people on it after the app is ready. Show the content. - **For messages.** Tips, ads and news on a splash screen go unread. Put them inside the app. - **For slow data.** Once the app is open, use a skeleton or a loading indicator for content. ## Anatomy 1. **Background**: Solid color, gradient or photo 2. **Mark**: The logo, centered 3. **Wordmark**: Optional name or tagline 4. **Loading cue**: Optional dots or bar 5. **States**: Launching, ready, reduced motion ## Variants We sorted every splash screen design in the Kombai gallery and found five patterns. ### 1. Mark on black A small white or cream glyph on a near-black screen, sometimes with a faint glow behind it. - [Novara](https://kombai.com/gallery/inspirations/splash-screen-ios-1/) (Mobile) - [Solvane](https://kombai.com/gallery/inspirations/splash-screen-ios-11/) (Mobile) - [Numen](https://kombai.com/gallery/inspirations/splash-screen-ios-21/) (Mobile) ### 2. Mark on a brand color The whole screen takes the brand color, with the mark in white or cream at the center. - [Quillon](https://kombai.com/gallery/inspirations/splash-screen-ios-15/) (Mobile) - [Sable](https://kombai.com/gallery/inspirations/splash-screen-ios-22/) (Mobile) - [Vespera](https://kombai.com/gallery/inspirations/splash-screen-ios-6/) (Mobile) ### 3. Name only No icon at all: the app name, set large in the brand typeface, is the whole screen. - [Cairn](https://kombai.com/gallery/inspirations/splash-screen-ios-7/) (Mobile) - [Ondine](https://kombai.com/gallery/inspirations/splash-screen-ios-14/) (Mobile) - [Larkspur](https://kombai.com/gallery/inspirations/splash-screen-ios-33/) (Mobile) ### 4. Mark above the name The full lockup, icon stacked over the wordmark, for apps whose icon alone is not yet well known. - [Vireo](https://kombai.com/gallery/inspirations/splash-screen-ios-13/) (Mobile) - [Meridiem](https://kombai.com/gallery/inspirations/splash-screen-ios-16/) (Mobile) - [Sorrel](https://kombai.com/gallery/inspirations/splash-screen-ios-35/) (Mobile) ### 5. With a loading cue A thin bar, a row of dots or a ring under the mark hints that the app is still starting. - [Sundara](https://kombai.com/gallery/inspirations/splash-screen-ios-3/) (Mobile) - [Perigee](https://kombai.com/gallery/inspirations/splash-screen-ios-10/) (Mobile) - [Wayfare](https://kombai.com/gallery/inspirations/splash-screen-ios-24/) (Mobile) ## Where splash screens show up ### Shopping and payments Retail and money apps often add the name or a short tagline, so people know what the app does. - [Kavana](https://kombai.com/gallery/inspirations/splash-screen-ios-28/) (Mobile) - [Coventry](https://kombai.com/gallery/inspirations/splash-screen-ios-29/) (Mobile) - [Larder](https://kombai.com/gallery/inspirations/splash-screen-ios-34/) (Mobile) ### Travel and the outdoors Mountains, peaks and map pins: the mark itself says where the app takes you. - [Ridgeline](https://kombai.com/gallery/inspirations/splash-screen-ios-31/) (Mobile) - [Torrey](https://kombai.com/gallery/inspirations/splash-screen-ios-19/) (Mobile) - [Fennec](https://kombai.com/gallery/inspirations/splash-screen-ios-4/) (Mobile) ### Mood-led lifestyle brands Food, interiors and astrology apps set a mood with a photo or a texture behind the mark. - [Bellwether](https://kombai.com/gallery/inspirations/splash-screen-ios-12/) (Mobile) - [Wrenfield](https://kombai.com/gallery/inspirations/splash-screen-ios-26/) (Mobile) - [Astrelle](https://kombai.com/gallery/inspirations/splash-screen-ios-17/) (Mobile) ## Splash screen vs similar components | | [Splash screen](https://kombai.com/glossary/splash-screen/) | [Loading indicator](https://kombai.com/glossary/loading-indicator/) | [Skeleton loader](https://kombai.com/glossary/skeleton-loader/) | |---|---|---|---| | Shows | The brand mark | A spinner or bar | Gray shapes of the layout | | When | Once, as the app starts | Any time work is running | While a screen fills with data | | Best for | Cold starts | Short waits inside the app | Content-heavy screens | ## Build notes - On iOS, build the launch screen from a storyboard or Info.plist settings. Keep it free of text that needs translating. - Match the splash background to the first screen's background, so the handoff doesn't flash. - For an installed web app, set background_color and icons in the web app manifest. - Dismiss it as soon as the first screen can render. Never add a timer just to show the logo. - Respect prefers-reduced-motion: skip logo animations and fade, or cut straight to the app. - Give the mark an accessible name, or hide the splash from screen readers if it never takes focus. ## FAQ ### How long should a splash screen stay up? Only as long as the app takes to start. The goal is to make loading feel quick, so the splash should go away the moment the first screen is ready. Holding it longer to show off the brand makes the app feel slower. ### Is a splash screen the same as a launch screen? Mostly. Launch screen is the iOS term for the static screen the system shows while an app starts. Splash screen is the wider term and also covers Android, installed web apps and custom screens apps draw themselves. ### Should a splash screen be animated? A short animation of the mark can smooth the handoff to the first screen, but keep it brief and never let it delay the app. Turn it off for people who ask for reduced motion. ### Do websites need splash screens? Regular websites do not. A web app that people install to their home screen gets one from its manifest: browsers that support it build a simple screen from the app icon, name and background color. ## Related terms - [Loading indicator](https://kombai.com/glossary/loading-indicator/) - [Skeleton loader](https://kombai.com/glossary/skeleton-loader/) - [Progress indicator](https://kombai.com/glossary/progress-indicator/) - [Empty state](https://kombai.com/glossary/empty-state/) ## References - [Apple Human Interface Guidelines: Launching](https://developer.apple.com/design/human-interface-guidelines/launching) - [MDN: Web app manifest background_color](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/background_color)