These days, it’s becoming more and more common to deploy a solution as a web application. I’m not a huge fan of buzz word proliferation, but I won’t fault you for saying cloud-based apps (just keep it within reason). Anyhow, the differences in platform capabilities between web apps and native apps is growing increasingly thin, so it makes sense to deploy our solutions as web apps — they’re more portable, more reliable, and more accessible.

The only problem is the discontinuity of the user experience. There are a lot of new features of HTML5 that allow your site to work more like an “app” and less like a “page”, but I wanted to focus on one in particular that doesn’t get a lot of attention: application icons. You know that stupid favicon.ico file that you have to put at the root of the domain? And that you still have to have a link tag in the page head for the browsers who actually follow the standard? But then they don’t recognize any icon size between 16×16, because that’s all that’s in the standard? Well, thank the universe, the favicon is finally the red-headed step-child we always knew it was.

We now have a few different mechanisms for deploying these icons, and the best part: we can deploy multiple icons with different sizes!!! So we can finally have a cool little icon for the title bar, a spiffy medium icon for the home screen, and a mind-blasting hi-res icon for the launcher screen. Implementation is pretty easy too:

<link rel="shortcut icon" href="favicon.ico" />

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

As you can probably tell, this syntax is not the accepted standard, but you should still use it for one good reason: it’s already been proliferated. Other devices seeking to match iPhone feature sets have begun reading this metadata as well — remember, fortune favors the prepared. Alternatively, you can also change the rel attribute to apple-touch-icon-precomposed if you don’t want to bother with all the extra gloss and effects that an iPhone app icon is supposed to have. Instead, it will do a decent job applying the effects for you.

So let’s use that technique, along with the standard mechanism that allows us to actually supply different icon sizes.

<link rel="shortcut icon" href="favicon.ico" />

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
<link rel="icon" sizes="57x57" type="image/png" href="app-icon-57.png" />
<link rel="icon" sizes="114x114" type="image/png" href="app-icon-114.png" />

And now we have a healthy mix of different icon sizes! I love it when a standard comes together!