Why do my apple-touch-startup-image tags show a blank screen on launch?

Almost always because the media query does not match the device. Safari requires the query to specify the logical device-width and device-height in CSS points (not physical pixels), the exact -webkit-device-pixel-ratio for that device, and the orientation. Many generators just divide the physical resolution by three for every device, which is wrong for the @2x iPhones and all iPads, so the query never resolves and no image loads. This tool uses a per-device table so each tag carries the right values.

Why are some devices pixel-ratio 2 and others 3?

Apple ships displays at different densities. The iPhone SE, iPhone XR/11, and every iPad render at @2x (pixel ratio 2), while most modern Pro and Max iPhones render at @3x (pixel ratio 3). The startup image media query must name the correct ratio for the device, which is why a blanket -webkit-device-pixel-ratio: 3 fails on half the lineup. The tool encodes the real ratio per device.

Does Android still use full-bleed splash images?

Not since Android 12 (API 31). The platform now draws the launch screen with the SplashScreen API: a themed window background color plus your adaptive launcher icon, animating into the app. So for Android you mostly need the right background_color and theme_color in your web app manifest or theme, which this tool outputs. Full-bleed splash images are a legacy pattern.

Are my logo and images uploaded anywhere?

No. The logo you select stays in your browser, and the PNGs are rendered locally using an HTML canvas. Nothing is sent to a server, so the tool works offline and keeps proprietary artwork private. The shareable URL only encodes your settings (colors, scale, position, platform, orientation), never the image data.

What logo scale and position should I choose?

A logo around 25 to 40 percent of the shorter screen edge usually reads well and leaves comfortable margins. The tool warns when you exceed 60 percent because a large logo can clip or feel cramped on small devices. Center position is the most common; top or bottom thirds suit layouts that pair the logo with a wordmark or tagline elsewhere on the screen.

How many images will this generate?

It depends on your selections. iOS produces one image per device per chosen orientation, so picking both orientations doubles the iOS count. Android adds one image per density bucket. The generation plan card shows the live total; if it climbs above twenty, the checklist suggests trimming to a single orientation or one platform to keep the asset set manageable.

Splash Screen Generator

Generate splash screens for iOS and Android — and the correct apple-touch-startup-image <link> tags. Most generators emit media queries that never match because they guess the device pixel ratio; this tool uses a per-device table of logical CSS points and real -webkit-device-pixel-ratio values (the only combination Safari will load), then renders the matching PNGs in your browser.

About this ToolHow it works, benefits & use cases

Most splash-screen generators hand you apple-touch-startup-image link tags that never actually load. The reason is subtle: Safari only uses a startup image when its media query matches the device exactly - the logical device-width and device-height in CSS points, the real -webkit-device-pixel-ratio (which is 2 on some iPhones and iPads, not a blanket 3), and the orientation. Naive tools divide the physical pixels by three for every device, producing media queries that resolve on nothing, so users see a blank flash on launch. This tool is built around a maintained per-device table covering the modern iPhone and iPad lineup (SE, mini, standard, Plus/Max, Pro/Pro Max, plus iPad mini/Air/Pro), so every tag carries the correct points, pixel ratio, and orientation. Pick a background color, optionally upload a logo, set its scale and position, choose iOS and/or Android, and select portrait, landscape, or both. A live phone preview reflects your choices, a generation plan shows exactly how many images each platform needs, and the headline output is the copy-ready block of correct apple-touch-startup-image tags. For Android, it emits the manifest background_color and theme_color, since Android 12+ draws the splash from the SplashScreen API rather than a full-bleed image. PNGs are rendered right in your browser via canvas - nothing is uploaded.

How to Use

1Set a background color with the picker or hex field, then optionally upload a logo (PNG with transparency works best).
2Adjust the logo scale (10 to 80 percent of the shorter edge) and position (center, top, or bottom).
3Choose your targets: iOS for apple-touch-startup-image tags, Android for manifest colors, or both.
4Pick the orientation coverage you need - portrait only, landscape only, or both - and watch the plan count update.
5Copy the apple-touch-startup-image link tags into your <head>, then click Generate to render and download the matching PNGs.

Key Benefits

Correct apple-touch-startup-image media queries using CSS points, the real device-pixel-ratio, and orientation
Maintained per-device table for modern iPhones (SE through 16 Pro Max) and iPads (mini, Air, Pro)
Live phone preview reflecting background, logo scale, and logo position
Generation plan showing exactly how many images iOS and Android each require
Modern Android 12+ guidance: manifest background_color and theme_color instead of full-bleed images
Canvas-rendered PNGs produced entirely in the browser - no uploads, fully private
Shareable URL captures the whole configuration, plus a configuration checklist that flags oversized logos and missing platforms

Common Use Cases

Shipping a Progressive Web App that needs a proper launch screen on every iPhone and iPad
Replacing broken startup-image tags whose media queries never matched real devices
Generating both portrait and landscape splash assets for a tablet-oriented PWA
Setting up the correct manifest splash colors for an Android 12+ installed web app
Producing on-brand splash PNGs from a logo and background color without opening a design tool

Live preview

apple-touch-startup-image <link> tags

Correct media queries (CSS points + real DPR + orientation)

<link rel="apple-touch-startup-image" href="/apple-splash-iphone-se-2nd-3rd-gen-6-7-8-portrait.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-iphone-6-7-8-plus-portrait.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-iphone-13-mini-12-mini-11-pro-xs-x-portrait.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-iphone-11-xr-portrait.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-iphone-11-pro-max-xs-max-portrait.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-iphone-14-13-13-pro-12-12-pro-portrait.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-iphone-14-plus-13-pro-max-12-pro-max-portrait.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-iphone-16-15-15-pro-14-pro-portrait.png" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-iphone-16-plus-15-plus-15-pro-max-14-pro-max-portrait.png" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-iphone-16-pro-portrait.png" media="(device-width: 402px) and (device-height: 874px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-iphone-16-pro-max-portrait.png" media="(device-width: 440px) and (device-height: 956px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-ipad-mini-ipad-9th-gen-portrait.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-ipad-10th-gen-ipad-air-10-9-portrait.png" media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-ipad-pro-11-portrait.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="/apple-splash-ipad-pro-12-9-portrait.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">

Generation plan

iOS images

—

Android images

Total

Configuration looks good

Appearance

Background

Hex

Logo (optional)

PNG with transparency works best. Used to render the downloadable PNGs in your browser.

Logo scale (% of shorter edge)

Logo position

Targets

iOS (apple-touch-startup-image)

Android (manifest colors)

Orientations (iOS)

PNGs are rendered entirely in your browser via canvas — nothing is uploaded.

Why most startup-image tags never match

Safari only loads an apple-touch-startup-image when its media query matches the device exactly: the logical device-width/device-height in CSS points, the real -webkit-device-pixel-ratio (2 or 3, not a blanket 3), and the orientation. Naive generators divide the physical pixels by 3 for every device, so the query never resolves and you get a blank flash on launch. This tool uses a maintained per-device table so each tag is correct.

Android 12 changed everything

Since Android 12 the OS draws the launch screen from the SplashScreen API — a themed window background plus your adaptive icon — instead of a full-bleed image. So for Android you mainly need the right background_color and theme_color in your manifest, which this tool emits for you.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Splash Screen Generator

How to Use

Key Benefits

Common Use Cases

Live preview

Generation plan

Appearance

Targets

Why most startup-image tags never match

Android 12 changed everything

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Splash Screen Generator