Splash Screen Generator
Create iOS splash screens for every current iPhone and iPad from a single logo, with the link tags ready to paste. Free, and processed entirely in your browser.
What is a PWA splash screen?
A splash screen, or launch screen, is what an installed web app shows between the tap on its icon and the first page appearing. It replaces a blank white screen with your logo on your own background color, which is what makes a PWA feel like an app from the first second.
Android and iOS handle it in opposite ways. Chrome on Android builds the splash screen itself from the name, background_color and 512x512 icon in your web app manifest, so there is nothing to upload. iOS ignores the manifest for this and shows a launch image only when the page links one that matches the device exactly.
iOS splash screen sizes
iOS picks a launch image by the exact pixel size of the screen. An image that is a few pixels off is not scaled to fit; it is skipped, and the app opens on a blank screen. That is why one logo has to be exported once per screen size and once more for landscape.
This generator creates the 20 files below: 10 screens, each in portrait and landscape. Landscape files have the two numbers swapped.
| Device | Portrait image | Screen in CSS pixels | Pixel ratio |
|---|---|---|---|
| iPhone 16 Pro Max | 1320x2868 | 440x956 | 3 |
| iPhone 16 Pro | 1206x2622 | 402x874 | 3 |
| iPhone 16 Plus, 15 Pro Max and 15 Plus | 1290x2796 | 430x932 | 3 |
| iPhone 16, 15 Pro and 15 | 1179x2556 | 393x852 | 3 |
| iPhone SE and iPhone 8 | 750x1334 | 375x667 | 2 |
| iPad Pro 13" | 2048x2732 | 1024x1366 | 2 |
| iPad Pro 11" | 1668x2388 | 834x1194 | 2 |
| iPad Air | 1640x2360 | 820x1180 | 2 |
| iPad Mini | 1488x2266 | 744x1133 | 2 |
| iPad 9.7" | 1536x2048 | 768x1024 | 2 |
How the splash screens are drawn
Each image is filled with your Background Color, and your logo is placed in the middle at about a third of the shorter side of the screen. Transparent margins around the logo are trimmed first, so it sits in the true center of the screen.
The preview shows every device as you change the color, and the "See your icons in real use" view shows the launch screen on an iPhone next to the home screen icon.
Add the splash screens to your HTML
Every image needs its own link tag with a media query that names the screen: its width and height in CSS pixels, its pixel ratio and the orientation. The width and height stay in portrait order in the landscape tag too, because iOS reports them that way. The page also needs the apple-mobile-web-app-capable meta tag.
The ZIP contains all 20 tags in meta-tags.html, with paths that match the files in the splash folder. Copy that folder to your public directory and paste the tags into the head of every page. This is one device, as an example.
HTML head
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- iPhone 16 Pro -->
<link rel="apple-touch-startup-image" media="screen and (device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/splash/splash-1206x2622.png">
<link rel="apple-touch-startup-image" media="screen and (device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/splash/splash-2622x1206.png">Icons in the same download
A launch image is only seen after the app is on the home screen, and that needs an icon. The same ZIP has the 180x180 Apple touch icon, every PWA icon size, the maskable icons, favicon.ico and a manifest.json, all made from the logo you uploaded for the splash screens.
After deploying, the PWA validator reports whether your live page declares iOS splash screens and an Apple touch icon.
Everything You Need for PWA Assets
- All icon sizes from 16x16 to 512x512 pixels for every PWA requirement
- A live preview of every icon, each maskable shape and the splash screens before you download
- A real use preview of your icons in a browser tab, a search result and on Android and iPhone home and launch screens, also included in the ZIP
- A one-click demo with a sample logo, so you can try the generator before uploading anything
- Maskable icons for Android adaptive icons, with a proper safe zone
- iOS splash screens for popular iPhone and iPad devices in both orientations
- A ready-made manifest.json with all icon references included
- HTML meta tags for PWA icons and splash screen declarations
- A built-in logo maker for initials or an emoji, if you have no logo yet
- Images processed in your browser and never uploaded to a server
- One-click download of all assets as an organized ZIP file
How It Works
- Upload your logo as a PNG, JPG, SVG, or WEBP file, or make a simple one from initials or an emoji.
- Choose which assets to generate, adjust padding and background color, and check the live preview and the real use preview.
- Download a ZIP with icons, splash screens, manifest.json, and HTML meta tags.
Frequently Asked Questions
What size is an iOS splash screen?
There is no single size. Each image must match the pixel size of the screen it is for, such as 1179x2556 for an iPhone 16 or 2048x2732 for a 13-inch iPad Pro. This generator creates 10 screen sizes in portrait and landscape, 20 files in total.
Why does my PWA open on a white screen on iPhone?
iOS shows a blank screen when the page has no apple-touch-startup-image tag that matches the device. The usual causes are missing tags, an image whose size does not match the screen exactly, or a media query with the wrong width, height or pixel ratio.
Do I need splash screen images for Android?
No. Chrome on Android creates the splash screen from the name, background_color and 512x512 icon in your web app manifest. The manifest.json and icons in the ZIP cover it.
Do I need the landscape splash screens?
Only if the app can be opened in landscape. iPads often are, so the landscape images matter most there. If your app is portrait only, you can leave out the landscape tags and files.
Can I change the background color of the splash screens?
Yes. The Background Color option fills every splash screen, and the preview updates as you change it. Use the same color as the background_color in your manifest so Android and iOS match.
What image format should I use?
We recommend using PNG or SVG formats for the best quality. PNG works well for photos and complex images, while SVG is ideal for logos and icons as it scales perfectly. JPG and WEBP are also supported but may not preserve transparency.
What is the recommended image size?
For best results, use an image that is at least 512x512 pixels with a 1:1 aspect ratio (square). Larger images will be scaled down, and smaller images may appear blurry at larger icon sizes.
Can I preview the icons before downloading?
Yes. As soon as you add an image, the preview shows every icon size, the maskable icons cropped to a circle, a rounded square and a squircle, and the splash screens for each device. It updates as you change the padding and background color, so you only download once it looks right. The "See your icons in real use" button goes further and shows them in a browser tab, a search result, a desktop shortcut and on Android and iPhone home and launch screens. The ZIP includes that page as preview.html.
Can I use this tool without a logo?
Yes. Choose "No logo yet?" under the upload box, or open the text and emoji icon generator, to make a simple logo from your initials or an emoji on a colored square, rounded square or circle, with an optional gradient. It is drawn in your browser and then goes through the generator like any uploaded image. To just see how the tool works, choose "Try the demo" under the upload box: one click loads a sample logo with a name and colors and generates every asset, splash screens included.
What are maskable icons?
Maskable icons are a PWA feature that allows your icon to adapt to different shapes on Android devices. They include a safe zone so the icon looks good whether displayed in a circle (Pixel), rounded square (Samsung), or other shapes. This tool fills the background with your chosen colour and keeps your logo within the center 80% of the image.
Do I need splash screens?
Splash screens provide a native app-like experience on iOS devices. When a user adds your PWA to their home screen and opens it, the splash screen shows briefly while the app loads. They're optional but highly recommended for a polished experience.
How do I implement the generated assets?
Download the ZIP file and extract it. Copy the icons/ and splash/ folders to your project's public directory. Copy manifest.json and favicon.ico to your root/public folder. Then add the HTML code from meta-tags.html to your index.html <head> section.
Is this tool free to use?
Yes! This PWA Icon Generator is completely free. All processing happens in your browser - your images are never uploaded to any server. You can generate unlimited assets for personal or commercial projects.
Does this tool store my images?
No. All image processing happens locally in your browser using Canvas API. Your images never leave your device, ensuring complete privacy and security.