Favicon backup for `msapplication-TileImage` on Windows 8.

Question

I have a simple yes/no question.

If I don't put this in my HTML file:

<meta name="msapplication-TileImage" content="favicon.png">

Will Windows 8 automatically use this PNG:

<link rel="icon" href="favicon.png">

I don't have a Windows 8 machine to test it.

Answer 1

The simple answer is yes, it will use the favicon.

With that said, it may not display in the most optimal fashion.

Here is a screenshot with a test I ran:

Update

My answer that I originally posted is still valid but there is a better way:

Custom Tiles for IE 11+ on Windows 8.1+

IE 11+ on Windows 8.1+ does offer a way to create pinned tiles for your site.

Microsoft recommends creating a few tiles at the following size:

Small: 128 x 128

Medium: 270 x 270

Wide: 558 x 270

Large: 558 x 558

These should be transparent images as we will define a color background next.

Once these images are created you should create an xml file called browserconfig.xml with the following code:

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

Save this xml file in the root of your site. When a site is pinned IE will look for this file. For additional information on IE 11+ custom tiles and using the XML file visit Microsoft's website.

Old Answer

The best way to incorporate a favicon for Windows 8 is to use the following code:

<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

The first line is the tile color, you can use a hex value, RGB or a CSS color name. The second line is the path to the icon. For best results the icon should be transparent and sized at 144x144 pixels.