Browse: Home / 2013 / March / 15 / iOS Web App

iOS Web App

By on March 15, 2013

Some cool stuff to make a website act more like an app on iOS. Full details here.

Specifying a Startup Image

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

Hiding Safari User Interface Components (also adds it to the task bar like an app)

<meta name="apple-mobile-web-app-capable" content="yes" />

Changing the Status Bar Appearance

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Touch Icons

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />

<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

Posted in , , | Tagged , | 1 Response

One response to “iOS Web App”

  1. Darin
    Darin March 18, 2013 at 4:36 pm | |

    I include my apple touch icons based on what HTML5 Boilerplate has for included icons and what this guy says.

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

    Icons listed from largest to smallest.

    Include rel=”apple-touch-icon-precomposed” so that the reflective shine isn’t added to the image. If you want that reflective shine, don’t put it on there and rename your images: apple-touch-icon-(size).png.

    I also prefer the naming scheme in boilerplate.

    Also check out this App icon psd template.

Leave a Reply

You must be logged in to post a comment.