如何防止 favicon.ico 请求？

Posted 2023-02-22

【中文标题】如何防止 favicon.ico 请求？

【英文标题】：How to prevent favicon.ico requests?

【发布时间】：2010-11-22 06:06:26

【问题描述】：

我没有 favicon.ico，但我的浏览器总是向它发出请求。

是否可以阻止浏览器从我的站点发出对网站图标的请求？也许 html 标头中有一些 META-TAG？

【问题讨论】：

+1 好问题，但似乎最简单的解决方案就是添加一个有效的网站图标 :-) 这肯定是一分钟的工作，您的网站看起来更专业吗？

你也可以有一个空的 favicon.ico 文件。这将停止请求（在第一个请求之后），但不会导致浏览器呈现一个空白的图标，它通常会呈现其默认图标。

我不得不说我完全同意提问者的暗示：出于什么目的将extra设置为mandatory？此外，为什么我们不能简单地在响应中添加一些元数据，说“表现得就像你请求了 favicon.ico 并得到了 404，只是不实际提出请求并且进一步不再次询问，直到此页面更改”。

这太痛苦了。我有一个 web 服务，它只提供 JSON，甚至不具备提供文件而不进行一些更改的基本功能（首先，every 方法需要一个身份验证令牌以避免 401/403）。我记录失败的请求，以便以后分析它们 - 日志中不断充斥着对网站图标的请求。

现在是 2015 年。有什么消息吗？

【参考方案1】：

你不能。您所能做的就是使该图像尽可能小，并在将来设置一些缓存失效标头（Expires，Cache-Control）。这是关于 favicon.ico 请求的what Yahoo! has to say。

【讨论】：

他说他没有网站图标。他们不会比这小很多。而且缓存不存在的文件也没有任何意义。

如果他没有网站图标，那么他应该制作一个，这就是我的观点。没有比这更好的解决方案了。这不是合乎逻辑的吗？如果无法停止请求，除非你使用缓存，你会怎么做？

你把它关掉。如果您不想要网站图标，并且您也不希望错误日志中出现错误请求，那么您应该将其关闭。为什么这么难理解？

@BT 服务器还是浏览器？ :D

他们俩。

【参考方案2】：

我相信我见过这个（虽然我没有测试或亲自使用过）：

<link rel="shortcut icon" href="#" />

有人有类似经历吗？

编辑：

我刚刚测试了上面的 sn-p 并在强制完全刷新时，在 Fiddler 中没有看到任何网站图标请求。我针对 IE8（作为 IE7 标准的兼容模式）和 FF 3.6 进行了测试。

【讨论】：

我在 Safari 中尝试过。 favicon 请求再次到达托管页面。

我不建议这样做，因为它会使浏览器（Safari5/Mac，也可能是其他浏览器）向服务器请求网页两次。

@Manav 在 Safari6/Mac 中不再是这种情况。

轰这个！谢谢 :D 现在我不会看到那个烦人的错误，直到我终于开始制作那个图标，呵呵。

改用about:blank

【参考方案3】：

您可以使用 .htaccess 或服务器指令拒绝访问 favicon.ico，但服务器会向浏览器发送拒绝访问回复，这仍然会减慢页面访问速度。

当用户返回您的网站时，您可以阻止浏览器请求 favicon.ico，方法是让其保留在浏览器缓存中。

首先，提供一个小的 favicon.ico 图片，可以是空白的，但要尽可能小。我做了一个200字节以下的黑白的。然后，使用 .htaccess 或 server 指令，将文件 Expires 标头设置为未来一两个月。当同一用户返回您的站点时，它将从浏览器缓存中加载，并且不会向您的站点发送任何请求。服务器日志中也不再出现 404。

如果您可以控制完整的 Apache 服务器或虚拟服务器，您可以这样做：-

如果服务器文档根目录是 /var/www/html 则将其添加到 /etc/httpd/conf/httpd.conf:-

Alias /favicon.ico "/var/www/html/favicon.ico"
<Directory "/var/www/html">
    <Files favicon.ico>
       ExpiresActive On
       ExpiresDefault "access plus 1 month"
    </Files>
</Directory>

然后，一个单一的 favicon.ico 将适用于所有虚拟托管站点，因为您正在为其设置别名。用户访问后一个月从浏览器缓存中提取。

对于 .htaccess，据报道这是有效的（我没有检查过）：-

AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 month"

【讨论】：

别忘了启用模块：~ /etc/apache2 # a2enmod expires && service apache2 restart

【参考方案4】：

你可以使用

<link rel="shortcut icon" href="http://localhost/" />

这样它实际上不会从服务器请求。

【讨论】：

这似乎可能会导致某些浏览器抛出可怕的错误消息 - 您还必须注意在可能通过 HTTPS 提供的页面上使用该技巧。

使用 about:blank 更好。

【参考方案5】：

我首先要说的是，在网页中有一个网站图标是一件好事（通常）。

然而，这并不总是需要的，有时开发人员需要一种方法来避免额外的有效负载。例如，一个 IFRAME 会请求一个网站图标而不显示它。 最糟糕的是，在 Chrome 和 android 中，IFRAME 会生成 3 个网站图标请求：

"GET /favicon.ico HTTP/1.1" 404 183
"GET /apple-touch-icon-precomposed.png HTTP/1.1" 404 197
"GET /apple-touch-icon.png HTTP/1.1" 404 189

以下使用数据 URI，可用于避免虚假的 favicon 请求：

<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon"> 

参考见这里：

https://github.com/h5bp/html5-boilerplate/issues/1103 https://twitter.com/diegoperini/status/4882543836930048

更新 1：

从 cmets (jpic) 看来，Firefox >= 25 不再喜欢上面的语法了。我在 Firefox 27 上进行了测试，但它仍然可以在 Webkit/Chrome 上运行。

所以这是一个应该涵盖所有最新浏览器的新版本。我测试了 Safari、Chrome 和 Firefox：

<link rel="icon" href="data:;base64,=">

我从“rel”属性值中省略了“快捷方式”名称，因为这仅适用于较旧的 IE，并且 IE

更新 2：

如果您需要您的文档针对 HTML5 进行验证，请改用这个：

<link rel="icon" href="data:;base64,iVBORw0KGgo=">

【讨论】：

您的更新 2 在 Lollipop 上有问题...添加 <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> 似乎可以解决问题。

如果我做对了，我可以在浏览器中打开data:image/png;base64,iVBORw0KGgo=，另存为favicon.ico。 空 PNG 文件 并将其存储在网站根目录中。对吗？

@Alko 那个空的 PNG 文件仍然无效。如果这只是创建一个描述空文件的数据 URL，请使用：

浏览器倾向于请求网站图标，即使 index.html 文件中没有对它的引用，那么该解决方案如何防止这种情况发生？具体来说，我看到 Firefox 在您访问域时非常积极地请求它。其他浏览器可能会在稍后执行，可能在索引文件加载标头之后（有更多浏览器内部知识的人请评论）。没有网站图标有潜在的副作用，只需 google 一下，或者：***.com/questions/4269695/…

我正在使用它，但必须加强我的 Web 应用程序的安全性。现在，我得到了这个：“拒绝加载图像 'data:;base64,=' 因为它违反了以下内容安全策略指令：“default-src 'self' https:'unsafe-eval' 'unsafe-inline'” . 请注意，'img-src' 没有明确设置，因此 'default-src' 用作后备。” - 所以这个解决方案（虽然很好）只适用于更宽松的安全场景。

【参考方案6】：

一个非常简单的解决方案是将以下代码放入您的.htaccess。我遇到了同样的问题，它解决了我的问题。

<IfModule mod_alias.c>
    RedirectMatch 403 favicon.ico
</IfModule>

参考：http://perishablepress.com/block-favicon-url-404-requests/

【讨论】：

从这里链接到的文章非常好，但我认为响应中的语法不正确。

【参考方案7】：

根据我们的经验，当 Apache 因 favicon.ico 的请求而崩溃时，我们在 .htaccess 文件中注释掉了额外的标头。

例如我们有 标头集 X-XSS-Protection "1; mode=block"

...但我们忘记事先 sudo a2enmod 标头。注释掉发送的额外标题解决了我们的 favicon.ico 问题。

我们还为开发设置了几个虚拟主机，但在使用 http://localhost 并获取 /favicon.ico 时仅出现 500 Internal Server Error 失败。如果您运行“curl -v http://localhost/favicon.ico”并收到有关主机名不在解析器缓存中或类似情况的警告，您可能会遇到问题。

可能很简单，比如不获取（我们尝试过但没有成功，因为我们的根本原因不同）或者在 apache2.conf 或 .htaccess 中寻找可能导致奇怪的 500 Internal Server Error 的指令消息。

我们发现它失败得太快了，Apache 的错误日志中没有任何用处，于是花了一整个上午的时间在这里和那里更改一些小东西，直到我们解决了在忘记加载 mod_headers 时设置额外标题的问题！

【参考方案8】：

只需将以下行添加到 HTML 文件的 <head> 部分：

<link rel="icon" href="data:,">

此解决方案的特点：

100% 有效的 HTML5 很短 在 IE 8 及更早版本中不会出现任何问题 不会让浏览器将当前 HTML 代码解释为网站图标（href="#" 就是这种情况）

【讨论】：

如果您只是想在本地项目上关闭 chrome devtools，这是迄今为止最简单、最干净的方法。

请对此进行扩展。我是否只需将其包含在我的 HTML 文件中即可停止网站图标请求？

@AakashVerma 是的，仅此而已。不需要其他任何东西。 （除非您的网站需要支持 Internet Explorer 8 或更早版本。）我相应地改进了我的答案。

@asynts reserves space 是什么意思？

@leojh Safari 上到底发生了什么？您是否找到了应该添加到我的答案中的简单解决方案？

【参考方案9】：

如果你使用 nginx

# skip favicon.ico
#
location = /favicon.ico 
    access_log off;
    return 204;

【讨论】：

这不会阻止请求，但我喜欢它作为替代方案。

当然，如果你可以控制网络服务器。

【参考方案10】：

有时，当 HTML 有一些注释代码并且浏览器正在尝试查找某些内容时，会出现此错误。就像在我的情况下，我在烧瓶中评论了 Web 表单的代码，我得到了这个。

花了 2 个小时后，我通过以下方式修复了它：

1) 我创建了一个新的 python 环境，然后它在注释的 HTML 行上抛出了一个错误，在此之前我只被抛出了错误 'GET /favicon.ico HTTP/1.1" 404'

2) 有时，当我有重复的代码，比如存在同名的 python 文件时，我也看到了这个错误，也尝试删除这些错误

【参考方案11】：

在 Node.js 中，

res.writeHead(200, 'Content-Type': 'text/plain', 'Link': 'rel="shortcut icon" href="#"' );

【讨论】：

你能详细说明一下吗？节点在哪里？

【参考方案12】：

为了测试目的而暂时阻止这些的最简单方法是在 chrome 中打开检查页面，方法是右键单击页面上的任意位置并单击检查或按 Ctrl+Shift+j，然后转到网络选项卡，然后重新加载页面将发送您的页面应该发出的所有请求，包括烦人的 favicon.ico。您现在只需右键单击 favicon.ico 请求，然后单击“阻止请求 URL”。

以上所有答案均适用于控制应用源代码的开发人员。如果您是系统管理员，正在计算负载平衡器或代理配置，并且对 favicon.ico 的恶作剧感到恼火，那么这个简单的技巧会做得更好。这个答案适用于 Chrome，但我认为应该有一个类似的替代方案，你会为 Firefox/Opera/Tor/任何其他浏览器找到它:)

【参考方案13】：

我个人在我的 HTML 头标签中使用了这个：

<link rel="shortcut icon" href="#" />

【参考方案14】：

把它放到你的 HTML 头中：

<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4//8/AAX+Av7czFnnAAAAAElFTkSuQmCC">

这比其他答案大一点，但确实包含一个实际有效的 PNG 图像（1x1 像素白色）。

【讨论】：

Alsodata:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=

【参考方案15】：

详细说明以前的答案，这可能是 HTML 文件本身的最短解决方案：<link rel="shortcut icon" href="data:" />

在 Chrome 版本 94.0.4606.81 上测试正常，没有错误消息或请求失败

【参考方案16】：

如果您不使用 HTML 并且它是由 Flask 或某些框架自动生成的，您可以随时在应用中添加虚拟路由以仅返回虚拟文本来解决此问题。

或者 . . . 你可以添加图标 :)

例如 Python Flask 应用程序。

@app.route('/favicon.ico')
def favicon():
    return 'dummy', 200

【参考方案17】：

我需要阻止请求并在 Chrome 中显示图标。

在<head>中试用的快速代码：

<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEU0OkArMjhobHEoPUPFEBIu
O0L+AAC2FBZ2JyuNICOfGx7xAwTjCAlCNTvVDA1aLzQ3COjMAAAAVUlEQVQI12NgwAaCDSA0888G
CItjn0szWGBJTVoGSCjWs8TleQCQYV95evdxkFT8Kpe0PLDi5WfKd4LUsN5zS1sKFolt8bwAZrCa
GqNYJAgFDEpQAAAzmxafI4vZWwAAAABJRU5ErkJggg==" />