How to Add Windows Tiles to Your Website

Windows is hot again; not only because of its recent product unveilings, but also because of its striking direction in design language and interface.

You may already be familiar with the Start screen on Windows Phone, upon which it shows so-called Tiles.

“A Tile is an image that represents your app on the Start screen.” - msdn

These Tiles are akin to the icons in iOS or Android, except that they can be resized to show different states of the app, and they even show a glimpse of notification updates instead of just being static icons.

Here is an example from the official Poki app; a beautiful pocket client app for Windows.

Websites can adopt tiles in the same manner as they do Apple touch icons. When you bookmark (or pin) a website to the home screen in iOS, it will show the website icon if provided. Similarly, in Windows, users may bookmark a website to the Start screen. So, why not add tiles to your websites? Ultimately, one of our responsibilities as web developers is to optimize websites for users regardless of the platform they are using.

In this tutorial, we are going to see how to add tiles for websites.

Creating Icons

By default, when designated images for tiles are not provided Windows will grab the image from the favicon. However, since a favicon is typically set at very small size (usually 32px or 64px square) the image could end up blurry.

We’re going to design icons specific to the task, and we can do so with any graphic application that we choose (Photoshop, Sketch, MS Paint, etc.). There are actually a few tools that automate creation of icons for multiple platform (iOS, Android, Windows, and Chrome) all at once, such as this Grunt Favicon Task. Still, I prefer to have more control of how each icon is presented in each platform.

The only thing to care about, in this case, are the required image dimensions.In this case four different sizes:

Save each of these icons with a transparent background (we will see why we don’t need the background shortly), giving them suitable names.

Now to reference them within the web page. If you have already optimized your website for iOS devices you will be familiar with the apple-touch-icon link tag. Similarly, Microsoft have introduced a set of new proprietary meta tags, named msapplication-* , as follows:

These meta tags will serve the icons when each size is most appropriate. Note that the msapplication-square310x310logo (the largest tile size) may only appear in devices with larger screens such as the Surface Pro or Lumia 1020. Phones such as Lumia 620 or 520 will likely not see the tile of this size.

Having sorted out our markup we should see our icons appear within a Windows tile when saved to the Start screen:

Default Behavior

As you can see above our icon is white and the tile color black, and we can also see the word “Acme” in the lower-left of the tile.

Windows has used the user’s theme color as the background of the tile, showing through all transparent areas. Windows also took our website title, “Acme”, as the tile name.

Neither of these are ideal however; the background colour may not work with our icon at all, and perhaps the webs page title is way too long for the space provided on the tile. So, in addition to providing the icons, we should also specify the tile color and the website name.

Tiles Color and Name

We specify the Tile color and name through msapplication-TileColor and application-name meta tags, as follows:

Unfortunately we can only set the tile color in HEX format; very few color keywords are supported. I hope this can be improved in the next iteration, perhaps in the new browser (codename Spartan), with more supporting color formats like RGBA or HSLA to take advantage of transparent effects.

Within the second meta tag, we set the tile name to “Acme Corp.”, so Windows will take it for the tile name instead of the