Support a Live Tile for your website on Windows and Windows Phone 8.1


tl;dr: Have an RSS feed? Build a Live Tile for your Web site within minutes at buildmypinnedsite.com.

Enabling Web powered Start screens

With Internet Explorer, users can put their favorite Web sites right beside their favorite apps by pinning them to the Windows and Windows Phone Start Screens. Pinning Web sites from IE gives users immediate access to these sites from the Start Screen without having to navigate to them repeatedly.

When users pin your site, they have indicated that they are frequent visitors of your site and care about updates from it. With that in mind, Internet Explorer now brings you Live Tiles for Web sites, allowing you to keep your users connected to your Web site outside of the browser.

With Live Tiles, you can engage with your users by bringing fresh content such as breaking news, new message alerts or titles of new blog posts right to their Start Screen. Furthermore, you can support multiple tile sizes for your Web site, allowing users to display your site prominently as wide or large tiles.

From top left, moving down each column: IE App tile, youtube.com, techmeme.com, theverge.com, anandtech.com, mathrubhumi.com, twitter.com, reuters.com, t.msn.com, aol.com, economictimes.indiatimes.com, IE Test Drive for pinned sites, wired.co.uk, lapresse.ca, cnet.com, contrejour.ie, dhakatimes.com.bd, outlook.com, wellsfargo.com, geekwire.com, nymag.com, gawker.com, indiatimes.com, facebook.com, vyclone.com, polygon.com, wpcentral.com, theage.com.au.

From top left, moving down each column: IE App tile, techmeme.com, contrejour.ie, wellsgargo.com, gawker.com, t.msn.com, youtube.com, vyclone.com, IE Test Drive for pinned sites, wpcentral.com

Adding a Live Tile to your website

Live Tiles for Web sites are powered by Periodic Notifications, wherein the platform pulls text and images from polling uris hosted on a server at a predefined polling interval, and displays this content on the Web site’s tile. You can add Live Tile support for your site in one of three ways – through meta tags on your Web page, by creating a manifest file or via a JavaScript API. The following is an example of a site using meta tags to set up their tile for Windows 8.1:

<meta name="application-name" content=" CenturyCutCook" />
<meta name="msapplication-TileColor" content=" #009900" />
<!-- Logos for all four tile sizes --> <meta name="msapplication-square70x70logo" content="smalltile.png" /> <meta name="msapplication-square150x150logo" content="mediumtile.png" /> <meta name="msapplication-wide310x150logo" content="widetile.png" /> <meta name="msapplication-square310x310logo" content="largetile.png" />
<!-- Notification URL --> <meta name="msapplication-notification" content="frequency=30; polling-uri=1.xml; polling-uri2=2.xml; polling-uri3=3.xml; polling-uri4=4.xml; polling-uri5=5.xml" />

The polling uris defined in this example contain the contents of the notification to be displayed and will be polled every half an hour. Therefore in a given 30 minute interval, a user can see up to 5 updates from this site, keeping your user intimately connected with your Web site at all times.

The polling uris contain XML markup which adheres to predefined templates. These templates are the same for Web sites and for Windows applications, and control the look and feel of a tile. Templates can be text-based, image-based or both. The following example consists of a polling uri which has a binding for the medium, wide and large tile sizes (note that the large size is supported on Windows but not on Windows Phone).

<tile>
   <visual lang="en-US" version="2">
      <binding template=" TileSquare310x310ImageAndTextOverlay02" branding="name">
         <image id="1" src="cheddar_and_ham.png" />
         <text id="1">Cheddar and Ham Skewers </text>
         <text id="2">This recipe for Cheddar and Ham Skewers made with Sargento Tastings is perfect whether you’re looking for an appetizer to entertain with, or you’re looking for a special crave-worthy afternoon snack </text>
      </binding>
      <binding template=" TileWide310x150ImageAndText01" branding="logo">
         <image id="1" src="cheddar_and_ham.png" />
         <text id="1">Cheddar and Ham Skewers</text>
      </binding>
      <binding template="TileSquare150x150Image" branding="name">
         <image id="1" src="cheddar_and_ham.png" />
      </binding>
   </visual>
</tile>

This binding will result in the following tile, across all four sizes supported on the Start Screen:

Large tile, using the TileSquare310x310ImageAndTextOverlay02 template Wide tile, using the TileWide310x150ImageAndText01 template
Medium tile, using the TileSquare150x150Image template Small tile (No notifications)

You can use our code samples to learn more about building live tiles, or if you have an RSS feed on your site and would like to use it to power notifications, use our buildmypinnedsite wizard to build a tile for your site within minutes.

Summary

With Windows 8.1 and IE11 you can keep your users engaged even when they don’t have a browser tab open. Live Tile support will help your users serendipitously discover content on the Start Screen and draw them back to your site more often. Best of all – they can be easily added to your site within minutes!

— Tanvi Surti, Program Manager, Internet Explorer

— Derek Liddell, Program Manager, Internet Explorer

Comments (11)

  1. Bryan Wilkins says:

    Already done for electrovoice.com

    Thanks!

  2. Jeena says:

    I wonder why you are not just using microformats h-feed

  3. Chris W. says:

    Let's put aside how much consumers love Windows 8's tiles tiles – how are we developers supposed to know whether you're going to abandon this like Accelerators and website taskbar pinning? Why should we put in the effort?

  4. Paul Smith says:

    @Chris W. Pinning websites to the Taskbar still works!  But yes long-term support for things like this certainly is required, surely to get high adoption rates you need people to be aware of it, and that takes time.

    This is one of my favourite features in 8.1, and having it show up in Windows Phone 8.1 was sweeeet.   PS if you need another gaming website to pin gamercast.net 🙂

  5. Ilia Khubuluri says:

    Thanks for information, I was looking for it ! 🙂

  6. Yannick says:

    What? Google actualy added support for live tiles to YouTube. 😮

    Anyway, this is a very nice feature, something I've been supporting on my projects and websites since Windows 8 started supporting it. Thanks for the nice work in Windows Phone live tiles, the Windows 8.1 model of live tiles is awesome (compared to both Windows 8 and Windows Phone 8 and lower)!

  7. Gerry says:

    Sorry about this question but how do I pin a website to the start screen?

  8. Tanvi Surti says:

    @Gerry: On Windows 8.1, bring up the address bar, click on the Favorites button (star), click on the Pin.

    On Windows Phone 8.1, bring up the settings menu and click on 'Pin to Start'

  9. Richard says:

    Our organisation has opted to disable Metro IE11 as a group policy.

    Is there any other way to "Pin to Start" please?

    Creating a classic web shortcut on the desktop and adding it to your start screen doesn't unfortunately allow the live tile msapplication meta stuff to work.

  10. Derek Liddell says:

    @Richard unfortunately you cannot get this functionality without Metro IE11

  11. The Deeds says:

    @Derek Liddell, @Richard,

    Perhaps something like connect.microsoft.com/…/ootb-sharing-options-in-internet-explorer would enable IE desktop to have modern features?

Skip to main content