logo标签列表

如何防止浏览器发送favicon.ico请求？

favicon
796

我没有一个favicon.ico文件，但是我的浏览器总是请求它。

有没有可能阻止浏览器从我的网站请求这个favicon？也许在HTML头部中使用一些META-TAG可以实现吗？

35
好问题，但似乎最简单的解决方法就是添加一个有效的网站图标 :-) 这肯定只需要一分钟的时间，使您的网站立即看起来更专业？ - Matt Wilko
7
您也可以拥有一个空的favicon.ico文件。这将停止请求（在第一次请求后），但不会导致浏览器呈现一个空白的favicon，而通常呈现其默认图标。 - mxcl
61
我必须说，我完全同意提问者的隐含观点：为什么需要将某些东西“额外”强制执行？此外，我们如何能够简单地向响应添加一些元数据，指示“行为与请求favicon.ico并收到404完全相同，只是不要实际发出请求，并且在此页面更改之前不再询问”。 - Daniel
67
这真是太痛苦了。我的网络服务只提供JSON，甚至没有基本的文件传输能力（首先，每个方法都需要认证令牌才能避免401/403错误）。我记录失败的请求以便稍后进行分析 - 日志不断涌现出对网站图标的请求。 - Basic
7
现在是2023年3月23日，你的原话是“它是2015年，有任何相关新闻吗？”。 - Jonathan Simon Prates
显示剩余11条评论
19个回答
744

首先我要说的是，在网页中有一个favicon是一件好事（通常情况下）。

然而，并不总是需要它，有时开发人员需要避免额外的负荷。例如，一个IFRAME可能会请求一个favicon却不显示它。 更糟糕的是，在Chrome和Android中，一个IFRAME将为favicon生成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,=">

由于这只是适用于较旧版本的IE，所以我从“rel”属性值中省略了“shortcut”名称，并且低于IE8的版本也不支持dataURIs。没有在IE8上测试。

更新2：

如果您需要使您的文档符合HTML5标准，请使用以下内容代替：

<link rel="icon" href="data:;base64,iVBORw0KGgo=">
37
您的“更新2”在Lollipop上出现了问题...添加<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">似乎解决了该问题。 - Alko
3
如果我理解正确的话，我可以在浏览器中打开data:image/png;base64,iVBORw0KGgo=，将其保存为favicon.ico，也就是指空PNG文件，并存储在网站根目录下。对吗？ - Martin
7
@Alko 空的PNG文件仍然无效。如果只是要创建一个描述空文件的数据URL，请使用：<link rel="icon" href="data:,">。 - vog
4
即使在index.html文件中没有引用到它，浏览器往往也会请求favicon。那么这个解决方案如何防止这种情况发生呢？特别是，我看到Firefox非常积极地在你访问一个域时立即请求它。其他浏览器可能会在稍后进行请求，例如在索引文件加载头部之后（对于更了解浏览器内部工作原理的人，请评论）。如果没有favicon可能会产生潜在的副作用，可以通过谷歌搜索或者访问以下链接了解：https://dev59.com/Hm855IYBdhLWcg3wj1MS - juanheyns
4
我之前在使用这个，但是必须加强网络应用程序的安全性。现在，我收到了这个错误信息：“拒绝加载图像'data:;base64,='，因为它违反了以下内容安全策略指令：“default-src 'self' https: 'unsafe-eval' 'unsafe-inline'”。请注意，'img-src'没有被明确设置，所以将使用“default-src”作为后备方案。”- 因此，这个解决方案（虽然不错），只适用于安全性更加松散的情况。 - Kevin Teljeur
显示剩余6条评论
271
只需将以下行添加到HTML文件的部分即可：<head>。
<link rel="icon" href="data:,">

此解决方案的特点：

  • 100％有效的HTML5
  • 非常简短
  • 不会产生任何IE 8及更早版本的怪异行为
  • 不会使浏览器将当前HTML代码解释为网站图标（这将是使用href="#"的情况）

此解决方案的缺点：

  • 不适用于Safari（欢迎在评论中提出改进建议）
10
如果你只是试图在本地项目中关闭Chrome DevTools，那么这绝对是最简单和最清洁的方法。 - Andrew
2
请详细说明一下。我只需要在HTML文件中包含这个内容就可以停止favicon请求吗？ - Aakash Verma
4
@AakashVerma 是的，就这些了，不需要其他内容。（除非您的网站需要支持Internet Explorer 8或更早版本。）我已经相应地改进了我的答案。 - vog
1
在Safari浏览器（版本16.1）上无法工作，看起来Safari仍在发送有关favicon的请求。但在其他浏览器上可以正常运行。 - Saurabh Bayani
1
确认在Safari（16.3）中不起作用 - skiss
显示剩余6条评论
61

您可以在<head>元素中使用以下HTML：

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

我在强制进行完全刷新的情况下进行了测试，但是在 Fiddler 中没有看到任何 favicon 请求。(在 IE8 兼容模式下作为 IE7 标准和 FF 3.6 进行测试)

注意: 这可能会导致 HTML 文件被下载两次，所以虽然它可以隐藏错误，但会带来一定的代价。

3
我尝试在Safari中打开，但是网站图标的请求又一次命中了托管页面。 - Morgan Cheng
43
我不建议这样做，因为它会导致浏览器（Safari5/Mac，可能也包括其他浏览器）向服务器发送两次网页请求。 - Manav
4
在Safari6/Mac中不再是这种情况。 - Marcel
4
爆炸这个！谢谢 :D 现在我不会看到那个讨厌的错误，直到我终于开始制作那个图标。 - Leon Gaban
3
请使用 about:blank 代替。 - mems
显示剩余6条评论
37

您无法做到这一点。您可以尽可能将该图像缩小，并设置一些缓存失效头（Expires，Cache-Control），以便远期使用。以下是雅虎对于 favicon.ico 请求的建议。

点击此处查看。

9
他说他没有网站收藏图标。它们比那还要小，缓存不存在的文件毫无意义。 - innaM
18
如果他的网站没有网站图标，那么他应该制作一个，这就是我的意思。没有比这更好的解决方案了。这不是很合乎逻辑吗？如果没有办法停止请求，除非你使用缓存，你会怎么做呢？ - Ionuț G. Stan
4
关闭它。如果您不想要网站图标，并且也不想在错误日志中看到错误请求，那么您应该关闭它。为什么这么难理解呢？ - B T
@BT 服务器还是浏览器？ :D - Ionuț G. Stan
它们两个。 - B T
2
不制作网站图标也许是有充分理由的。在我的情况下，我正在尝试更新401页面，以避免请求网站图标，因为该请求也将是未经身份验证的并且会出错。 - Marlin Pierce
17

如果您使用 nginx

# skip favicon.ico
#
location = /favicon.ico {
    access_log off;
    return 204;
}
1
这并不能阻止请求，但我认为它是一个不错的替代方案。 - QasimK
3
当然可以，如果你能控制Web服务器。 - jbruni
14

为了测试目的，最简单的临时阻止这些内容的方法是在Chrome中右键单击页面上的任何位置并单击检查，或者按Ctrl+Shift+j，然后转到网络选项卡，重新加载页面将发送您的页面应该进行的所有请求，包括那个讨厌的favicon.ico。现在，您可以右键单击favicon.ico请求并单击“阻止请求URL”。

screenshot of blocking a specific request URL for Chrome browser

以上所有答案都是针对控制应用程序源代码的开发人员。如果您是一位系统管理员，正在处理负载均衡器或代理配置，并对这个favicon.ico的小把戏感到烦恼，那么这个简单的技巧可以更好地解决问题。这个答案是针对Chrome的，但我认为应该存在类似的替代方案，您可以找出适用于Firefox/Opera/Tor/任何其他浏览器的方法 :)
这并没有解决最初的问题。楼主在正常的浏览会话中遇到了问题。 - undefined
12
把这个放到你的HTML头中：
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4//8/AAX+Av7czFnnAAAAAElFTkSuQmCC">

这个回答比其他回答稍微长一些，但是它包含了一个真正有效的PNG图片（1x1像素白色）。

1
也 data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA= - a55
也许稍微大一点，但是它真的很好用！谢谢！我也在尝试无服务器技术，这将减少我函数调用的次数50%。 - undefined
6
您可以使用.htaccess或服务器指令来拒绝访问favicon.ico，但服务器将向浏览器发送访问被拒绝的回复，这会使页面访问变慢。
当用户返回您的站点时，您可以通过让其保留在浏览器缓存中来阻止浏览器请求favicon.ico。
首先，提供一个小的favicon.ico图像，可以是空白的，但尽可能小。我制作了一个黑白的小于200字节的图像。然后，使用.htaccess或服务器指令，在未来一个月或两个月内设置文件过期标头。当同一用户再次访问您的站点时，它将从浏览器缓存中加载，不会向您的站点发出请求。服务器日志中也不再有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>

如果您使用别名(alias)，那么一个单独的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 - Sino Boeckmann
6
非常简单的解决方案是将以下代码放入您的.htaccess文件中。我曾经遇到过相同的问题，它解决了我的问题。
<IfModule mod_alias.c>
    RedirectMatch 403 favicon.ico
</IfModule>

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

本文介绍了如何通过添加htaccess规则来阻止网站收到关于favicon.ico文件的404请求。这些请求会降低网站的性能，并且可能会被黑客利用。采用本文所述方法可提高网站的安全性和效率。

这里链接的文章非常好，但我认为回复中的语法是不正确的。 - Erica Kane
3
那么你会得到一个403错误（禁止访问），而不是404。这样有什么好处？ - Luis A. Florit
5

只需使用以下简单方法：

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

它什么也没显示！！！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接