Windows 8 tile not displaying correct images. fav icon displayed instead

Question

We have our web page pinned on a Windows 8 machine but the image it is displaying seems to be the fav icon rather than what is specified in the meta data/ xml file.

I first tried adding this to my head section in all web pages:

<!--[if IE]>
<meta name="application-name" content="My App"/>
<meta name="msapplication-TileColor" content="#ffffff"/>
<meta name="msapplication-TileImage" content="http://mysite.somwhere.au/app/img/tile.png" />
<meta name="msapplication-square70x70logo" content="http://mysite.somwhere.au/app/img/tiny.png"/>
<meta name="msapplication-square150x150logo" content="http://mysite.somwhere.au/app/img/square.png"/>
<meta name="msapplication-wide310x150logo" content="http://mysite.somwhere.au/app/img/wide.png"/>
<meta name="msapplication-square310x310logo" content="http://mysite.somwhere.au/app/img/large.png"/>
<![endif]-->

This didn't work for some reason. I could successfully navigate to each image stated in the 'content' section and it displayed the image fine.

Then i tried the xml hoping this might work. My html head section for this then looked like this:

<!--[if IE]>
<meta name="application-name" content="My App"/>
<meta name="msapplication-config" content="http://mysite.somewhere.au/app/browserconfig.xml" />
<![endif]-->

I am aware that msapplication-config is not needed here if i use the default name 'browserconfig.xml' but thought id be explicit anyway...

And my xml looks like this:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
   <tile>
     <square70x70logo src="http://mysite.somewhere.au/app/img/tiny.png"/>
     <square150x150logo src="http://mysite.somewhere.com.au/app/img/square.png"/>
     <wide310x150logo src="http://mysite.somewhere.au/app/img/wide.png"/>
     <square310x310logo src="http://mysite.somewhere.au/app/img/large.png"/>
     <TileColor>#ffffff</TileColor>
   </tile>
 </msapplication>
</browserconfig>

Any idea why the fav icon is displayed and my images are not? Tried un pinning and repinning with no luck. I used this site to help me: http://www.buildmypinnedsite.com/

Thanks in advance!

Answer 1

Solved it.

Works best when you use the browserconfig.xml method.

Add this to your meta data:

<meta name="msapplication-config" content="/app/browserconfig.xml" />

If you have added images before for testing and then wish to change the image, windows seems to cache this and clearing your windows cache seems to be frustrating for some users, so...

I added a parameter on the end of my image url's "?1". This seems to suggest to Windows that the content is dynamic and therefore reloads the images. I imagine you can remove this once it has done the trick...

My browserconfig.xml now looks like this:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/app/img/smalltile.png?1"/>
      <square150x150logo src="/app/img/mediumtile.png?1"/>
      <wide310x150logo src="/app/img/widetile.png?1"/>
      <square310x310logo src="/app/img/largetile.png?1"/>
      <TileColor>#ffffff</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Now it works perfectly. Feedback on this solution is appreciated.

EDIT:

After rigorous testing and frustrations got this working well and repeatedly when using relative paths. In our case the site is (say) www.myapp.com but the java web server is called /app so www.myapp.com/app is the root directory.

<meta name="msapplication-config" content="/app/browserconfig.xml" />

src in browserconfig is relative to the page you are viewing! So best to use full paths here incase they pin a page /app/orders/index.jsp. So src becomes

src="/app/img/myimage.png?2"

This works well now.

Answer 2

Remove <!--[if IE]> and <![endif]-->, Windows 8.x ships with IE10+ which no longer supports conditional comments.