Creating custom tiles for IE11 websites

[アーティクル]
03/03/2016

Create custom tiles and notifications for your sites in Internet Explorer in the new Windows UI to build interest and click through with your users. You can create customized static and live tiles for Internet Explorer 11, a process that's similar to Windows Store apps.

Static tiles

When a user first pins your site, it's displayed as a static tile on the Start screen. By default, the image on the tile is your website's favicon or a default IE11 logo. You can customize the image by adding metadata tags to your webpage's markup or adding a browser config file.

Small and medium tiles are available by default on the Start screen. A generic IE11 image is used if you don't supply one of your own. For wide and large tiles, you must supply the image.

Static tiles are shown whenever there are no notifications and use an image for each of the four tile sizes you want to offer your users. These are the standard sizes and the recommended image size for each:

Tile size	Standard tile dimensions	Minimum image size	Recommended image size
Small	70 x 70	56 x 56	128 x 128
Medium	150 x 150	120 x 120	270 x 270
Wide	310 x 150	248 x 120	558 x 270
Large	310 x 310	248 x 248	558 x 558

Note The maximum size for all tiles is 1024 x 1024.

Here's how they look:

Small tile 70x70	Medium tile 150x150
Wide tile 310x150	Large tile 310x310

Note To cover a wide range of devices, use an image 1.8 times the standard tile size so the image can be scaled up or down as needed.

For use as live tiles, define a medium, wide, and a large image. The following table gives some guidelines on using the different sizes.

Size	Description
Small	The small tile doesn't support notifications and only displays as a static tile.
Medium	Supported by default. Displays static or live. Will let you display text and images.
Wide	Optional. Displays static or live. Requires you to also define a medium size tile to add a wide tile.
Large	Optional. Displays static or live. Requires you to also define a medium, and wide tile.

If you leave out a size (for example, large), that size tile isn't offered for resizing or notifications. Once a tile is pinned, you can change tile sizes between the defined sizes, but to add or remove sizes from the choice list requires you change your metadata, and have the user unpin and re-pin your tile.

To set up your default tile, you can use an XML file, define metadata in your HTML <head> element, or use JavaScript API calls. The XML file can be the most flexible. If you have several pages that use the same tiles, you can create and maintain one file, and point to it by any page on your website.

This example defines an XML browser config file to set a default logo tile for all four available sizes and a background color. We've made this easy for you to test; just right-click and copy the food truck images shown above, and save them locally by the file names used in the example.

<?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>
  </msapplication>
</browserconfig>

You can save this XML file as browserconfig.xml and save it at the root of your server. IE11 automatically reads the file when the user pins the site. If you want to specify a custom config file, use a meta element in the <head> portion of the page. In this example, see the meta element that declares the config file. If this meta element is missing from your page and a user tries to pin your site, IE11 looks for a file called browserconfig.xml that contains URLs of the individual notification files (tile schema files) and tells Windows to fetch that file at the intervals you specify.

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

For info about defining your default tile using HTML or JavaScript, see Pinned site enhancements in the IE11 developers guide.

Live tiles

IE11 live tiles work with Windows 8.1 to pull notification data from XML files on a website. When you pin a website, here's what happens:

IE11 gets the browserconfig.xml file.
IE11 tells the Windows 8.1 notification platform to get the notifications from the polling URI addresses specified in the browserconfig file at the specified interval.
The notification platform gets the tile schema files and displays the text and images on a tile using the specified template. This repeats every interval set in the browserconfig.xml file, as explained in Build a live tile.

The client polls the website for updates and controls whether a site is polled, and how often, rather than having the website push the content to the client.

The website updates the tile schema files to provide images and text for a live tile. Up to five tile schema files can be defined to provide a constantly scrolling live tile. The tile schema files are updated by the website as new notifications are available, and the Windows notification platform pulls the files down and displays the content as live tiles.

You specify the tile schema files with anXML browserconfig file, meta tags in the <head> element, or from JavaScript in your website.

To specify a polling URI, the browserconfig file (or HTML or JavaScript meta code is updated) includes the schema file addresses. For example, the following is an updated version of the previous browser config file. It now includes the <notification> section.

<?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>

Here are the elements included in the browser config file:

Element	Description
browserconfig	The root element. Required.
msapplication	A vendor specific element that defines the type of application the file applies to (pinned sites). This element is required and must be declared as a child element of the browserconfig element.
tile	Defines the default tile logo image. Includes up to four images with these attributes. square70x70logo square150x150logo wide310x150logo square310x310logo The image src attribute points to the image for the attributes. Images must be a .JPG, .GIF, or .PNG format file, less than 200kb, and smaller than 1024x1024 pixels in size. The TileColor attribute takes an RGB format color such as #ff80aa.
notification	Defines the URIs for the tile schema files. It can include: polling-uri polling-uri2 polling-uri3 polling-uri4 polling-uri5 The five URIs that can be displayed are randomly displayed. These are the files you update with the latest news and info you want displayed on a users Start screen.
frequency	The frequency (in minutes) between poll requests. Must be one of the following: 30, 60, 360, 720, or 1440.
cycle	Controls how the messages are cycled. 0: (default if only one notification) Don't cycle. 1: (default if multiple notifications) Cycle notifications for all tile sizes. 2: Only cycle notifications for medium tiles. 3: Only cycle notifications for wide tiles. 4: Only cycle notifications for large tiles. 5: Only cycle notifications for medium or wide tiles. 6: Only cycle notifications for medium or large tiles. 7: Only cycle notifications for wide or large tiles.

Note Polling URIs point to XML based tile schema files that define a Windows template for each size tile (medium, wide, and large). Templates provide a format for displaying the notification on a live tile.

Creating a tile schema file

A tile schema file contains the image and text for a single notification and a template that shows how to display the information. Tile schema files are updated periodically to provide changed notifications for your users. You can define up to three different sizes (at one template per size). The template's size is matched up with the size of the tile currently being displayed in Windows 8.1. For example, if your current tile size is set as for 310x150, you can use any template that has 310x150 in the name, such as TileWide310x150ImageAndText01.

Here's an example of a schema file in XML:

<tile>
  <visual lang="en-US" version="2">  
    <binding template="TileSquare150x150PeekImageAndText04" branding="name">
      <image id="1" src="images/2.jpg"/>
      <text id="1">Serving Today: Samosas</text> 
    </binding>

    <binding template="TileWide310x150ImageAndText01" branding="name">
      <image id="1" src="images/2.jpg"/> 
      <text id="1">Serving Today: Samosas</text>
    </binding>
 
    <binding template="TileSquare310x310ImageAndText01" branding="name">
      <image id="1" src="images/2jpg"/>
      <text id="1">Serving Today: Samosas</text>
    </binding>
  </visual>
</tile>

These elements make up a typical file schema:

Element	Description
tile	The required root element.
visual	Tells Windows 8.1 to use the version 2 template names. Windows 8 Windows Store apps support templates as version 1. For Windows 8.1, the names were changed and called version 2. You need to specify version 2 to use live tiles with IE11.
binding	Defines the template, image, and text for a single sized tile. Attributes include: template - one of the preset Windows 8.1 templates. Templates are only available for medium, wide, and large tile sizes. branding - sets the form the tile should use to display the app's brand (none, logo, name).
image	Provides these attributes src - the URL of the image to use. id - an optional unique ID to differentiate images. Images must be less than 200kb in size and can be .JPG, .GIF, or .PNG format files.
text	Provides a line of text and an ID attribute. If there are more than one line of text for a binding, then multiple text elements with unique IDs are used.

While there are only templates for three sizes of tile that support Live tiles, you have many template options. For example, a 310x310 pixel square tile can have plain text with or without a large title, a small image and a lot of text, a large image and text, and a number of other formats. The templates are defined by Windows 8.1, and can't be changed. For more information on templates, see Choosing a template. For the full list, see the Tile Template Catalog.