Splash Screen Generator

When someone opens a web app saved to the Home Screen of an iPhone or iPad, iOS can show a launch image while the page loads — but only if you provide one image in the exact pixel size of that screen and orientation, linked with an apple-touch-startup-image tag. This generator draws your logo centred on your brand colour in every current iPhone and iPad size, in portrait and landscape, and writes the matching HTML. It works in your browser.

How to use this tool

1. Choose your logo — a PNG with a transparent background or an SVG gives the cleanest result.
2. Set the background colour (ideally your manifest's background_color) and the logo size.
3. Pick the devices and orientations you support, the format and the folder on your site.
4. Download the ZIP, upload the images to that folder and paste the HTML into your pages' <head>.

Formula

image size = CSS screen size × device pixel ratio (e.g. 440 × 956 × 3 = 1320 × 2868); logo scale = logo size % × shorter side ÷ longer side of the logo

Each link tag uses a media query with the device's CSS width and height (always the portrait values), its pixel ratio and the orientation, so iOS picks exactly one image. Devices that share a screen size share an image. The list covers iPhones from the SE (1st gen) to the iPhone 17 series, iPhone Air and iPhone 18 Pro / Pro Max (which keep the 17 Pro sizes), and iPads from the 9.7-inch models to the iPad Pro with the M4 or later chip.

Example

For an iPhone 17 Pro Max (440 × 956 points at 3×) the portrait image is 1320 × 2868 px and the landscape one 2868 × 1320 px. A 1000 × 400 logo at 30% is scaled to 0.3 × 1320 = 396 px wide and 158 px tall, centred on the screen.