iPhone HTML apps startup image FAQ: How do I set the startup image (splash screen) for my iPad or iPhone HTML app?
This quick blurb from the Apple developer documentation leads us to the answer:
On iOS, similar to native applications, you can specify a startup image that is displayed while your web application launches. This is especially useful when your web application is offline.
By default, a screenshot of the web application the last time it was launched is used. To set another startup image, add a "link" element to the webpage.
iPad/iPad startup image syntax/example
Here's the iPhone HTML app startup image syntax for the link element you need to set in the HEAD section of your HTML/web page:
<link rel="apple-touch-startup-image" href="/startup.png" />
In that link tag the name of the file can be whatever you want it to be, so you can change it, something like this:
<link rel="apple-touch-startup-image" href="/mini-me-startup-image.png" />
Also from the Apple developer documentation:
On iPhone and iPod touch, the image must be 320 x 460 pixels and in portrait orientation.
I've read that the iPad requires an 1004x768 pixel image, but I haven't tested this yet.
iPad and iPhone HTML app startup screen image - Summary
I hope this tip on setting the startup image for your iPhone HTML app has been helpful. It's just on more technique you can use to make your HTML/web app look more like a native iPhone or iPad app.
For more information on developing iPhone/iPad HTML applications, here's a link to Apple's developer documentation on configuring web applications.
There’s just one person behind this website; if this article was helpful (or interesting), I’d appreciate it if you’d share it. Thanks, Al.