Enabling Startup Image for an iPad Web Application

Though Apple did not document yet if  and how the iPad supports the startup image tag for web applications:

<link rel=”apple-touch-startup-image” href=”/startup.png”>

After some trials and errors I found how to make it work. You just need to make sure that your image is set to size: 1004*768 portrait.

Note that it is 1004 and not 1024. They did the same with the iPhone: 460 instead 480..

Hope you will find this useful.

22 Responses to “ “Enabling Startup Image for an iPad Web Application”

  1. Cool, thanks for this. Shame Apple haven’t addressed this officially yet in their documentation. Ideally I’d have a start-up image for iPhone/iPod and a separate one for iPad.

  2. Rolfo says:

    Amazing, thank you!

    Saved me much time and head scratching here. Well done :D

  3. Steve says:

    Thanks for this soooo much!

    I was pulling my hair out over this. Very much appreciated!

  4. Rob says:

    I got this to “work” by making it 768 wide by 1004…

    The problem I’m having now is that when my webapp launches in landscape orientation, the startup image is sideways with a 20px white gap on the left. Does anyone else see this issue?

    • Mick says:

      my problem is that in landscape the startup image just doesn’t appear at all.

      appears all the time when launched in portrait… anyone any ideas?

      Cheers

  5. Len says:

    rob, i have the same problem.

    also there is a 50% chance that my graphic will appear upside down depending which type of landscape the user is holding the ipad.

  6. I have worked around the splash screen orientation problem by designing a single splash screen that looks reasonably good in every orientation. Radial designs work well for this.

    I am currently stuck on how to make a splash screen show for both iPhone and iPad though. If I put up a picture with the right dimensions for one platform, then it doesn’t work for the other. I’ve tried putting 2 link tags (one for each), but that doesn’t fix it. Both platforms try to honor use second link, and ignore the first.

    Potential workarounds?

    1. Separate copies of the app for each platform?

    2. User server-side URL rewriting to deliver the correct, client-dependent splash screen image through a single URL?

    3. Add a script that detects the user agent, and uses document.write to insert the correct link tag?

    I think I’ll try #3 first, since it’s the most elegant, assuming it works.

  7. Well, that was quicker and easier than I ever guessed. Include something like this in your head section to load the correct splash screen for iPad or iPhone/iPod…

    if( navigator.platform === ‘iPad’ ) {
    document.write(
    ” );
    } else {
    document.write(
    ” );
    }

    Hopefully, this code formats correctly and is readable here.

  8. That didn’t come out. It looks like I’m maybe supposed to wrap it in backticks for WordPress? Trying again…

    `
    if( navigator.platform === ‘iPad’ ) {
    document.write(
    ” );
    } else {
    document.write(
    ” );
    }
    `

  9. Sorry folks. I can’t figure out how to post example HTML here. Have a look at the source for my work in progress at http://stevej.name/dev-play/browser-calc/browser-calc.html. I’ll try to leave that in place, so the link doesn’t break.

    To describe the code, it compares navigator.platform to ‘iPad’ and then uses document.write to generate the html for the appropriate splash screen link tag (iPad or for non-iPad).

  10. Micho says:

    Man, you saved my day!

  11. frequent says:

    Hi,

    nice job!

    However I tried to use the same approach to adapt the startup-image to the orientation but it doesn’t work. Any clues as to why?

    Regards.

  12. I’m trying to get this done, but it doesn’t seem to be working at all, at least using the local web sharing. I’ve got a custom icon that works fine, but no splash screen.

    Tried using the image in a variety of directories and filenames.

    File size is 1004 x 768 and is 684kb.

    Any help would be massively appreciated, thanks!

  13. Damn, how do you copy html code? lol

  14. Ariel says:

    Any idea how to get the splash image to display in both landscape and portrait?

    I can get mine to open in portrait, but if the webapp opens while in landscape, it’s nothing but a white screen.

  15. Miky says:

    Same problem here. Splash image showing in portrait mode but not in landscape… When the webapp opens while in landscape, nothing more than a white screen :(

    splash sizes: 1004 height x 768 width

    Thank you!

  16. Víctor Hugo Gómez says:

  17. Víctor Hugo Gómez says:

    try with this, using the follow sizes:
    landscape: 748 x 1024
    portrait: 768 x 1004

    http://www.sencha.com/forum/showthread.php?119233-iPad-with-iOS-4.2.1-how-to-get-apple-touch-startup-image-to-work-in-landscape-mode.

  18. Krzy-Cho says:

    Portrait orientation only for iPhone, iPod touch
    • Use media queries
    • 320×460 for iPhone 3GS, iPod touch

    • 640×920 for retina display

    Startup images for iPad with orientation
    • Use media queries and exact image dimensions
    • Portrait—768×1004

    • Landscape—1024×748

    source: http://adcdownload.apple.com//wwdc_2011/adc_on_itunes__wwdc11_sessions__pdf/503_hidden_gems_for_web_apps.pdf

  19. fama says:

    It’s in fact very complex in this active life to listen news on Television, thus I simply use the web for that reason, and obtain the most recent information.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>