我没有 favicon.ico,但我的浏览器总是会发出请求。
是否可以阻止浏览器从我的网站请求网站图标?也许 HTML 标头中有一些 META-TAG?
我首先要说,在网页中有一个网站图标是一件好事(通常)。
然而,这并不总是需要的,有时开发人员需要一种方法来避免额外的有效负载。例如,一个 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=">
只需将以下行添加到 HTML 文件的 <head>
部分:
<link rel="icon" href="data:,">
该解决方案的特点:
100% 有效的 HTML5
很短
不会招致 IE 8 及更早版本的任何怪癖
不会让浏览器将当前 HTML 代码解释为 favicon(href="#" 就是这种情况)
reserves space
是什么意思?
我相信我已经看到了(虽然我没有测试过或亲自使用过):
<link rel="shortcut icon" href="#" />
有人有类似的经历吗?
编辑:
我刚刚测试了上面的代码片段,并且在强制完全刷新时,在 Fiddler 中没有看到任何网站图标请求。我针对 IE8(作为 IE7 标准的兼容模式)和 FF 3.6 进行了测试。
about:blank
你不能。您所能做的就是使该图像尽可能小,并在将来设置一些缓存失效标头(Expires
、Cache-Control
)。以下是关于 favicon.ico 请求的what Yahoo! has to say。
如果你使用 nginx
# skip favicon.ico
#
location = /favicon.ico {
access_log off;
return 204;
}
出于测试目的临时阻止这些的最简单方法是在 chrome 中打开检查页面,方法是右键单击页面上的任意位置并单击检查或按 Ctrl+Shift+j
,然后转到网络选项卡,然后重新加载页面,这将发送您的页面应该发出的所有请求,包括烦人的 favicon.ico。您现在只需右键单击 favicon.ico 请求,然后单击“阻止请求 URL”。
https://i.stack.imgur.com/q7NFl.png
以上所有答案均适用于控制应用程序源代码的开发人员。如果您是一个系统管理员,正在计算负载平衡器或代理配置,并且对这个 favicon.ico 恶作剧感到恼火,那么这个简单的技巧会做得更好。这个答案适用于 Chrome,但我认为应该有一个类似的替代方案,你会为 Firefox/Opera/Tor/任何其他浏览器找到它:)
把它放到你的 HTML 头中:
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4//8/AAX+Av7czFnnAAAAAElFTkSuQmCC">
这比其他答案大一点,但确实包含一个实际有效的 PNG 图像(1x1 像素白色)。
data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=
您可以使用 .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"
一个非常简单的解决方案是将以下代码放入您的 .htaccess
。我有同样的问题,它解决了我的问题。
<IfModule mod_alias.c>
RedirectMatch 403 favicon.ico
</IfModule>
参考:http://perishablepress.com/block-favicon-url-404-requests/
在 Node.js 中,
res.writeHead(200, {'Content-Type': 'text/plain', 'Link': 'rel="shortcut icon" href="#"'} );
我个人在我的 HTML 头标签中使用了这个:
<link rel="shortcut icon" href="#" />
只需使用以下命令使其简单:
<link rel="shortcut icon" href="#" type="image/x-icon">
什么都不显示!!!!
详细说明以前的答案,这可能是 HTML 文件本身的最短解决方案:
<link rel="shortcut icon" href="data:" />
经过测试,Chrome 版本 94.0.4606.81 上没有错误消息或请求失败
我需要阻止请求并在 Chrome 中显示图标。
在 <head>
中尝试的快速代码:
<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEU0OkArMjhobHEoPUPFEBIu
O0L+AAC2FBZ2JyuNICOfGx7xAwTjCAlCNTvVDA1aLzQ3COjMAAAAVUlEQVQI12NgwAaCDSA0888G
CItjn0szWGBJTVoGSCjWs8TleQCQYV95evdxkFT8Kpe0PLDi5WfKd4LUsN5zS1sKFolt8bwAZrCa
GqNYJAgFDEpQAAAzmxafI4vZWwAAAABJRU5ErkJggg==" />
根据我们的经验,当 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 时设置额外标题的问题!
有时会出现此错误,当 HTML 有一些注释代码并且浏览器正在尝试查找某些内容时。就像在我的情况下,我在烧瓶中评论了 Web 表单的代码,我得到了这个。
花了2个小时后,我通过以下方式修复了它:
1)我创建了一个新的python环境,然后它在注释的HTML行上抛出了一个错误,在此之前我只被抛出了错误'GET /favicon.ico HTTP/1.1“404'
2)有时,当我有重复的代码,比如存在同名的python文件时,我也看到了这个错误,尝试删除那些
如果您不使用 HTML 并且它是由 Flask 或某些框架自动生成的,您始终可以在应用程序中添加一个虚拟路由以仅返回虚拟文本来解决此问题。
或者 。 . .你可以只添加 favicon :)
例如对于 Python Flask 应用程序。
@app.route('/favicon.ico')
def favicon():
return 'dummy', 200
我通过使用 Content-Security-Policy HTTP 响应标头解决了这个问题。通过使用它,可以阻止浏览器进行进一步的媒体查询,如图像(其他类型也是可能的)。我在响应中添加了以下标头:
Content-Security-Policy: img-src 'none'
问题是它会阻止所有图像查询。如果您的 HTML 有任何图像,它们将不会被加载。就我而言,这很可能是 Firefox 中的一个错误,因为浏览器正在请求 favicon.ico 以获取内容类型为 text/xml 的响应!
它还取决于在客户端强制执行此功能的浏览器。
查看 https://content-security-policy.com 以获取有关 CSP 的完整指南。
干杯!
你可以使用
<link rel="shortcut icon" href="http://localhost/" />
这样它实际上不会从服务器请求。
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
似乎可以解决问题。data:image/png;base64,iVBORw0KGgo=
,将其另存为favicon.ico
。 空 PNG 文件 并将其存储在网站根目录中。正确的?