IE 10中的“最受欢迎的网站”屏幕-图标未出现

我们使用以下代码为Favicon，平板电脑，智能手机，Windows 8磁贴等添加图标：-

<link rel="apple-touch-icon" href="apple-touch-icon.png">

<link rel="shortcut icon" type="image/x-icon" href="/webmasters//favicon.ico"/>

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<meta name="msapplication-TileImage" content="apple-touch-icon-144x144-precomposed.png"/>

<meta name="msapplication-TileColor" content="#17151a"/>

不幸的是，这似乎不适用于IE9和IE10的“您最受欢迎的网站屏幕”，因为Google搜索的意义不大。

堆栈使用<link rel="apple-touch-icon" href="apple-touch-icon.png">似乎适用于它，但不适用于我们。

任何解决方案的线索表示赞赏。

在此处输入图片说明

internet-explorer favicon

— MJWadmin
source

是否仅在此屏幕上失败？例如。正常访问时，浏览器标签会加载图标吗？那并不能肯定地证明任何事情，但是会提供一些信息。否则，您似乎已经完全涵盖了favicon的情况。我不确定我是否会为此担心太多。众所周知，浏览器在很长一段时间内通常都无法加载图标。另外，每个人都会发生吗？

— Su

这些图标都没有404'ing，并且图标图标在其他浏览器中也可以使用，就像触摸图标一样。这是非常烦人的“主席通知”问题之一。花了一个上午的时间，好奇和沮丧使我变得更好。

— MJWadmin 2012年

您是否尝试过堆栈使用的实际PNG图像？万一PNG格式本身有异常？

— MrWhite 2012年

其他浏览器与此处无关。我的意思是图标会在常规IE选项卡中加载。缺少404指令也不会告诉您任何信息。它与图像是否真的存在无关。浏览器通常对于加载网站图标，周期不定。当它本身成为一个问题时，通常几乎无能为力（清除缓存，以及其他您可能想到的事情：可能会起作用，可能不会；这会令人惊讶！）随着时间的推移，他们对此有所改善，但是它仍然发生。对于已经在另一个选项卡中打开的带有图标的网站，Firefox只是无法在选项卡中加载网站图标。

— Su

您可以在评论中发布网站链接吗？

Answers:

您的ico文件在哪里？我可以看到它位于根文件夹中，那么您就不需要在其后面的斜杠了，从文件后面删除了斜杠，也就不需要了type="image/x-icon"

您的ICO文件应该是具有不同所需图标大小的普通图标库。

<link rel="shortcut icon" href="favicon.ico"/>

只需使用上面的代码，它就可以完美地用于IE9，IE10，FX和Chrome。

如果以前使用过不同的favico，则也需要刷新浏览器的缓存。

— 奥姆尼
source

假设文件实际上位于根文件夹中，那么问题肯定出在文件上，而不是显示的html标签（除非还有其他导致IE问题的html错误）。我的favicon链接标签的编写方式与@MJWadmin一样，并且我的图标在IE9最喜欢的选项卡中的加载效果很好

— WebChemist 2012年

您的网站图标的尺寸是多少？检查此列表以确保它们符合以下准则：

自定义站点图标-Internet Explorer 9中的站点图标

编辑

查看Stackoverflow的源代码，我看到2个图标图像：

<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">

和

<link rel="apple-touch-icon" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">

当我在IE9的“收藏夹”选项卡中查看我的stackoverflow时，看起来它使用的是16x16图标（并将其居中放置在32x32容器中），而不是您建议的158x158 stackoverflow苹果触摸图标，因为如果您查看png，从侧面到底部的“填充”距离比约为2.5：1，其中在图标图标中为1：1，与IE9选项卡上的1：1填充相同...

我可以告诉您我的雇主的收藏夹图标确实已加载到IE9收藏夹及其64x64（不透明，大小为12.5kb）中。如果仍然无法显示收藏夹图标，请发布链接，以便我们可以检出实际的图像文件

— Web化学家
source

-1

像Omne那样尝试尝试删除您的type属性，或者添加另一个以image / vnd.microsoft.icon作为值的属性。然后确保您的服务器正在发送点ico文件的mime类型。看到这个：

https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee

一些背景故事

它曾经是，或者更确切地说是关于图标的正确MIME类型的争论。

Microsoft世界曾经并且可能仍然依赖于“ image / vnd.microsoft.icon”，而世界其他地方则非正式地（正式）使用“ image / x-icon”。

来自Wikipedia ICO格式：

ICO文件的IANA官方注册的MIME类型是image / vnd.microsoft.icon，于2003年注册。错误的标签“ image / ico”，“ image / icon”，“ text / ico”和“ application / ico”以及在正式注册和分配MIME类型时，使用了非官方名称“ image / x-icon”。

来自维基百科的Favicon

2003年，.ico格式在MIME类型为image / vnd.microsoft.icon的互联网分配号码管理局（IANA）中注册。[12] 使用.ico格式时，Internet Explorer无法显示使用标准MIME类型提供的文件。Internet Explorer的一种解决方法是将.ico与Web服务器中的非标准图像/ x-icon MIME类型相关联。

— 安东尼·哈佐波洛斯
source