Html 为什么在 Firefox 中无法加载 favicon？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1319766/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
why won't favicon load in firefox?
提问by
I am using the following:
我正在使用以下内容：
<link rel="shortcut icon" href="/images/favicon.ico" />
It is a true 'ico'. When I visit http://mydomain.com, the icon loads. But when I visit the 'www' subdomain: www.mydomain.com...it won't load. Any ideas what is going on?
这是一个真正的“ico”。当我访问http://mydomain.com 时，图标会加载。但是当我访问“www”子域时：www.mydomain.com...它不会加载。任何想法发生了什么？
回答by Matthew Lock
I found that I had to clear my Firefox cache [CTRL]+[SHIFT]+[DEL], and then restart Firefox before I could see the favicon, which I put in the root of the web server and called favicon.ico.
我发现我必须清除我的 Firefox 缓存 [CTRL]+[SHIFT]+[DEL]，然后在我看到 favicon 之前重新启动 Firefox，我把它放在 web 服务器的根目录并命名为 favicon.ico。
Note that in recent versions of Firefox the favicon is only displayed on the tab icon and bookmark, not in the address bar icon.
请注意，在最新版本的 Firefox 中，图标仅显示在选项卡图标和书签上，而不显示在地址栏图标中。
回答by RCB
It's part of a bigger firefox bug. If I am in mysite.com and say link rel="shortcut icon" href="/myicon.ico"it works. But this is the only way it works. If am in mysite.com and say link rel="shortcut icon" href="myicon.ico"or any other relative link, it fails. HOWEVER, if I am in www.mysite.com and use relative links, they work fine. Further, if I am in mysite.com and say link rel="shortcut icon" href="http://www.mysite.com/mypath/myicon.ico"it works. Firefox has forgotten how to deal with websites where www.mysite.com IS mysite.com. It used to work, and it doesn't anymore. You can also see that if you flip between www.mysite.com and mysite.com links will change from "visited" to "unvisited" style. FF is broken on this one, and has been for a couple of versions now, though once it worked.
这是一个更大的 Firefox 错误的一部分。如果我在 mysite.com 并说它link rel="shortcut icon" href="/myicon.ico"有效。但这是它唯一的工作方式。如果我在 mysite.com 并说 link rel="shortcut icon" href="myicon.ico"或任何其他相关链接，它就会失败。但是，如果我在 www.mysite.com 并使用相关链接，它们就可以正常工作。此外，如果我在 mysite.com 并说它 link rel="shortcut icon" href="http://www.mysite.com/mypath/myicon.ico"有效。Firefox 忘记了如何处理 www.mysite.com 是 mysite.com 的网站。它曾经有效，现在不再有效。您还可以看到，如果您在 www.mysite.com 和 mysite.com 之间切换，链接将从“已访问”样式更改为“未访问”样式。FF 在这个上被打破了，现在已经有几个版本了，虽然曾经成功过。
回答by themihai
For security reasons favicons are not used in the address bar anymore starting with firefox 15, but are still used in tabs and bookmarks etc
出于安全原因，从 firefox 15 开始，地址栏中不再使用网站图标，但仍用于选项卡和书签等
See http://www.ghacks.net/2012/04/25/mozilla-to-remove-favicons-from-firefox-url-bar/
见http://www.ghacks.net/2012/04/25/mozilla-to-remove-favicons-from-firefox-url-bar/
回答by Lucas Jones
This sounds like a configuration issue on your end which we can't solve without more information. Have you tried using an absolute URL instead of a relative one?
这听起来像是您那边的配置问题，如果没有更多信息，我们将无法解决。您是否尝试过使用绝对 URL 而不是相对 URL？
Example:
例子：
<link rel="shortcut icon" href="http://mydomain.com/images/favicon.ico" />
回答by LWurm
This is a result of how Firefox currently handles the caching of the favicon file. To solve you have a few options:
这是 Firefox 当前处理网站图标文件缓存方式的结果。要解决您有几个选择：
Add GET parameters
添加GET参数
You can add an arbitrary GET parameter and value to the end of your favicon URI
您可以在网站图标 URI 的末尾添加任意 GET 参数和值
(Tip:This trick can be used for any other css/js files when you want to make sure the user's browser is not serving a locally cached version.)
（提示：当您想确保用户的浏览器不提供本地缓存版本时，此技巧可用于任何其他 css/js 文件。）
<link rel="shortcut icon" href="/images/favicon.ico?updated=20150818" />
Rename the file
重命名文件
Rename your favicon file and reference the renamed file in your href attribute.
重命名您的图标文件并在您的 href 属性中引用重命名的文件。
<link rel="shortcut icon" href="/images/favicon_version_2.ico" />
Hard Refresh
硬刷新
A hard refresh may work on some browsers if you are only concerned with updating your local machines favicon. Usually Ctrl+Shift+Ror Ctrl+F5for Windows/*NIX and Command+Ror Command+Shift+Ron Mac will do the trick.
如果您只关心更新本地计算机图标，硬刷新可能适用于某些浏览器。通常Ctrl+Shift+R或Ctrl+F5（用于 Windows/*NIX）和Command+R或Command+Shift+R在 Mac 上可以解决问题。
Explanation:The end result is you need to force the browser to pull a fresh copy of the file instead of using a locally cached file. Adding a ?somevariable=uniquevalueto the end of the file URI tricks your browser into thinking it's dealing with a new file, and new files by nature can't already be cached. The same effect is created when you rename a file.
说明：最终结果是您需要强制浏览器拉取文件的新副本，而不是使用本地缓存的文件。将?somevariable=uniquevalue添加到文件 URI 的末尾会诱使您的浏览器认为它正在处理一个新文件，而新文件本质上还不能被缓存。重命名文件时会产生相同的效果。
Extra nerdy technical notes:Using a timestamp, or unique file version number for the GET parameter value is best because it will encourage variable uniqueness. It's possible if the user has already loaded that URI with the exact same GET parameter and value (?updated=20150818in my example), the browser will not pull a fresh copy, because it may understand it's still dealing with the same file.
额外的技术说明：最好为 GET 参数值使用时间戳或唯一的文件版本号，因为它会鼓励变量的唯一性。如果用户已经使用完全相同的 GET 参数和值（在我的示例中为?updated=20150818）加载了该 URI ，则浏览器可能不会提取新副本，因为它可能理解它仍在处理相同的文件。
The option to cache files based on the GET parameters in a URI is browser specific as the rules are somewhat left up to the browser vendor's to discern between how they handle that particular caching instance (see RFC at http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html#sec13.9). So, just keep in mind it's possible in some browsers if you are using a date as a value, you may want to include the time as well if you are changing your file multiple times throughout the day.
根据 URI 中的 GET 参数缓存文件的选项是特定于浏览器的，因为规则在某种程度上取决于浏览器供应商来区分他们如何处理该特定缓存实例（请参阅http://www.w3.org 上的RFC /Protocols/rfc2616/rfc2616-sec13.html#sec13.9）。因此，请记住，如果您使用日期作为值，在某些浏览器中是可能的，如果您在一天中多次更改文件，您可能还想包括时间。
回答by M. Utku ALTINKAYA
you can try to put the icon to the root.
您可以尝试将图标放在根目录中。
回答by Armel Larcier
This problem is annoying... I usually just add a 16x16 PNG favicon to solve this. Firefox's way to deal with favicons seems a bit odd and that workaround is, to me, the simplest. Hope this helps.
这个问题很烦人...我通常只是添加一个 16x16 PNG favicon 来解决这个问题。Firefox 处理网站图标的方式似乎有点奇怪，对我来说，这种解决方法是最简单的。希望这可以帮助。
回答by Kamyar
Firefox looks for "favicon.png" rather than "favicon.ico" in root folder of your website. I recommend including both for compatibility with more browsers.
Firefox 在您网站的根文件夹中查找“favicon.png”而不是“favicon.ico”。我建议包括两者以兼容更多浏览器。
回答by russell newton
For me putting two link refs in the header worked.
FF did not display the icon until the second line was added
对我来说，在标题中放置两个链接引用有效。
FF 直到添加第二行才显示图标
<!-- browser icon -->
<link type="image/x-icon" href="/favicon.ico" rel="shortcut icon" >
<link type="image/x-icon" href="/favicon.png" rel="shortcut icon" >
Removing or leaving in the first / made no difference to how FF handled the icon. The console reported
移除或离开第一个 / 对 FF 处理图标的方式没有影响。控制台报告
[Exception... "Favicon at "https://<myhost>/favicon.ico" failed to load:
Forbidden." nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
resource:///modules/FaviconLoader.jsm :: onStopRequest :: line 227" data: no]
But it loaded the .png file anyway, without complaining in the browser window.
但它无论如何都加载了 .png 文件，而没有在浏览器窗口中抱怨。
回答by David Koelle
Perhaps the first slash in
也许第一个斜线
href="/images/favicon.ico"造成问题吗？
