Why this exports two different assets
Splash screens used to be whatever you built: a window background on the launcher activity, or a full-screen image shown for a fixed few seconds. Android 12 replaced that with a system-drawn splash every app gets automatically — so an app that also draws its own now shows two in a row.
Hence two exports. The 1080×1920 image is a traditional splash for a WebView shell or an engine that paints its own. The 432×432 icon is what the Android 12 system splash consumes. They are not interchangeable.
The 288-pixel safe area
The system splash icon is a 432×432 canvas of which only the central 288×288 — two thirds — is visible; the rest is masked. Artwork that fills the full canvas is cropped, which is exactly what happened to many apps when Android 12 arrived. The export here positions your icon inside the safe area for you.
| Export | Dimensions | Consumed by |
|---|---|---|
| Splash icon | 432 × 432 (288 visible) | Android 12+ system splash |
| Splash image | 1080 × 1920 | WebView shells, custom splash activities |
| Background colour | windowSplashScreenBackground | The full screen behind the icon |
What a splash is for
It covers the gap between the tap on the launcher and the first frame your app can draw. For a converted website that gap is real: the process starts, the WebView initialises, the page loads. Without a splash the user sees a blank rectangle and assumes a hang. The flip side: never hold the splash longer than the gap. An artificial delay to admire the logo is the quickest route to "slow app" reviews.
Design that survives every screen ratio
- Centre the icon — devices run from 4:3 tablets to 20:9 phones; anything near an edge moves on every one.
- Prefer a flat colour or soft gradient — a photo background is cropped unpredictably.
- Match the first page's colour — a dark splash followed by a white page flashes; matching them makes the launch feel continuous.
- No tagline — text is unreadable in half a second and has to be redone per language.
- Think about dark mode — a pure white splash at night is a flashbang; a mid-tone brand colour works in both.
Loader or no loader?
A spinner says "working, not frozen" — worthwhile when the first screen depends on the network, which for a live-URL app it always does. A progress bar is better only if the progress is real; a bar that fills at a fixed rate and then parks at 100% reads as broken.
The splash step of the HTML to App builder uses these same settings — colour, gradient, icon size, corner radius, gap and loader — so a design you settle on here carries straight across.