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.

Windows Azure Mobile Services

The Azure Mobile Services platform has some great new functionality that works toward making this a total solution for a mobile / web application hosting environment.  Some of the new features include:

• iOS support – enabling you to connect iPhone and iPad apps to mobile services
• iOS Push Notifications via APNS (Apple Push Notification Services)
• Facebook, Twitter, and Google authentication support with mobile services
• Blob, Table, Queue, and Service Bus support from within your mobile service
• Sending emails from your mobile service (in partnership with SendGrid)
• Sending SMS messages from your mobile service (in partnership with Twilio)
• Ability to deploy mobile services in the west US region

Scott Gu had an article on his blog this morning outlining the expanded support for iOS on the Windows Azure Mobile Services platform. This post runs through how to create a web service that sends push notifications to iOS devices using a native Objective-C SDK within Azure.

This will go a long way toward making Azure the gold standard platform for hosting a web application that interacts with all devices.  By combining this technology with the Windows 8 mobile platform to leverage your Azure-hosted RESTful services, you are able to offer a wide range of device support with a large amount of shared infrastructure and service instance.

If you would like to walk through a tutorial using the push notifications, Microsoft has published one that covers all of the basics. You can view the first tutorial here and follow it up with this one.