66

我正在制作一个 HTML 页面，我想要的一件事是在标题旁边出现一个图标。

我正在使用谷歌浏览器，我看到网站图标在其他网站上工作，但我网站上的网站图标不会显示。该站点位于我桌面上名为站点的文件夹中。

该favicon.ico文件为 16x16，我使用在线生成器制作。

这是代码：

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

16 回答 16

42

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

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

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

更新：

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

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

更新 2：

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

于 2012-12-08T18:23:53.040 回答
29

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

于 2017-04-02T21:43:52.517 回答
20

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

然后只需将随机值添加到您的 favicon 参考： <link rel="shortcut icon" href="https://example.com/favicon.ico?r=31241" type="image/x-icon" />

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

于 2015-04-21T05:40:38.100 回答
11

Chrome 不显示 favicon 的另一个原因是它仍然记得相关站点没有 favicon 或 favicon 配置不正确的时间。

您将要完全擦除 favicon 缓存：

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

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

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

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

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

于 2016-08-16T09:50:14.570 回答
4

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

2）你应该如何添加它：

正常的网站图标：

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

PNG/GIF 图标：

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

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

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

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" />

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

于 2015-04-11T18:59:14.173 回答
2

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

于 2018-07-02T12:09:37.023 回答
1

看起来 Chrome 不允许您在地址栏中显示网站图标...

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

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

<link rel="icon" href="/favicon.ico" />
于 2012-12-08T18:42:19.370 回答
1

这只是 Chrome 和 Chrome 中的错误。要触发错误：

  1. 在您的 HTML<head>块中设置：<link rel="shortcut icon" type="image/ico" href="favicon.ico">
  2. 使用一个 favicon.ico 图像加载页面，然后用另一个图像替换 favicon.ico 文件。即使您使用Classic Cache Killer或使用隐身模式（安全漏洞，有人吗？），您将无法显示新的。您可以使用其他浏览器进行确认。

解决错误： 按 强制重新加载shift + F5。

这是 Chrome 中的一个非常大的错误，已经报告给他们的开发人员，他们建议使用这种方法来解决他们的错误。（来源： 谷歌支持。）

于 2021-08-16T13:49:28.573 回答
0

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

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

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

于 2014-09-25T08:29:09.377 回答
0

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

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

所以在你的情况下：

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

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

于 2015-04-09T12:25:29.853 回答
0

请注意，如果您打开的标签太多以至于 Google Chrome 只显示网站图标，那么 Google Chrome 将不会显示所选标签的网站图标，因此如果您在加载页面的情况下继续重新加载标签以查看新的网站图标，您将只看到页面标题的文本。

您需要重新加载页面，然后选择不同的选项卡才能看到您的网站图标。

在此处输入图像描述

于 2018-05-25T08:07:31.143 回答
0

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

于 2019-02-13T13:13:39.303 回答
0

这些是浏览器在 Linux 中存储临时数据的位置：

注意：您可以使用 Ctrl + H 在文件管理器中查看隐藏文件

对于终端使用命令 ls -la

铬

~/.cache/chromium/[profile]/Cache/

谷歌浏览器

~/.cache/google-chrome/[profile]/Cache/

此外，Chromium 和 Google Chrome 将一些额外的缓存存储在

~/.config/chromium/[profile]/Application Cache/Cache/

和

~/.config/google-chrome/[profile]/Application Cache/Cache/

通常在这里：

/tmp/

所以应用新的 FAVICON 或尝试显示它就是清理它们

确保你在这些目录中，使用命令：

rm -rf *
于 2019-11-07T09:39:33.433 回答
0

还有另一种似乎没有人提到的可能性：您可能导出了.ico带有 Chrome 不支持的设置的文件。

另一种可能性是您.ico缺少 16 像素的图像，因此即使您有其他分辨率，也可能什么也不显示。

我建议在您的.ico导出器上尝试不同的设置，或者完全尝试另一种设置。

于 2022-01-31T23:34:29.860 回答
-2

这个问题快把我逼疯了！解决方案实际上很简单，只需在标题标签中添加以下内容：

<link rel="profile" href="http://gmpg.org/xfn/11">

例如：

<!DOCTYPE html>
<html> 
    <head>
        <title></title>
        <link rel="profile" href="http://gmpg.org/xfn/11">
        <link rel="icon" href="/favicon.ico" />
于 2017-08-21T14:28:49.717 回答
-4

您的 html 对于初学者来说是完全错误的，您的头部不应该有 div，也不应该在您的身体部分之后。我建议您在开始使用网站图标等之前先查看正确的 html。

于 2012-12-08T18:24:02.280 回答