Ultimate Guide to Mobile Web Icon Markup

I’ve been fighting a problem for the last few days, as I’ve been trying to identify why my blog (and a friend’s blog) are not formatting Windows Phone Live Tile content properly.  For those of you who don’t use a windows phone, this is one of the uber-cool features of the device where I can bookmark a website as a tile on the start screen and updates to the site are broadcast as new text that rotates across the “back of the tile”.  

In my Phone home screen, you can see that I have a number of websites pinned so that I can quickly get to them.  This is from the lower part of the screen, but you can see the sites:

You can immediately see headlines on a number of those site’s tiles.  Others, a simple and sometimes crappy looking screenshot of what the site looked like when I pinned the site.  

On Android and iPhone devices, you have a similar feature that creates an icon on the start screen.  The device will typically take a screenshot and shrink that down for use as an icon.  Other times, it will use the favicon with some simple formatting to create a home screen button.   Yuck…

In this article, I’m going to outline all of the tags to add to your site to make it look cool on your visitor’s home screens.

Get Started Easy – Android Icons

The easiest device to support is Android.  With thee simple tags and two simple images, we can support a custom icon on the start screen.  For my blog, I added these lines to my HTML header:

<meta name="mobile-web-app-capable" content="yes">
<!-- Hi-res photo -->
<link rel="icon" sizes="196x196" href="http://csharpfritz.github.io/icons/large_and.png">
<!-- Lo-res photo for less capable devices -->
<link rel="icon" sizes="128x128" href="http://csharpfritz.github.io/icons/small_and.png">

 

The meta tag is required in order for the phone to enable the “Add to Homescreen” button.  Now you can add a link to CsharpFritz.com to your home screen on Android and see the following:

Next Up:  Apple iOS

Apple’s mobile devices come in four different sizes, and the following meta link tags are needed to add icons for devices with white cables:

<!-- iOS Meta tags -->
<link rel="apple-touch-icon" href="http://csharpfritz.github.io/icons/small_ios.png">
<link rel="apple-touch-icon" sizes="76x76" href="http://csharpfritz.github.io/icons/small_ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="http://csharpfritz.github.io/icons/larse_ios.png">
<link rel="apple-touch-icon" sizes="152x152" href="http://csharpfritz.github.io/icons/large_ipad.png">

At this point, we now have six different shortcut icon sizes.  But wait!  That’s not all!!

Windows and Windows Phone – Internet Explorer Meta Tags

This is the pair that really drives some neat functionality in the mobile devices.  Microsoft provides a three-step wizard to build out some initial pinned tiles functionality for your website at: http://www.buildmypinnedsite.com 

This wizard will help you generate the following markup:

<meta name="application-name" content="CSharp on the Fritz"/>
<meta name="msapplication-TileColor" content="#2714cb"/>
<meta name="msapplication-square70x70logo" content="http://csharpfritz.github.io/icons/small_w.png"/>
<meta name="msapplication-square150x150logo" content="http://csharpfritz.github.io/icons/medium.png"/>
<meta name="msapplication-wide310x150logo" content="http://csharpfritz.github.io/icons/wide.png"/>
<meta name="msapplication-square310x310logo" content="http://csharpfritz.github.io/icons/large.png"/>
<meta name="msapplication-notification" content="frequency=30;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&amp;id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&amp;id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&amp;id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&amp;id=4;polling-uri5=http://notifications.buildmypinnedsite.com/?feed=http://www.csharpfritz.com/blog?format=rss&amp;id=5;cycle=1"/>

These tags should be fairly self-explanatory:

  • application-name is the name to present on the tile for your website
  • TileColor is the background color to present for your tile
  • the logo tiles are all location for four more images to possibly present as the tile content on the start screen.
  • notification is an service location for Windows to poll for updates to present

For more information about the API Internet Explorer, Windows and Windows Phone uses to present tiles for your website, check MSDN at: http://msdn.microsoft.com/en-us/library/ie/bg183312(v=vs.85).aspx

Summary

With a little bit of simple HTML header tags and 10 different sized images you can make your website appear like an application on the home screen of your mobile visitors.  Next thing we need to figure out is a standard button that can be placed on our web pages that, when clicked, forces the browser to make an icon or tile for our website on the device home screen.