Windows 8磁贴无法显示正确的图像.显示fav图标

Question

我们将网页固定在Windows 8计算机上,但它显示的图像似乎是图标,而不是元数据/ xml文件中指定的图标.

我首先尝试将其添加到所有网页的头部:

<!--[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]-->

由于某种原因,这不起作用.我可以成功导航到"内容"部分中所述的每个图像,并显示图像正常.

然后我尝试了希望这可能有效的xml.我的html头部分看起来像这样:

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

我知道如果我使用默认名称'browserconfig.xml',则不需要msapplication-config,但无论如何都认为id是显式的...

我的xml看起来像这样:

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

知道为什么显示fav图标而我的图像不显示？没有运气就试过没有钉住和重复.我用这个网站来帮助我:http://www.buildmypinnedsite.com/

提前致谢!

Answer 1

解决了它.

使用browserconfig.xml方法时效果最佳.

将其添加到元数据中:

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

如果您在测试之前添加了图像,然后希望更改图像,那么Windows似乎会缓存这一点并清除Windows缓存似乎对某些用户来说是令人沮丧的,所以...

我在图片的末尾添加了一个参数url的"？1".这似乎向Windows建议内容是动态的,因此重新加载图像.我想你一旦完成了这个技巧就可以删除它...

我的browserconfig.xml现在看起来像这样:

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

现在它完美无缺.对此解决方案的反馈表示赞赏.

编辑:

经过严格的测试和挫折后,使用相对路径时,这种方法运行良好.在我们的例子中,该网站是(比如)www.myapp.com,但java web服务器被称为/ app,因此www.myapp.com/app是根目录.

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

browserconfig中的src是相对于您正在查看的页面!所以最好在这里使用完整路径,因为它们会固定页面/app/orders/index.jsp.所以src成了

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

这现在运作良好.