To get started we'll need to create a few graphics. Within your graphics editor, create a 32 x 32 pixel image for your favicon. This is typically a logo or an image that you feel represents your site.

Next create an app icon that is square and at least 144 x 144 pixels. A vector graphic is ideal for this icon so you can easily resize it without having to worry about the image quality. You have the option of rounding the corners of the icon yourself, or you can let the device round the corners for you. For this example we'll round the icon ourselves.

The corner radius of your rounded square should be 25.263 pixels to match Apple's icon styles. The formula to figure out the radius for any icon size is: 10/57 x icon size = radius. There are also a number of iOS icon templates that can be found online to help you get started.

Finally, create a startup image at 1536 x 2048 pixels. This image will be used for iPad and iPhone and needs to be resized, so working with vector art is ideal. This image will be displayed when the user launches your site, if you allow it to be run as a web app.

The first item we created was a favicon to show in bookmarks and the browser title. Normally favicons are 16 x 16 pixel files named favicon.ico that are uploaded to the root directory of your site. The Retina ICO file is double the amount of pixels. Browsers will automatically look for this filename within the root directory of your site.

Next we set up our site to run as a web app and gave it the necessary images. The apple-mobile-web-app-capable value for the <meta> tag tells the device that your site can function in full screen. If you're going to use this setting make sure you have all the appropriate navigation built in so the user doesn't need the back button. When the web app is saved to the home screen it will use the images that we specified in our code.

The first set of images we added create an app icon for our site. The browser will take the largest of these icons that it is able to display. These icons accommodate both iPhone and iPad screens. By including these in your code you can provide any filename for the images or location. If you save them with the filenames we used and save them in the root directory of your site, you wouldn't need to put in the code because the browser will look for them there.

Finally, we added some startup images. These will be displayed while your web app is loading. The sizes we added accommodate the three variations of iPhones (regular, Retina, and iPhone 5) and both iPad screen types in landscape and portrait. It's important to rotate your landscape images 90 degrees clockwise (so they are in a vertical orientation) before saving them, so they will load correctly. We implemented these using a media query to display the correct image based on the devices' specifications and orientations.

On the iPhone 5 you may find that your web app won't load in full screen. This issue is due to the viewport value of the <meta> tag. If you have a width set in this tag it will prevent the iPhone from properly scaling the app. Remove that setting and the issue should be resolved.