iOS 16/17/18 Spec · All iPhone & iPad Viewports · Ready HTML LinksCategory: Mobile & Splash

Universal Splash Screen Generator (Web, PWA & iOS Safari)

A complete launch screen generator for Progressive Web Apps (PWA) and standalone iOS Safari web applications. Automatically generates exact resolution splash graphics and matching apple-touch-startup-image meta link tags across every active iPhone, iPad, and Android screen size.

Quick Tutorial

How to use Splash Screen Generator

1Step 1

Upload App Icon or Logo

Upload a clean PNG or SVG emblem representing your web application.

2Step 2

Configure Theme & Padding

Set brand background colors, adjust logo scaling, and preview against real device silhouettes.

3Step 3

Download Asset Bundle & HTML

Download the complete ZIP package containing all resolution images and copy the ready-to-use HTML link tags.

Technical Reference

Technical specifications & standards

Verified standards, supported properties, and industry specifications implemented in this utility.

Device Target	Resolution (px)	Device Width x Height	Pixel Ratio	Orientation
iPhone 16 Pro Max	1320 x 2868 px	440 x 956 pt	3x	Portrait
iPhone 16 Pro	1206 x 2622 px	402 x 874 pt	3x	Portrait
iPhone 15 / 14 Pro	1179 x 2556 px	393 x 852 pt	3x	Portrait
iPad Pro 12.9-inch	2048 x 2732 px	1024 x 1366 pt	2x	Portrait / Landscape
Standard Android PWA	1080 x 1920 px	360 x 640 pt	3x	Portrait

In-Depth Documentation

Architecture & best practices

The iOS Safari PWA Splash Screen Problem

Unlike Android Chrome which automatically generates splash screens from web manifest icon and theme_color declarations, iOS Safari requires explicit <link rel="apple-touch-startup-image"> declarations conditioned on exact media query dimensions. Omitting these tags causes iOS web apps to open with a jarring blank white screen while the service worker hydrates.

Dynamic Island and Home Indicator Safe Zones

Modern iOS devices feature deep rounded display corners, Dynamic Island camera cutouts, and bottom gesture indicators. Centralizing your application mark within a centered 200dp viewport boundary guarantees visual clearance across notch, island, and home bar geometries.

Common Questions

Frequently asked questions

Everything you need to know about formats, browser compatibility, and usage.

Why does iOS need so many different splash screen sizes?▼

iOS Safari will only display a startup splash image if the media query on the <link rel="apple-touch-startup-image"> matches the physical device viewport and pixel ratio exactly. If no match is found, a white screen is displayed.

How do I add these splash screens to my PWA?▼

Extract the downloaded ZIP package into your public/ or assets/ directory, and paste the generated <link rel="apple-touch-startup-image"> tags into the <head> of your root index.html or layout.tsx file.

Does this support dark mode splash screens?▼

Yes! iOS Safari supports (prefers-color-scheme: dark) media queries on startup images, allowing you to pair light and dark splash screens seamlessly.

Can I use SVG directly for iOS splash screens?▼

No. iOS Safari specifically requires rasterized PNG images for the apple-touch-startup-image link target. Our generator converts your vector assets into perfectly sized PNGs.