Your website for iPhone app

Specifying a Webpage Icon for iPhone Home

We have two ways to design a custom icon that users can display on their Home screens using the Web Clip feature:

• a simple image where iPhone 1.1.3 and later automatically adds some visual effects so that it coordinates with the built-in icons. Specifically, iPhone 1.1.3 adds:
  • rounded corners
  • drop shadow
  • reflective shine
  This is the image for Luscarpa.com:
  
  and this is how it is on iphone home screen:
  
• an image precomposed, to this image iPhone doesn’t add effects.
  This is the image precomposed for Luscarpa.com:
  
  and this is how it is on iphone home screen:
  

How we can provide this image? There are two ways:

• place an icon file in PNG format in the root document folder called apple-touch-icon.png orapple-touch-icon-precomposed.png. With this method you specify an icon for the entire website (every page on the website),
• add a link element to the webpage, as in:
  Copy this code to the clipboardView plain text

  1<link rel="apple-touch-icon" href="/custom_icon.png"/>
  or
  Copy this code to the clipboardView plain text

  1<link rel="apple-touch-icon-precomposed" href="/custom_icon_precomposed.png"/>
  With this code you specify an icon for a single webpage or replace the website icon with a webpage-specific icon.

Hide Safari Components

Add this line if you want that your web app/website don’t show the safari user interface components:

Copy this code to the clipboardView plain text

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

Status Bar Appearance

You can change the Status Bar of web app/website using the following line of code:

Copy this code to the clipboardView plain text

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

There are three different colors:

1default

2black

3black-translucent

NOTE: If set to default or black, the web content is displayed below the status bar. If set to black-translucent, the web content is displayed on the entire screen, partially obscured by the status bar.

Specifying a Startup Image

On iPhone OS, similar to native applications, you can specify a startup image that is displayed while your web application/website launches. By default, this image is a screenshot of the web application with the page that the user has visited the last time. If you want customize it, add a link element to the webpage, like this:

Copy this code to the clipboardView plain text

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

Here an example of my custom startup:

The image must be a png file and his dimensions 320 x 460 pixels in portrait orientation.
NOTE: this option works only if apple-mobile-web-app-capable is set to yes

Standalone Detection

You can develope custom features or effects for your standalone version of site, you can detect it using the boolean var window.navigator.standalone from javascript.