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.