Share via


Pinned site enhancements

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.

 

Pinned site feature changes

As of IE11, these pinned site features are either not supported or have been modified in ways that require changes to your code:

Update any pinned sites using these features.

IE11 info and samples

Create live tiles for your websites in IE11

Downloadable sample

Interactive online sample

IE11 test drive demos

Windows 8 info

Badge Notifications, directly on your Windows 8 Pinned Site

High Quality Visuals for Pinned Sites in Windows 8

Pinned Sites in Windows 8

More info

Internet Explorer 9 Samples and Tutorials

Internet Explorer 9 Test Drive: Site Pinning Demos

Pinned Sites: Windows 7 Desktop Integration with Internet Explorer 9