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.

Share it!

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.

Add new comment

The content of this field is kept private and will not be shown publicly.

Anonymous format

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul type> <ol start type> <li> <pre>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.