如何防止favicon.ico请求?

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

是否有可能阻止浏览器从我的网站请求收藏夹图标?也许在超文本标记语言标题中有一些META-TAG?

447189 次浏览

你不能。你所能做的就是使该图像尽可能小,并在将来设置一些缓存无效标头(ExpiresCache-Control)。这是关于favicon.ico请求的雅虎有什么要说的

您可以在<head>元素中使用以下超文本标记语言:

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

我在强制完全刷新上对此进行了测试,在Fiddler中没有看到文件请求。(在作为IE7标准的comat模式下针对IE8和FF 3.6进行了测试)

说明:这可能会下载两次html文件,因此虽然它可以隐藏错误,但它会带来成本。

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

当用户返回您的站点时,您可以停止请求favicon.ico的浏览器,方法是让它留在浏览器缓存中。

首先,提供一个小的favicon.ico图像,可以是空白的,但尽可能小。我做了一个200字节以下的黑白图像。然后,使用. htaccess或服务器指令,在未来一两个月内设置文件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"

你可以用

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

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

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

然而,它并不总是可取的,有时开发人员需要一种方法来避免额外的有效负载。例如,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,可用于避免虚假的收藏夹请求:

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

参考资料见这里:

更新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=">

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

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

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

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

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

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

我们还为开发设置了几个虚拟主机,并且在使用http://localhost和获取/favicon.ico.时仅失败了500个内部服务器错误如果您运行“curl-vhttp://localhost/favicon.ico”并收到有关主机名不在解析器缓存中的警告或类似的内容,您可能会遇到问题。

它可以像不获取一样简单(我们尝试过,但它不起作用,因为我们的根本原因不同),或者在apache2.conf或. htaccess中查找可能导致奇怪的500内部服务器错误消息的指令。

我们发现它失败得如此之快,在Apache的错误日志中没有任何有用的东西,并且花了整个上午在这里和那里更改小东西,直到我们解决了设置额外标头的问题,因为我们忘记了加载mod_headers!

只需将以下行添加到超文本标记语言文件的<head>部分:

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

此解决方案的特点:

  • 100%有效的HTML5
  • 很短
  • 不会引起IE 8及更早版本的任何怪癖
  • 不会使浏览器将当前的超文本标记语言代码解释为收藏夹(href="#"就是这种情况)

如果你使用nginx

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

有时,当超文本标记语言有一些注释代码并且浏览器试图查找某些内容时,就会出现此错误。就像在我的案例中,我在flask中为Web表单注释了代码,并且我得到了这个。

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

1)我创建了一个新的python环境,然后它在注释的超文本标记语言行上抛出了一个错误,在此之前我只抛出了错误'GET/favicon.icoHTTP/1.1"404'

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

Node.js,

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

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

阻止Chrome浏览器的特定请求URL的屏幕截图

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

就我个人而言,我在我的超文本标记语言中使用了这个:

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

把它放进你的超文本标记语言:

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

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

详细阐述了之前的答案,这可能是超文本标记语言文件本身的最短解决方案:
<link rel="shortcut icon" href="data:" />

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

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

或者 . . . 您可以添加收藏夹:)

例如用于Python Flask应用程序。

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

我需要防止请求并显示图标,即在Chrome。

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

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

让它变得简单:

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

什么都不显示!!!!

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

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

问题是它将阻止所有图像查询。如果您的超文本标记语言有任何图像,它们将不会被加载。在我的情况下,它很可能是Firefox中的bug,因为浏览器正在请求favicon.ico的响应,其Content-type是text/xml!

它还取决于在客户端实施此功能的浏览器。

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

干杯!