IE11/Windows Tile Support

Dealing with IE 11's "Pin To Start" Feature

So if you've been monitoring your logs, it is quite possible you're seeing NoSuchLayoutExceptions related to browserconfig.xml.

If you are seeing them, it's because your users are running IE 11 and they've just opted to "Pin To Start" for your site (a good thing, I guess).

So what's going on? Well, IE11 has this new feature where it can add your site as a tile in the Windows 8 and 10 Start menus. A tile is similar to the classic favicon that we all know and love, but they are actually much bigger than the favicon. In fact, they also come in different sizes...

If you're interested, you can read all about these new tile things here: https://technet.microsoft.com/en-us/windows/dn455106(v=vs.60)

So you might be wondering, while this is all fine and good, what does that have to do with my site?

Well, you can actually add support in your theme to serve up the necessary information and skip all of those exceptions in your logs.

First you need to get your images together that you'll use for the tiles. In your theme project, put them into the images directory.

In the images directory, create your browserconfig.xml file, something similar to:

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

Of course you'll want to edit for your own filenames, plus you might also want to use an absolute path such as /o/my-theme/images/smalltile.png to eliminate ambiguity.

Then, in your portal_normal template file, add the following line:

<meta name="msapplication-config" content="${images_folder}/browserconfig.xml" />

With this line in place, you're specifying where the file can be found. Using the ${images_folder} syntax deals with substituting a relative path with the full path when the template is being processed, and then it points at the browserconfig.xml file you want to serve.

This <meta /> tag will be ignored by other browsers, but IE11 users on Windows 8 and 10 that want to "Pin To Start" will be able to find your tiles.

And hey, if nothing else, it will get rid of that exception from your logs.

Thanks to my friend and coworker Dylan Rebelak who actually did all of the work for this post. The only part I have in it is writing it up.