当前位置： 文江博客话题详情

如何阻止 favicon.ico 请求？

发布于 2024-08-02 22:09:42 字数 87 浏览 7 评论 0原文

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

是否可以阻止浏览器从我的网站发出对网站图标的请求？也许 HTML 标头中有一些元标记？

原文

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?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（16）

雨巷深深 2024-08-09 22:09:42

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

然而，这并不总是理想的，有时开发人员需要一种方法来避免额外的有效负载。例如，IFRAME 会请求一个网站图标而不显示它。
最糟糕的是，在 Chrome 和 Android 中，IFRAME 将生成 3 个对 favicon 的请求：

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

I will first say that having a favicon in a Web page is a good thing (normally).

However it is not always desired and sometime developers need a way to avoid the extra payload. For example an IFRAME would request a favicon without showing it.
Worst yet, in Chrome and Android an IFRAME will generate 3 requests for favicons:

"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

The following uses data URI and can be used to avoid fake favicon requests:

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

For references see here:

UPDATE 1:

From the comments (jpic) it looks like Firefox >= 25 doesn't like the above syntax anymore. I tested on Firefox 27 and it doesn't work while it still work on Webkit/Chrome.

So here is the new one that should cover all recent browsers. I tested Safari, Chrome and Firefox:

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

I left out the "shortcut" name from the "rel" attribute value since that's only for older IE and versions of IE < 8 doesn't like dataURIs either. Not tested on IE8.

UPDATE 2:

If you need your document to validate against HTML5 use this instead:

<link rel="icon" href="data:;base64,iVBORw0KGgo=">
回复 原文
π浅易 2024-08-09 22:09:42

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

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

此解决方案的功能：

  • 100% 有效的 HTML5
  • 非常短
  • 不会引起 IE 8 及更早
  • 版本浏览器 的任何怪癖将当前 HTML 代码解释为 favicon（href="#" 就是这种情况）

此解决方案的缺点：

  • 不适用于 Safari（欢迎评论中的改进建议）

Just add the following line to the <head> section of your HTML file:

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

Features of this solution:

  • 100% valid HTML5
  • very short
  • does not incur any quirks from IE 8 and older
  • does not make the browser interpret the current HTML code as favicon (which would be the case with href="#")

Downside of this solution:

  • Doesn't work for Safari (improvement proposals in the comments are welcome)
回复 原文
遇见了你 2024-08-09 22:09:42

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

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

我在强制完全刷新上对此进行了测试，并且在 Fiddler 中没有看到任何图标请求。 （按照 IE7 标准和 FF 3.6 在兼容模式下针对 IE8 进行测试）

注意：这可能会下载 html 文件两次，因此虽然它可以隐藏错误，但它会带来一定的成本。

You can use the following HTML in your <head> element:

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

I tested this on a forced full refresh, and no favicon requests were seen in Fiddler. (tested against IE8 in compat mode as IE7 standards, and FF 3.6)

Note: this may download the html file twice, so while it works in hiding the error, it comes with a cost.

回复 原文
痴情 2024-08-09 22:09:42

你不能。您所能做的就是使该图像尽可能小，并在将来设置一些缓存失效标头（Expires、Cache-Control）。这是什么是雅虎！不得不说关于 favicon.ico 请求。

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.

回复 原文
往事随风而去 2024-08-09 22:09:42

如果你使用nginx

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

if you use nginx

# skip favicon.ico
#
location = /favicon.ico {
    access_log off;
    return 204;
}
回复 原文
氛圍 2024-08-09 22:09:42

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

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

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

The easiest way to block these temporarily for testing purposes is to open up the inspect page in chrome by right-clicking anywhere on the page and clicking inspect or by pressing Ctrl+Shift+j and then going to the networking tab and then reloading the page which will send all the requests your page is supposed to make including that annoying favicon.ico. You can now simply right click the favicon.ico request and click "Block request URL".

screenshot of blocking a specific request URL for Chrome browser

All of the above answers are for devs who control the app source code. If you are a sysadmin, who's figuring out load-balancer or proxying configuration and is annoyed by this favicon.ico shenanigans, this simple trick does a better job. This answer is for Chrome, but I think there should be a similar alternative which you would figure out for Firefox/Opera/Tor/any other browser :)

回复 原文
潜移默化 2024-08-09 22:09:42

将其放入您的 HTML 头中：

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

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

Put this into your HTML head:

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

This is a bit larger than the other answers, but does contain an actually valid PNG image (1x1 pixel white).

回复 原文
逆蝶 2024-08-09 22:09:42

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

当用户返回您的网站时，您可以通过将 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"

You can use .htaccess or server directives to deny access to favicon.ico, but the server will send an access denied reply to the browser and this still slows page access.

You can stop the browser requesting favicon.ico when a user returns to your site, by getting it to stay in the browser cache.

First, provide a small favicon.ico image, could be blank, but as small as possible. I made a black and white one under 200 bytes. Then, using .htaccess or server directives, set the file Expires header a month or two in the future. When the same user comes back to your site it will be loaded from the browser cache and no request will go to your site. No more 404's in the server logs too.

If you have control over a complete Apache server or maybe a virtual server you can do this:-

If the server document root is say /var/www/html then add this to /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>

Then a single favicon.ico will work for all the virtual hosted sites since you are aliasing it. It will be drawn from the browser cache for a month after the users visit.

For .htaccess this is reported to work (not checked by me):-

AddType image/x-icon .ico
ExpiresActive On
ExpiresByType image/x-icon "access plus 1 month"
回复 原文
半窗疏影 2024-08-09 22:09:42

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

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

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

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/

回复 原文
与君绝 2024-08-09 22:09:42

详细阐述之前的答案，这可能是 HTML 文件本身最短的解决方案：

在 Chrome 版本 94.0.4606.81 上测试工作正常，没有错误消息或失败的请求

Elaborating on previous answers, this might be the shortest solution from the HTML file itself:
<link rel="shortcut icon" href="data:" />

Tested working, no error messages or failed requests on Chrome Version 94.0.4606.81

回复 原文
失而复得 2024-08-09 22:09:42

只是简单一点：

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

它什么也不显示！！！！

Just make it simple with :

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

It displays nothing!!!!

回复 原文
猫性小仙女 2024-08-09 22:09:42

在 Node.js 中，

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

In Node.js,

res.writeHead(200, {'Content-Type': 'text/plain', 'Link': 'rel="shortcut icon" href="#"'} );
回复 原文
后来的我们 2024-08-09 22:09:42

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

在中尝试的快速代码：

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

效果：

在此处输入图像描述

完整示例：

<!DOCTYPE html>
<html>
<head>
    <title><- this icon</title>
    <link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,
        iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEU0OkArMjhobHEoPUPFEBIu
        O0L+AAC2FBZ2JyuNICOfGx7xAwTjCAlCNTvVDA1aLzQ3COjMAAAAVUlEQVQI12NgwAaCDSA0888G
        CItjn0szWGBJTVoGSCjWs8TleQCQYV95evdxkFT8Kpe0PLDi5WfKd4LUsN5zS1sKFolt8bwAZrCa
        GqNYJAgFDEpQAAAzmxafI4vZWwAAAABJRU5ErkJggg==" />
</head>
<body>
    
    <h1>Check tab icon</h1>
    
</body>
</html>

I need prevent request AND have icon displayed i.e. in Chrome.

Quick code to try in <head>:

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

Effect:

enter image description here

Full example:

<!DOCTYPE html>
<html>
<head>
    <title><- this icon</title>
    <link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,
        iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAMFBMVEU0OkArMjhobHEoPUPFEBIu
        O0L+AAC2FBZ2JyuNICOfGx7xAwTjCAlCNTvVDA1aLzQ3COjMAAAAVUlEQVQI12NgwAaCDSA0888G
        CItjn0szWGBJTVoGSCjWs8TleQCQYV95evdxkFT8Kpe0PLDi5WfKd4LUsN5zS1sKFolt8bwAZrCa
        GqNYJAgFDEpQAAAzmxafI4vZWwAAAABJRU5ErkJggg==" />
</head>
<body>
    
    <h1>Check tab icon</h1>
    
</body>
</html>
回复 原文
情仇皆在手 2024-08-09 22:09:42

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

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

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

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

它可能就像不获取一样简单（我们尝试过，但没有成功，因为我们的根本原因不同），或者在 apache2.conf 或 .htaccess 中查找可能导致奇怪的 500 内部服务器错误消息的指令。

我们发现它失败得太快了，Apache 的错误日志中没有任何有用的东西，并且花了整个早上到处改变一些小东西，直到我们解决了在忘记加载 mod_headers 时设置额外标头的问题！

In our experience, with Apache falling over on request of favicon.ico, we commented out extra headers in the .htaccess file.

For example we had
Header set X-XSS-Protection "1; mode=block"

... but we had forgotten to sudo a2enmod headers beforehand. Commenting out extra headers being sent resolved our favicon.ico issue.

We also had several virtual hosts set up for development, and only failed out with 500 Internal Server Error when using http://localhost and fetching /favicon.ico. If you run curl -v http://localhost/favicon.ico and get a warning about the host name not being in the resolver cache or something to that effect, you might experience problems.

It could be as simple as not fetching (we tried that and it didn't work, because our root cause was different) or look around for directives in apache2.conf or .htaccess which might be causing strange 500 Internal Server Error messages.

We found it failed so quickly there was nothing useful in Apache's error logs whatsoever and spent an entire morning changing small things here and there until we resolved the problem of setting extra headers when we had forgotten to have mod_headers loaded!

回复 原文
花落人断肠 2024-08-09 22:09:42

有时，当 HTML 有一些注释代码并且浏览器试图查找某些内容时，就会出现此错误。就像我的例子一样，我在 Flask 中评论了 Web 表单的代码，我得到了这个。

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

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

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

Sometimes this error comes, when HTML has some commented code and browser is trying to look for something. Like in my case I had commented code for a web form in flask and I was getting this.

After spending 2 hours I fixed it in the following ways:

1) I created a new python environment and then it threw an error on the commented HTML line, before this I was only thrown error 'GET /favicon.ico HTTP/1.1" 404'

2) Sometimes, when I had a duplicate code, like python file existing with the same name, then also I saw this error, try removing those too

回复 原文
两仪 2024-08-09 22:09:42

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

或者
。
。
。
您只需添加 favicon :)

例如，用于 Python Flask 应用程序。

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

If you are not using HTML and it's auto-generated by Flask or some frameworks you can always add a dummy route in the app to just return dummy text to fix this issue.

Or
.
.
.
you can just add the favicon :)

Eg for Python Flask Application.

@app.route('/favicon.ico')
def favicon():
    return 'dummy', 200
回复 原文
~没有更多了~

关于作者

夕嗳→

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

胡图图

文章 0 评论 0

zt006

文章 0 评论 0

z祗昰~

文章 0 评论 0

冰葑

文章 0 评论 0

野の

文章 0 评论 0

天空

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文