为什么我的favicon没有出现在Firefox和IE中?

时间:2012-05-18 12:46:15

标签: javascript jquery html css html5

我在<head>区域中指定了这样的小图标:

<link href="/Content/images/icons/tick-circle.png" type="image/x-icon" rel="shortcut icon">
<link href="/Content/images/icons/tick-circle.png" type="image/png" rel="icon">

位置正确但是当我打开一个页面时,我仍然看不到我的图标。我认为这是为最新版本的IE和Firefox指定ico的两种最新方式。

7 个答案:

答案 0 :(得分:4)

虽然你的favicon可以是一个png,但在我看来,以.ico结尾的实际文件效果最好。此外,使用完整的域名(即http://www.domain.com/images/favicon.ico),不依赖于相对链接。如果您尝试在浏览器中加载图标并且失败,则只需刷新页面即可将其重新加载。清除浏览器的缓存,然后尝试查看是否显示favicon。

以下3个favicon链接适用于FF,Opera,Chrome,IE和Apple产品

您的代码'应该'如下所示:

<link rel="icon" href="http://www.domain.com/content/images/icons/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.domain.com/content/images/icons/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.domain.com/content/images/icons/favicon.ico">

如果您想保留不带.ico扩展名的相关链接:

<link rel="icon" href="/content/images/icons/tick-circle.png" type="image/x-icon" />
<link rel="shortcut icon" href="/content/images/icons/tick-circle.png" />
<link rel="apple-touch-icon" href="/content/images/icons/tick-circle.png">

答案 1 :(得分:0)

favicon是其中一个奇怪的问题。

在网站的根目录上制作图标,并将其命名为favicon.ico

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

请参阅维基百科http://en.wikipedia.org/wiki/Favicon

中的“辅助功能”部分

答案 2 :(得分:0)

尝试以下代码。

<link rel="shortcut icon" href="your icon path">

确保完成后删除所有缓存并重新启动浏览器。添加后,只会在现场显示chrome。

也尝试使用ico文件而不是png或其他。

答案 3 :(得分:0)

较旧的浏览器希望它采用.ico格式,而不是png。请考虑改变它。

您可以通过转换器轻松完成,例如this one

来自那里的公寓,如上所述,并且像

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

代替。

为了解决这个问题,清空所有缓存而不仅仅是最后几个小时可能会解决问题。

答案 4 :(得分:0)

你的.htaccess中有这样的东西吗?编辑了图像或其他东西

# Sample of what if have in mine. this restricts the download the time you specify
# 480 weeks
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
Header set Cache-Control "max-age=290304000, public"
</FilesMatch>

远程你的问题。但像这样的事情可能阻止浏览器检索那些文件扩展名。在这种情况下,尝试使用浏览器的缓存吗?

答案 5 :(得分:0)

PNG从未在IE中使用过favicons。就在昨天我读到Firefox改为仅使用.ico格式,但我无法证实这一点。我试过这个,发现png对我来说也不适用于FF。

答案 6 :(得分:0)

我对IE不确定,但出于安全考虑,FireFox已决定不再显示favicons(即您可以将绿色锁定作为您的图标,并可能误导用户相信您的网站是安全的。)

这是一个写作:http://www.neowin.net/news/firefox-removing-favicons-from-the-address-bar

更新:至于favicon ...使用此标记:

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

我认为原始代码的问题是&#39; /&#39;在favicon的路径中Content之前。