Website live tiles in Windows 8
Windows 8 has given us a lot of new and cool features for both developers and users. One of these features is the possibility to pin websites to your start screen. Default this tile will look like the favicon of the website, but you are also able to change the pinned tile to a live tile. The live tile will get the necessary information from the RSS feed of the website.
To enable this website-live-tile-feature, just follow these steps.
First, navigate to the https://www.buildmypinnedsite.com website which acts as a wizard. This website is able to create both the icons and necessary HTML you need to implement on the website.
Just specify the title of the website, the background color of your tile and upload an image you want to use for your live tile. The result will be something like the image below.
As you can see, there are 4 tile sizes you need to configure. The preview of the tiles is available at the right side of the screen.
The wizard doesn’t do a very good job at creating images. Therefore I’ve created my own tiles using Paint.NET with the correct dimensions. The dimensions you need to use for a tile are specified in the table below.
| Image | Dimensions |
|---|---|
| Tiny | 128x128 |
| Square | 270x270 |
| Wide | 270x558 |
| Large | 558x558 |
On the next step you’ll have to specify the RSS feed you want to use for the live tile.
After pressing the Get feed button you will automatically navigate to the next step which shows the HTML for the live tile to work.
Just paste the HTML in the HEAD-section of your website, upload the images from the package and you are good to go.
Because I’ve created my own images for the live tiles, I had to change the tiny.png, square.png, wide.png and large.png image locations to match my own.
After navigating to the site in Modern IE, you can pin the website.
The result is one of the following tiles on your start screen.
I would recommend for every developer to add this small piece of functionality to their sites. It’s a nice feature for the users and a small effort for the developer. It also saves you from creating a mediocre mobile app, which probably just is a wrapper around the website.