Pinned Sites

Article
10/26/2015

This section describes the APIs related to pinned sites, which allow you to pin websites to the Windows Start screen or the desktop taskbar.

Starting with Internet Explorer 11, sites can be pinned to the Windows Start screen and can respond to notifications, display badges, and customize logo images.

Live Tile support allows your pinned sites to communicate with users and to potentially draw them back to your website.

For more info, see Introduction to Pinned Sites or Pinned Site enhancements in IE11.

Setting up live tiles and notifications

Starting with IE11, there are three ways to define live tile customizations and notifications for pinned sites:

Use HTML to specify pinned site metadata:

  <meta name="application-name" content=" Contoso" />
  <meta name="msapplication-TileColor" content=" #009900" />
  <meta name="msapplication-square70x70logo" content="images/smalltile.png" />
  <meta name="msapplication-square150x150logo" content="images/mediumtile.png" />
  <meta name="msapplication-wide310x150logo" content="images/widetile.png" />
  <meta name="msapplication-square310x310logo" content="images/largetile.png" />
  <meta name="msapplication-notification" content="frequency=30; polling-uri=notifications/contoso1.xml;
    polling-uri2=notifications/contoso2.xml; polling-uri3=notifications/contoso3.xml" />

Use JavaScript to set up periodic notifications:

  document.addEventListener('mssitepinned', StartPeriodicUpdateBatch, false);

  function StartPeriodicUpdateBatch()
  {
      var arrURI = ["notifications/contoso1.xml", "notifications/contoso2.xml", "notifications/contoso3.xml"];
      window.external.msEnableTileNotificationQueue(true);
      window.external.msStartPeriodicTileUpdateBatch(arrURI);

Use XMLbrowser configuration files and then call them from the markup of your webpage:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/smalltile.png"/>
      <square150x150logo src="images/mediumtile.png"/>
      <wide310x150logo src="images/widetile.png"/>
      <square310x310logo src="images/largetile.png"/>
      <TileColor>#009900</TileColor>
    </tile>
    <notification>
      <polling-uri  src="notifications/contoso1.xml"/>
      <polling-uri2 src="notifications/contoso2.xml"/>
      <polling-uri3 src="notifications/contoso3.xml"/>
      <frequency>30</frequency>
      <cycle>1</cycle>
    </notification>
  </msapplication>
</browserconfig>

Use a meta element to load the browser configuration file:

<meta name="msapplication-config" content="IEconfig.xml" />

To cancel a browser configuration file, set the content attribute of your meta element to "none".)

For more information, see:

Also in this section

Topic	Description
Browser configuration schema reference	Browser configuration files (also known as browserconfig) can be used to define pinned site customizations, such as tile backgrounds, badge updates, and tile notifications.
Metadata reference	You can customize pinned sites using the meta element, including the name of your pinned site, the background for various tile sizes, notification updates,badges, and more.
Properties, methods, and events	Pinned sites support a variety of events, methods, and properties.