HTML 图标不会显示在谷歌浏览器上

Question

提问by Nick

I am making a HTML page that is unpublished . One of the things I wanted to do was add a favicon to appear next to the title. I'm using google chrome and I noticed that other websites have favicons that appear next to the tile in the browser, but the one I'm trying to display won't show up. The site in in a folder on my desktop named site. This is the code:

我正在制作一个未发布的 HTML 页面。我想做的一件事是在标题旁边添加一个图标。我正在使用谷歌浏览器，我注意到其他网站的网站图标出现在浏览器中的磁贴旁边，但我试图显示的那个不会出现。该站点位于我桌面上名为站点的文件夹中。这是代码：

<!DOCTYPE html>
<html> 
    <head>
        <title></title>
        <link rel="shortcut icon" href="/favicon.ico" />
    </head>
    <body>
    </body>
</html>

Answer 1

采纳答案by Christofer Eliasson

Since you have a leading /in your href, you are referencing a file that will be in the root-folder. In case you have your page in a folder on your computer, not serving it from a local webserver, the leading /will tell the browser to look in the root folder of your filesystem. So the browser expect the file to be at C:/favicon.icoor similar, which is probably not what you've expected.

由于您/的 href 中有一个前导，因此您正在引用一个将位于根文件夹中的文件。如果您将页面放在计算机上的文件夹中，而不是从本地网络服务器提供它，则领导/将告诉浏览器查看文件系统的根文件夹。因此，浏览器希望文件为C:/favicon.ico或相似，这可能不是您所期望的。

If you have the favicon.icoin the same folder as the web page, you could just remove the leading slash, and the icon should be visible.

如果您favicon.ico与网页在同一文件夹中，则可以删除前导斜杠，并且图标应该可见。

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

Update:

更新：

As a debug option, your could try to add a tag that you know works. I borrowed this snippet from the StackOverflow source. Try replacing your link tag with this and see if you get the SO logo as your favicon.

作为调试选项，您可以尝试添加一个您知道有效的标签。我从 StackOverflow 源中借用了这个片段。尝试用这个替换您的链接标签，看看您是否将 SO 徽标作为您的收藏夹图标。

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

Update 2:

更新 2：

It appears that there is a bug reportedon Chromium where the favicon isn't displayed if the file is loaded locally, without being served through a webserver.

似乎在 Chromium 上报告了一个错误，如果文件在本地加载，而不是通过网络服务器提供，则不会显示网站图标。

Answer 2

回答by Rich

I've found that (at Chrome 56, OSX) the favicon state appears to be cached for the browser lifetime, so if a favicon isn't being loaded, it won't be until after restarting Chrome. It appears that it doesn't show up in the "application" tab in dev tools and isn't cleared by a hard reload or 'Clear site data'.

我发现（在 Chrome 56，OSX 中）图标状态似乎在浏览器生命周期内被缓存，因此如果未加载图标，则直到重新启动 Chrome 后才会加载。它似乎没有出现在开发工具的“应用程序”选项卡中，也没有被硬重新加载或“清除站点数据”清除。

Answer 3

回答by pokeybit

A common issue where the favicon will not show up when expected is cache, if your .htaccess for example reads: ExpiresByType image/x-icon "access plus 1 month"

如果您的 .htaccess 例如读取： ExpiresByType image/x-icon "access plus 1 month"

Then simply add a random value to your favicon reference: <link rel="shortcut icon" href="https://example.com/favicon.ico?r=31241" type="image/x-icon" />

然后简单地向您的网站图标参考添加一个随机值： <link rel="shortcut icon" href="https://example.com/favicon.ico?r=31241" type="image/x-icon" />

Works every time for me even with heavy caching.

即使有大量缓存，每次都对我有用。

Answer 4

回答by Der Hochstapler

Another reason for Chrome not displaying the favicon is that it still remembers a time when the site in question did not have a favicon or the favicon was incorrectly configured.

Chrome 不显示收藏夹图标的另一个原因是它仍然记得有问题的网站没有收藏夹图标或收藏夹图标配置不正确的时间。

You're going to want to completely wipe the favicon cache:

您将要完全擦除网站图标缓存：

Exit all running Chrome processes.

Delete the Faviconsfile in your user data folder. For example:

C:\Users\me\AppData\Local\Google\Chrome\User Data\Default\Favicons

退出所有正在运行的 Chrome 进程。

删除Favicons用户数据文件夹中的文件。例如：

C:\Users\me\AppData\Local\Google\Chrome\User Data\Default\Favicons

This can not be resolved by clearing the browser cache, as it does not affect the Faviconscontainer.

这无法通过清除浏览器缓存来解决，因为它不会影响Favicons容器。

Also note that, contrary to what you might read online, requests to favicon resources are notshown in the Network panel of the DevTools. Under very rare circumstances, one such request mayshow up there, but it is highly unlikely and the DevTools will not help you solve your favicon woes.

另请注意，与您可能在线阅读的内容相反，对网站图标资源的请求不会显示在 DevTools 的网络面板中。在极少数情况下，一个这样的请求可能会出现在那里，但这是极不可能的，而且 DevTools 不会帮助您解决您的网站图标问题。

Answer 5

回答by DominikAngerer

1) Clear your chache. http://support.google.com/chrome/bin/answer.py?hl=en&answer=95582And test another browser, lets say safari. How did you import the favicon?

1) 清除您的钱包。http://support.google.com/chrome/bin/answer.py?hl=en&answer=95582并测试另一个浏览器，比如说 safari。你是如何导入网站图标的？

2) How you should add it:

2）你应该如何添加它：

Normal favicon:

普通图标：

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

PNG/GIF favicon:

PNG/GIF 图标：

<link rel="icon" type="image/gif" href="favicon.gif" />
<link rel="icon" type="image/png" href="favicon.png" />

3) Another thing could be the problem that chrome can't displayfavicons, if it's local(not uploaded to a webserver).

3）另一件事可能是chrome无法显示图标的问题，如果它是本地的（未上传到网络服务器）。

4) Try to rename it from favicon.{whatever}to {yourfaviconname}.{whatever}but I would suggest you to still have the normal favicon. This has solved my issue on IE.

4) 尝试将其重命名为favicon.{whatever}to{yourfaviconname}.{whatever}但我建议您仍然使用正常的 favicon。这已经解决了我在 IE 上的问题。

5) Found another solution for this which works great! I simply added my favicon as Base64 Encoded Image directly inside the tag like this:

5）为此找到了另一个解决方案，效果很好！我只是将我的图标作为 Base64 编码图像直接添加到标签中，如下所示：

<link href="data:image/x-icon;base64,AAABAAIAEBAAAAEAIABoBAAAJgAAACAgAAABACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AIaDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8A////AP///wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wCGg4L/hoOC/4aDgv+Gg4L/hoOC/4aDgv////8AhoOC/////wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wD///8A////AIaDgv////8A////AP///wD///8A////AP///wCGg4L/////AHCMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/////wCGg4L/////AP///wD///8A////AP///wD///8AhoOC/////wBTlsIAU5bCAFOWwgBTlsIAU5bCM1OWwnP///8AhoOC/////wD///8A////AP///wD///8A////AP///wD///8AU5bCBlOWwndTlsLHU5bC+FOWwv1TlsLR////AP///wD///8A////AP///wD///8A////AP///wD///8A////AFOWwvtTlsLuU5bCu1OWwlc2k9cANpPXqjaT19H///8A////AP///wD///8A////AP///wD///8A////AP///wBTlsIGNpPXADaT1wA2k9dINpPX8TaT1+40ktpDH4r2tB+K9hL///8A////AP///wD///8A////AP///wD///8A////ADaT1wY2k9e7NpPX/TaT16AfivYGH4r23R+K9u4tg/WQLoL1mP///wD///8A////AP///wD///8A////AP///wA2k9fuNpPX5zaT1zMfivYGH4r23R+K9uwjiPYXLoL1+S6C9W7///8A////AP///wD///8A////AP///wD///8ANpPXLjaT1wAfivYGH4r22x+K9usfivYSLoL1oC6C9esugvUA////AP///wD///8A////AP///wD///8A////AP///wD///8AH4r2zx+K9usfivYSLoL1DC6C9fwugvVXLoL1AP///wD///8A////AP///wD///8A////AP///wD///8A////AB+K9kgfivYMH4r2AC6C9bEugvXhLoL1AC6C9QD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAugvXyLoL1SC6C9QAugvUA////AP//AADgBwAA7/cAAOgXAADv9wAA6BcAAO+XAAD4HwAA+E8AAPsDAAD8AQAA/AEAAP0DAAD/AwAA/ycAAP/nAAAoAAAAIAAAAEAAAAABACAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/////wD///8AhISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP8AAAAA////AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/////AP///wCEhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/4SEhP+EhIT/hISE/wAAAAD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP/4+vsA4ujuAOLo7gDi6O4A4ujuAN3k6wDZ4OgA2eDoANng6ADZ4OgA2eDoANng6ADW3uYAJS84APj6+wCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/9Xd5QBwjKgAcIyoRnCMqGRwjKhxcIyogHCMqI9wjKidcIyoq3CMqLlwjKjHcIyo1HCMqLhogpwA/f7+AISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AISEhP+EhIT/xtHcAHCMqABwjKjAcIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo/3CMqP9wjKj/cIyo4EdZawD///8AhISE/4SEhP////8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AhISE/4SEhP+2xNMAcIyoAHCMqJhwjKjPcIyowHCMqLFwjKijcoymlXSMpIh0jKR6co2mbG+OqGFqj61zXZO4AeXv9gCEhIT/hISE/////wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wCEhIT/hISE/6i5ygDF0dwAIiozACQyPQAoP1AALlBmADhlggBblLkGVJbBPFOWwnxTlsK5U5bC9FOWwv9TlsIp3erzAISEhP+EhIT/////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAALztHAAAAAAAuU2sAU5bCClOWwkNTlsKAU5bCwFOWwvhTlsL/U5bC/1OWwv9TlsL/U5bC/ViVvVcXOFAAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAALDhEALVFoAFOWwjpTlsL6U5bC/1OWwv9TlsL/U5bC/1OWwvxTlsLIV5W+i2CRs0xHi71TKYzUnyuM0gIJHi4AAAAAAAAAAAAAAAAA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAACtNZABTlsIAU5bCD1OWwv1TlsL6U5bCxFOWwoRVlsBHZJKwDCNObAA8icJAKYzUwimM1P8pjNT/KYzUWCaCxgALLUsAAAAAAAAAAAD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAApS2EAU5bCAFOWwgBTlsIAU5bCNVOWwgg+cJEAIT1QABU/XQA1isg4KYzUuymM1P8pjNT/KYzU/ymM1LAti9E0JYvmDhdouAAAAAAAAAAAAP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AFyk1AE+PuQBTlsIAU5bCAER7nwAmRVoADBojABRFaQAwi80xKYzUsymM1P8pjNT/KYzU/ymM1LgsjNE2MovXFB+K9MUfivbBH4r2BgcdNAARQH8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAQIDABIgKgAPGiIABRMcABdQeQAti9AqKYzUrCmM1P8pjNT/KYzU/ymM1MAqjNM9HmqmACWK7SIfivbZH4r2/x+K9vsuiudAFE2YACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAABhQfABtejgAoitEAKYzUACmM1JQpjNT/KYzU/ymM1MgpjNREH2mgABlosQAfivY0H4r26R+K9v8fivbyKIrtR0CB1SggevTQIHr0Nv///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAACBwsAJX2+ACmM1AApjNQAKYzUGSmM1MYpjNRMInWxABNHdQAcfuEAH4r2Sx+K9vUfivb/H4r25iGK9DE2gt4EIHr0yyB69P8gevTQ////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAOMUsAKYzUACmM1AApjNQAJX6/ABE7WgAUWJwAH4r2AB+K9mYfivb9H4r2/x+K9tYfivYfG27RACB69HsgevT/IHr0+yB69DL///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAfaJ4AJ4XKABVGagAKKkoAG3raAB+K9gEfivaEH4r2/x+K9v8fivbCH4r2EB133wAgevQsIHr0+SB69P8gevSAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAUSGwAFERwAElCOAB+J9QAfivYAH4r2lx+K9v8fivb/H4r2qR+K9gYefuoAIHr0BSB69M4gevT/IHr00CB69AUgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAkqSgAfivYAH4r2AB+K9gAfivZLH4r2/R+K9osfivYBH4PwACB69AAgevSAIHr0/yB69PkgevQwIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAAAAAAAEEiAAB+K9gAfivYAH4r2AB+K9gAfivYsH4r2AB+G8wAge/QAIHr0MCB69PsgevT/IHr0eyB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAXZrYAH4r2AB+K9gAfivYAH4r2AB+K9gAfifUAIHz0ACB69AcgevTQIHr0/yB69MwgevQEIHr0ACB69AAgevQA////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wAAAAAAAAAAAAAAAAAAAAAAAAIDAB6E6gAfivYAH4r2AB+K9gAfivYAH4r2ACB+9QAgevQAIHr0fCB69P8gevT5IHr0LCB69AAgevQAIHr0ACB69AD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AAAAAAAAAAAAAAAAAAAAAAABBAcAEUqDAB6E6wAfivYAH4r2AB+K9gAggPUAIHr0ACB69AAgevQTIHr0qCB69HYgevQAIHr0ACB69AAgevQAIHr0AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP///wD///8A////AP////////////////wAAH/8AAB//P/+f/z//n/8wAZ//MAGf/z//n/8wAZ//MAGf/zAAn/8/gJ//+AD///AAf//wEH//+cA///8AH//8BB///BgH//xwB///4If//4EP//+CD///hh///9w////4P///+H////j////////////" rel="icon" type="image/x-icon" />

Used this page here for this: http://www.motobit.com/util/base64-decoder-encoder.asp

为此使用此页面：http: //www.motobit.com/util/base64-decoder-encoder.asp

Answer 6

回答by Asaf

For me the problem was that there was a div above it (which of course shouldn't have been in the head, but it happens). Firefox didn't mind, but Chrome did.

对我来说，问题是它上面有一个 div（这当然不应该在头上，但它发生了）。Firefox 不介意，但 Chrome 介意。

Answer 7

回答by Blake

It doesn't look like Chrome allows you to display the favicon in the address bar...

Chrome 似乎不允许您在地址栏中显示网站图标...

http://en.wikipedia.org/wiki/Favicon#Use_of_favicon

I've also seen it done like this. Don't know if it would make a difference or not.

我也见过这样做的。不知道会不会有影响。

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

Answer 8

回答by Hima

This trick works: add this script in header or masterPage for Example

这个技巧有效：在 header 或 masterPage 中添加这个脚本，例如

    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = '/favicon.png';

and will be cached. It's not optimal, but it works.

并将被缓存。这不是最佳的，但它有效。

Answer 9

回答by macm

The path must be via the URI (full).

路径必须通过 URI（完整）。

Like: http://example.com/favicon.png

喜欢：http: //example.com/favicon.png

so in your case:

所以在你的情况下：

<!DOCTYPE html>
<html> 
    <head profile="http://www.w3.org/2005/10/profile">
        <title></title>
        <link rel="shortcut icon" 
              type="image/png" 
              href=" http://example.com/favicon.png" />
    </head>
    <body>
    </body>
</html>

Ref: http://www.w3.org/2005/10/howto-favicon

参考：http: //www.w3.org/2005/10/howto-favicon

Answer 10

回答by Amjith

I moved ico file to root folder and link it. It worked for me. Also, in chrome, I have to wait 30 mins to get cache cleared and new changes to take affect.

我将 ico 文件移动到根文件夹并链接它。它对我有用。此外，在 chrome 中，我必须等待 30 分钟才能清除缓存并使新更改生效。

HTML 图标不会显示在谷歌浏览器上

提问by Nick

采纳答案by Christofer Eliasson

回答by Rich

回答by pokeybit

回答by Der Hochstapler

回答by DominikAngerer

回答by Asaf

回答by Blake

回答by Hima

回答by macm

回答by Amjith

相关推荐

最近更新

标签

HTML 图标不会显示在谷歌浏览器上

提问by Nick

采纳答案by Christofer Eliasson

回答by Rich

回答by pokeybit

回答by Der Hochstapler

回答by DominikAngerer

回答by Asaf

回答by Blake

回答by Hima

回答by macm

回答by Amjith

相关推荐

没有空格的 HTML 表格

HTML/CSS：使 div 对点击“不可见”？

使用应运行的脚本插入 HTML

Html 如何仅用 css 制作网格（如方格纸网格）？

相关推荐

最近更新

标签