iPhone HTML apps - Using an app startup image (app splash screen)

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.