favicon - How to prevent favicon.ico requests?

Question

I don't have a favicon.ico, but my browser always makes a request for it.

Is it possible to prevent the browser from making a request for the favicon from my site? Maybe some META-TAG in the HTML header?

score 693 · Accepted Answer

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

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

有关参考，请参见此处：

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

score 210 · Accepted Answer

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

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

该解决方案的特点：

100% 有效的 HTML5
很短
不会招致 IE 8 及更早版本的任何怪癖
不会让浏览器将当前的 HTML 代码解释为 favicon（使用时会出现这种情况href="#"）

score 58 · Accepted Answer

我相信我已经看到了~~（虽然我没有测试过或亲自使用过）~~：

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

有人有类似的经历吗？

编辑：

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

score 38 · Accepted Answer

You can't. All you can do is to make that image as small as possible and set some cache invalidation headers (Expires, Cache-Control) far in the future. Here's what Yahoo! has to say about favicon.ico requests.

score 10 · Accepted Answer

如果你使用 nginx

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

score 7 · Accepted Answer

把它放到你的 HTML 头中：

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

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

score 7 · Accepted Answer

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

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

score 6 · Accepted Answer

您可以使用 .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"

score 5 · Accepted Answer

A very simple solution is put the below code in your .htaccess. I had the same issue and it solve my problem.

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

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

score 3 · Accepted Answer

在 Node.js 中，

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

score 3 · Accepted Answer

3

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

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

于 2021-02-18T21:42:19.080 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

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

快速代码尝试<head>：

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

score 0 · Accepted Answer

根据我们的经验，当 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 时设置额外标题的问题！

score -1 · Accepted Answer

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

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

例如对于 Python Flask 应用程序。

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

score -15 · Accepted Answer

你可以使用

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

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

favicon - How to prevent favicon.ico requests?

17 回答 17

Related

Reference