Pinned site enhancements

Article
11/05/2015

Changes to pinned sites in Internet Explorer 11 support Live Tiles and make your sites more visually engaging when you pin them, save them as favorites, or display them as frequently viewed sites. Live Tiles bring customers in closer contact with your site and create a customized Start screen experience.

Setting up live tiles and notifications

IE11 provides three ways to define customized live tiles 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 XML browser 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 info, see:

New features for live tiles and notifications

IE11 adds metadata values that let you pin sites to the Windows Start screen:

Metadata name value	Description
msapplication-square70x70logo	Defines the image to use as the small tile for the pinned site.
msapplication-square150x150logo	Defines the image to use as the medium tile for the pinned site.
msapplication-wide310x150logo	Defines the image to use as the wide tile for the pinned site.
msapplication-square310x310logo	Defines the image to use as the large tile for the pinned site.
msapplication-notification	Defines up to five XML files to be polled at specific intervals; these files can contain notifications to be displayed on the tile.
msapplication-config	Defines the name and location of an XML file containing browser configuration elements.

Note Tile images must be smaller than 200 KB in size and no larger than 1024x1024 pixels.

For more info about pinned site metadata, see:

In addition, IE11 provides new methods, functions, and events to support notifications:

API feature	Description
msClearTile	Removes a notification from the tile.
msPinnedSiteState	Returns the pinned state of a webpage.
msStartPeriodicTileUpdate	Starts a periodic update for a tile.
msStartPeriodicTileUpdateBatch	Starts a set of periodic updates for a tile.
msStopPeriodicTileUpdate	Stops a periodic update cycle.
msStartPeriodicBadgeUpdate	Starts a badge update for a title.
msStopPeriodicBadgeUpdate	Stops a badge update for a tile.
msEnableTileNotificationQueue	Controls notification cycling for all tile image sizes.
msEnableTileNotificationQueueForSquare150x150	Controls notification cycling for medium tiles.
msEnableTileNotificationQueueForWide310x150	Controls notification cycling for wide tiles.
msEnableTileNotificationQueueForSquare310x310	Controls notification cycling large tiles.
msScheduledTileNotification	Schedules one or more notifications for a specific date and time.
msRemoveScheduledTileNotification	Removes a scheduled update notification for a tile.