iOS home screen icons for web apps

Since a lot of us are trying to create more dynamic web content for consumption on mobile devices, we find ourselves moving away from native applications and toward responsive design in web applications. One of the small items that can make these web applications feel more like the native app that users download from the iOS store is to create a proper home screen icon.  This is the icon that stays on the home screen of the iOS device when a user creates a shortcut. This is easily handled and can actually be designed for specific devices using nothing more than your markup.  This is accomplished by creating icons of differing resolutions using a standardized naming convention that will be natively referenced and leveraged by the iOS device as part of the shortcut making process.  

One of the cool things that iOS does for you is add rounded corners, shine and drop shadows to your icon in order to ensure some level of short cut consistency. All you need to do there is create you icon without making an attempt at any of those effects.  If you consider yourself a graphic artist and want to do your own effects, just append append the -precomposed keyword to the end of the file name when you create your icon.  This will instruct the iOS device to not apply the native effects it has.  The only thing left at this point is to copy the files to the root directory of your web applications domain with the following naming scheme intact.

File Name	Size	Device	iOS adds effects
apple-touch-icon.png	Any	Any	Yes
apple-touch-icon-precomposed.png	Any	Any	No
apple-touch-icon-57x57.png	57x57	Touch	Yes
apple-touch-icon-57x57-precomposed.png	57x57	Touch	No
apple-touch-icon-72x72.png	72x72	iPad	Yes
apple-touch-icon-72x72-precomposed.png	72x72	iPad	No
apple-touch-icon-114x114.png	114x114	Retina	Yes
apple-touch-icon-114x114-precomposed.png	114x114	Retina	No
apple-touch-icon-144x144.png	144x144	Retina	Yes
apple-touch-icon-144x144-precomposed.png	144x144	Retina	No

This mechanism is flexible enough to allow individual pages to set their own icons via markup as well. Here is an example of targeted icons per device with the following code added to the individual page(s).

 <link rel="apple-touch-icon" href="/icon.png"/>  
 <link rel="apple-touch-icon" href="iphone-icon.png" />  
 <link rel="apple-touch-icon" sizes="72x72" href="ipad-icon.png" />  
 <link rel="apple-touch-icon" sizes="114x114" href="iphone4-icon.png" />  
 <link rel="apple-touch-icon" sizes="144x144" href="ipad144-icon.png" />  

Now, when a user on an iOS device creates a shortcut to this web application or a specific page, they will get a nice looking, branded icon that represents the application well and gives the user a native feel for launching their application.