How to add a Windows 8 Site Tile to your Website

Windows 8 lets you save sites to your “home screen”, quite similarly to the iphone, ipad and others do.

On Windows 8 they’re called “Site Tiles” and it’s quite easy to add this ability to your site. Here’s how:

Make your site tile image and add to your webpage:

     
  1. Make a 144x144 transparent png image. Most I’ve seen are simply a white graphic element as the “Metro” looks seems to be white over a solid color.
  2.  
  3. Define what the background color under your image should be.
  4.  
  5. Add the meta tags to your page so Windows 8 knows you’ve “got the stuff”.

I made a quick test image using a snail custom shape and tried to fill the 144x144 square as much as possible. There was space above/below the snail but the having the space seems to be a non-issue. Here’s the image: http://sitesbyjoe.com/rwd/assets/images/W8-icon.png

Here’s the meta tags I added to my page:

<meta name="msapplication-TileImage" content="assets/images/W8-icon.png">
<meta name="msapplication-TileColor" content="#923f3f">

I had Jen @inkpixelspaper try it out on her Windows 8 VM and here’s the result she shared with me:

Windows 8 Site Tile Exmaple Screenshot


About Joseph R. B. Taylor

is a designer/developer who makes stuff for screens of all shapes and sizes. He currently works at Edvisors, Inc. where he creates screen-based experiences for used by millions of college students every year.

Wanna Talk?

Contact Me