“Splash screen” describes two different website assets. An installed progressive web app (PWA) can show a platform-generated launch screen, while a landing page may use a decorative hero image. Choose the destination first: Android can build a PWA launch screen from your web-app manifest, whereas iOS and iPadOS use linked startup-image files. A hero image is artwork that you generate, test in the real layout, and crop responsively.
First decide which splash image you need
| Use case | What the visitor sees | How it is created |
|---|---|---|
| Installed PWA launch screen | A brief screen while an installed web app opens | Android derives it from manifest metadata; iOS and iPadOS use static images linked in HTML |
| Landing-page hero | A visual section at the top of a normal web page | Generate an image from a design brief, then fit and test it in the page component |
These jobs are not interchangeable. A generated illustration does not replace the manifest and startup-image configuration needed by an installed PWA, and a manifest icon is not a suitable hero background.
Generate an Android PWA launch screen
Android browsers can create the launch screen automatically from the web app manifest. The defining values are the app name, background_color, and icons. As the web.dev documentation puts it, “Android creates splash screens automatically based on the manifest’s values.” You normally do not generate a separate full-screen bitmap for this workflow.
1. Create and link the manifest
Save a manifest such as manifest.webmanifest and link it from the document head:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
<link rel="manifest" href="/manifest.webmanifest">A minimal manifest is:
{
"name": "Example Store",
"short_name": "Store",
"start_url": "/",
"display": "standalone",
"background_color": "#101827",
"theme_color": "#101827",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}Use a background color that matches the first view of the app, and provide an icon that remains recognizable at small sizes. The manifest is also where the browser obtains installed-app information; it is not a replacement for your page’s HTML, CSS, or loading state.
2. Check the opening view
- Make the manifest request return successfully from the same site.
- Confirm the icon files are reachable and have the declared dimensions and MIME type.
- Set
background_colorto a color that does not flash against the initial page. - Install the PWA on the Android browser and device combination you support, then open it from the home screen.
Because the operating system composes this screen from metadata, results can vary by browser version and device. Validate the installed experience rather than judging only a desktop browser tab.
Generate iOS and iPadOS PWA startup images
The iOS and iPadOS workflow differs: the reviewed web.dev guidance says these platforms do not generate the PWA startup screen from the manifest. Instead, supply static startup images and link them with rel="apple-touch-startup-image".
Basic link
<link rel="apple-touch-startup-image" href="ios-startup.png">The image should match the window context when the installed PWA opens. In practice, that can mean separate files for portrait and landscape, different device sizes, and iPad multitasking window widths. Use media conditions to select a variant:
Free tools Windows power users keep installed
One-click scans. No signup required.
<link rel="apple-touch-startup-image"
href="ios-portrait.png"
media="(orientation: portrait)">
<link rel="apple-touch-startup-image"
href="ios-landscape.png"
media="(orientation: landscape)">Do not assume one “universal splash-screen size.” The useful dimensions depend on the opening window, orientation, and platform context. Keep important marks away from edges that may be cropped, and test the actual installed app on the iPhone and iPad layouts that matter to your audience.
Automate repetitive startup assets
If you support many contexts, a build-time generator can create the PNG files and corresponding link elements. A client-side approach can instead derive an image from device type and screen size and inject a link. These approaches reduce hand-written configuration; they do not remove the need to validate generated files on representative devices.
Rank #2
Generate a landing-page hero or decorative splash image
For a normal website, start with the communication job, not a guessed pixel size. State what the image must show, where copy will sit, and how it will be cropped. The selected component and image tool determine the useful canvas; there is no universal website splash dimension.
1. Write a specific brief
Include the following in one short brief:
- Deliverable: for example, “wide landing-page hero background.”
- Subject: the product, service, place, or idea that must be recognizable.
- Scene and medium: photography, illustration, conceptual scene, or product mockup.
- Composition: subject placement and clear negative space for the real HTML headline and call to action.
- Visual language: palette, lighting, mood, and a plain-language reference style.
- Constraints: no lettering, logo, watermark, UI controls, or fake text when those elements will be supplied by the page.
Generate the image as a separate asset. Keep the headline, button, and other essential information in HTML so they remain editable, accessible, and responsive.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errors2. Generate several distinct directions
Ask for materially different compositions rather than tiny wording changes: for example, a product on the right with left-side copy space, a centered subject with a dark overlay area, and an abstract scene with a clear upper band. A design-canvas workflow such as Figma’s documented hero-image generator can create options beside an existing design library. Treat that as a workflow example, not a guarantee that every output is production-ready.
3. Use a reusable prompt
Create a [photographic / illustrated / stylized] [landing-page hero background / website splash visual] for [brand, product, or service]. Show [specific subject and scene]. Compose it in a [wide / target] frame with [subject placement] and clear negative space on [left/right/top] for a real HTML headline and call to action. Use [brand colors], [lighting and mood], and [plain-language visual references]. Keep the focal subject recognizable at mobile crop sizes. No lettering, logo, watermark, UI controls, or fake text. Output as [format] at dimensions appropriate to [actual component].Change one issue at a time between iterations—such as focal-point position or empty copy space—so you can tell which instruction improved the result.
4. Review inside the real component
- Place the generated file behind or beside the actual headline and call-to-action markup.
- Inspect a wide desktop viewport and a narrow mobile viewport.
- Check that the subject is not hidden by text, navigation, or an overlay.
- Adjust the source composition or responsive crop if the focal point disappears.
- Verify contrast and legibility with the real font, color, and button treatment.
A beautiful standalone image can fail when background-position, an <img> object-fit rule, or a mobile breakpoint crops it differently than expected.
5. Export for the destination
Choose dimensions and format from the component, delivery pipeline, and performance budget. The OpenAI image API reference documents PNG, JPEG, and WebP outputs plus configurable sizes, but model constraints can change. Check the current reference for the model you select instead of treating any example dimension as a specification.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →- Use WebP or JPEG when photographic compression and broad browser delivery are priorities.
- Use PNG when you need lossless detail or transparency.
- Keep an appropriately sized source and generate responsive derivatives rather than forcing every device to download the largest file.
- Provide meaningful alternative text when the image conveys information; use an empty alt value when it is purely decorative and the same information is present in HTML.
Implementation checklist
- Identify PWA launch screen versus page hero before creating artwork.
- For Android, link the manifest and verify
name,background_color, and icons. - For iOS and iPadOS, link startup PNGs and add media-selected variants for orientation and opening-window contexts.
- For heroes, reserve copy-safe space and keep text and controls in HTML.
- Inspect every important desktop, mobile, portrait, landscape, and iPad multitasking crop.
- Confirm file format, dimensions, compression, cache behavior, and accessibility in the production build.
Common problems and fixes
The Android splash color flashes or looks wrong
Cause: the manifest background color differs from the first rendered view, or the installed app is using stale manifest data.
Fix: make background_color match the opening screen, verify the manifest response and icon URLs, then reinstall the PWA while testing.
iPhone shows no startup image
Cause: the link uses the wrong relationship, the file URL is unavailable, or the image is not linked in the document that launches the app.
Fix: use rel="apple-touch-startup-image", test the exact URL, and confirm the installed shortcut again after updating the HTML.
The image is cropped on mobile
Cause: the desktop composition leaves no room for a narrow aspect ratio.
Fix: regenerate with the focal subject closer to the safe area, or define a mobile-specific source and crop instead of shrinking the desktop image.
Generated artwork contains fake text or logos
Cause: the prompt asked the model to render interface copy or branding.
Fix: explicitly request no lettering, logo, watermark, UI controls, or fake text, then add real content as HTML and use approved brand assets separately.
The hero is attractive but the headline is unreadable
Cause: insufficient negative space or contrast behind the copy.
Fix: regenerate with a deliberate quiet area, add a tested overlay, or change the text placement. Check contrast with the actual font size and weight.
The page feels slow
Cause: an oversized source image, unsuitable format, or a full-resolution file delivered to small screens.
Fix: export responsive derivatives, choose a supported compressed format, reserve layout space to avoid shifts, and measure the production page rather than relying on the generator preview.
Rank #4
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. It can capture a URL as PNG, JPEG, WebP, or PDF without you maintaining a browser runner. Before capture it accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status.
For a one-off image, use the documented GET endpoint (API documentation):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython:
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)Node.js:
const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
ScreenshotNeo also supports full-page and element captures, device presets and custom viewports, retina scale, PDF settings, custom CSS and JavaScript, clicks, waits, request blocking, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, chosen cache TTLs, signed image links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage reporting, and an OpenAPI specification. Its MCP server exposes take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients.
The Free plan includes 1,000 shots per month with no card. Paid plans start at $5 for 3,000 shots; yearly billing gives two months free, and every feature is available on every plan. Create a free ScreenshotNeo account to try it.
FAQ
Is a PWA splash screen the same as a website hero image?
No. A PWA splash screen appears while an installed app opens; a hero image is page artwork visible in the site layout.
Can one startup image cover every iPad window?
Not reliably. Opening size, orientation, and multitasking layout can require separate linked variants.
Should I put the headline inside the generated image?
Usually no. Keep essential copy and controls as HTML for accessibility, editing, localization, and responsive behavior.
What image size should I generate?
Use the dimensions required by the destination component and selected image tool. There is no universal website splash-image size.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
