ChatGPT解决这个技术问题 Extra ChatGPT

如何防止 favicon.ico 请求?

我没有 favicon.ico,但我的浏览器总是会发出请求。

是否可以阻止浏览器从我的网站请求网站图标?也许 HTML 标头中有一些 META-TAG?

+1 好问题,但似乎最简单的解决方案只是添加一个有效的网站图标 :-) 当然这是一个一分钟的工作,您的网站看起来更专业吗?
您也可以有一个空的 favicon.ico 文件。这将停止请求(在第一个请求之后),但不会导致浏览器呈现一个空白的 favicon,它通常会呈现其默认图标是什么。
我不得不说我完全同意提问者暗示的观点:为了什么目的而强制要求额外的东西?此外,为什么我们不能简单地在响应中添加一些元数据,说“表现得就像你请求了 favicon.ico 并得到了 404,只是不实际提出请求并且进一步不再次询问,直到此页面更改”。
这是一种痛苦。我有一个 web 服务,它只提供 JSON,甚至不具备提供文件而不进行一些更改的基本功能(首先,每种方法都需要一个身份验证令牌以避免 401/403)。我记录失败的请求,以便以后分析它们 - 日志中不断充斥着对 favicon 的请求。
现在是 2015 年。有什么消息吗?

S
Sridhar Ratnakumar

我首先要说,在网页中有一个网站图标是一件好事(通常)。

然而,这并不总是需要的,有时开发人员需要一种方法来避免额外的有效负载。例如,一个 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:

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

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

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

我从“rel”属性值中省略了“快捷方式”名称,因为这仅适用于较旧的 IE,并且 IE < 8 的版本也不喜欢 dataURI。未在 IE8 上测试。

更新 2:

如果您需要您的文档针对 HTML5 进行验证,请改用:

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

您的 UPDATE 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 一下,或者:stackoverflow.com/questions/4269695/…
我正在使用它,但不得不加强我的 Web 应用程序的安全性。现在,我得到了这个:“拒绝加载图像 'data:;base64,=' 因为它违反了以下内容安全策略指令:“default-src 'self' https:'unsafe-eval' 'unsafe-inline'” . 请注意,'img-src' 没有明确设置,因此 'default-src' 用作后备。” - 所以这个解决方案(虽然很好)只适用于更宽松的安全场景。
v
vog

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

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

该解决方案的特点:

100% 有效的 HTML5

很短

不会招致 IE 8 及更早版本的任何怪癖

不会让浏览器将当前 HTML 代码解释为 favicon(href="#" 就是这种情况)


如果您只是想在本地项目中关闭 chrome devtools,这是迄今为止最简单、最干净的方法。
请对此展开。我是否只需将其包含在我的 HTML 文件中即可停止网站图标请求?
@AakashVerma 是的,就是这样。不需要其他任何东西。 (除非您的站点需要支持 Internet Explorer 8 或更早版本。)我相应地改进了我的答案。
@asynts reserves space 是什么意思?
@leojh Safari 上到底发生了什么?您是否找到了应该添加到我的答案中的简单解决方案?
v
vog

我相信我已经看到了(虽然我没有测试过或亲自使用过):

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

有人有类似的经历吗?

编辑:

我刚刚测试了上面的代码片段,并且在强制完全刷新时,在 Fiddler 中没有看到任何网站图标请求。我针对 IE8(作为 IE7 标准的兼容模式)和 FF 3.6 进行了测试。


我在 Safari 中尝试过。 favicon 请求再次到达托管页面。
我不建议这样做,因为它使浏览器(Safari5/Mac,也可能是其他浏览器)向服务器请求网页两次。
@Manav Safari6/Mac 不再是这种情况。
繁荣!谢谢 :D 现在我不会看到那个烦人的错误,直到我终于开始制作那个图标,呵呵。
请改用 about:blank
I
Ionuț G. Stan

你不能。您所能做的就是使该图像尽可能小,并在将来设置一些缓存失效标头(ExpiresCache-Control)。以下是关于 favicon.ico 请求的what Yahoo! has to say


他说他没有网站图标。他们不会比这小很多。缓存不存在的文件没有任何意义。
如果他没有网站图标,那么他应该制作一个,这就是我的观点。没有比这更好的解决方案了。这不是合乎逻辑吗?如果无法停止请求,除非您使用缓存,否则您会怎么做?
你把它关掉。如果您不想要网站图标,并且您也不希望错误日志中出现错误请求,那么您应该将其关闭。为什么这么难理解?
@BT 服务器还是浏览器? :D
他们俩。
V
Vincent-cm

如果你使用 nginx

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

这不会阻止请求,但我喜欢它作为替代方案。
当然,如果您可以控制网络服务器。
P
Parth Patel

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

https://i.stack.imgur.com/q7NFl.png

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


s
safrazik

把它放到你的 HTML 头中:

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

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


Also data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=
A
Anon1

您可以使用 .htaccess 或 server 指令拒绝访问 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
M
Marcio Mazzucato

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

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

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


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

在 Node.js 中,

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

你能详细说明吗?节点在哪里?
A
Azrail

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

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

I
Israel Manzi

只需使用以下命令使其简单:

<link rel="shortcut icon" href="#" type="image/x-icon">

什么都不显示!!!!


P
Petruza

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

经过测试,Chrome 版本 94.0.4606.81 上没有错误消息或请求失败


p
pbaranski

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

<head> 中尝试的快速代码:

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

就像这样很酷,它给你的代码增加了不必要的混乱。以色列 Manzi 的例子可能是最好的
@JSON 我是一名测试人员,有时我需要非常快速地制作原型以获得正确的结果。这就是为什么我发布了这个解决方案并且有人已经喜欢这个答案 - 这是 SO 的目的,让人们可以选择,他们可以选择最适合他们的问题的东西。 SO 表示反对,因此感谢您的反馈!
J
J. Declan Young

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

例如,我们将 Header 设置为 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 时设置额外标题的问题!


o
ohsoifelse

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

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

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

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


A
AnandShiva

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

或者 。 . .你可以只添加 favicon :)

例如对于 Python Flask 应用程序。

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

r
rora

我通过使用 Content-Security-Policy HTTP 响应标头解决了这个问题。通过使用它,可以阻止浏览器进行进一步的媒体查询,如图像(其他类型也是可能的)。我在响应中添加了以下标头:

Content-Security-Policy: img-src 'none'

问题是它会阻止所有图像查询。如果您的 HTML 有任何图像,它们将不会被加载。就我而言,这很可能是 Firefox 中的一个错误,因为浏览器正在请求 favicon.ico 以获取内容类型为 text/xml 的响应!

它还取决于在客户端强制执行此功能的浏览器。

查看 https://content-security-policy.com 以获取有关 CSP 的完整指南。

干杯!


j
josh

你可以使用

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

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


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