小智 531
我首先要说的是,在网页中使用favicon是一件好事(通常).
然而,并不总是需要它,有时开发人员需要一种方法来避免额外的有效载荷.例如,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">
有关参考,请参阅此处
- https://github.com/h5bp/html5-boilerplate/issues/1103
- https://twitter.com/diegoperini/status/4882543836930048
Chrome bug /行为可能会在即将推出的版本中修复.
以下是您投票的错误提交:
更新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=">
- 你的UPDATE 2在Lollipop上有问题...添加`<link rel ="icon"type ="image/png"href ="data:image/png; base64,iVBORw0KGgo =">`似乎解决了这个问题. (19认同)
- 我正在使用它，但不得不加强我的 Web 应用程序的安全性。现在，我得到了这个：“拒绝加载图像 'data:;base64,=' 因为它违反了以下内容安全策略指令：“default-src 'self' https: 'unsafe-eval' 'unsafe-inline'” . 请注意，'img-src' 未明确设置，因此使用 'default-src' 作为后备。” - 所以这个解决方案（虽然很好）只适用于更宽松的安全场景。 (4认同)
- @Alko那个空的PNG文件仍然无效.如果这只是创建描述空文件的数据URL,请使用:<link rel ="icon"href ="data:,"> (3认同)
- 如果我做对了,我可以在浏览器中打开`data:image/png; base64,iVBORw0KGgo =`,将其保存为`favicon.ico`又名.**空PNG文件**并将其存储在网站根目录中.对？ (2认同)
- 即使在index.html文件中没有对该图标的引用，浏览器也倾向于请求该图标，那么该解决方案将如何防止这种情况？具体来说，我发现Firefox在您访问域后就极力要求它。其他浏览器可能会在以后执行此操作，也许是在索引文件加载了标头之后（请进一步了解浏览器内部知识的人发表评论）。没有favicon会产生潜在的副作用，只需在Google上进行搜索，或：http://stackoverflow.com/questions/4269695/do-i-need-to-have-a-favicon-on-my-site-how-do我摆脱了我看到的错误 (2认同)
- @azrail 建议的`<link rel="icon" href="#">`怎么样？/sf/answers/4638799791/ (2认同)
vog*_*vog 96
只需将以下行添加到<head>HTML文件的部分:
<link rel="icon" href="data:,">
该解决方案的特点:
- 100%有效的HTML5
- 很短
- 不会引起IE 8及更早版本的任何怪癖
- 不会使浏览器将当前的HTML代码解释为favicon(可能就是这种情况
href="#")
- 2021 年仍然有效（FF 和 Chrome）。 (6认同)
- 如果您只是想在本地项目上关闭chrome devtools,这是迄今为止最简单,最干净的方法. (4认同)
- @AakashVerma是的，仅此而已。不需要什么了。（除非您的站点需要支持Internet Explorer 8或更早版本。）我相应地改进了答案。 (2认同)
mlh*_*Dev 45
我相信我见过这个 (我没有测试过或亲自使用它):
<link rel="shortcut icon" href="#" />
有没有类似的经历？
编辑:
我刚刚测试了上面的代码片段并且在强制完全刷新时,在Fiddler中没有看到favicon请求.我针对IE8(Compat模式为IE7标准)和FF 3.6进行了测试.
- 我不建议这样做,因为它使浏览器(Safari5/Mac,也许还有其他人)从服务器请求两次网页. (26认同)
- 使用 `about:blank` 代替 (3认同)
- 我试过Safari.favicon请求再次点击主机页面. (2认同)
- @Manav在Safari6 / Mac中不再是这种情况。 (2认同)
- OM！谢谢：D现在，直到我终于开始制作那个图标了，我才看不到那个烦人的错误。 (2认同)
Ion*_*tan 36
你不能.您所能做的就是使该图像尽可能小,并在将来设置一些缓存失效标题(Expires,Cache-Control).这就是Yahoo! 不得不说有关favicon.ico的请求.
- 如果他没有图标,那么他应该制作一个,这就是我的观点.没有比这个更好的解决方案了.这不符合逻辑吗？如果没有可能停止请求,**除非**你使用缓存,你做什么？ (16认同)
- 他说他没有图标.他们并没有比这更小.缓存不存在的文件没有任何意义. (7认同)
- 你把它关掉。如果您不想要网站图标，并且也不希望错误日志中出现错误请求，那么您应该将其关闭。为什么这么难理解？ (3认同)
- 不制作网站图标可能有充分的理由。就我而言，我尝试更新 401 页面以不请求图标，因为该请求也将未经身份验证并出现错误。 (2认同)
如果你使用 nginx
# skip favicon.ico
#
location = /favicon.ico {
access_log off;
return 204;
}
- 当然，如果您可以控制网络服务器。 (3认同)
出于测试目的暂时阻止这些的最简单方法是通过右键单击页面上的任意位置并单击检查或按下Ctrl+Shift+j然后转到网络选项卡，然后重新加载将发送所有请求您的页面应该包括那个烦人的 favicon.ico。您现在只需右键单击 favicon.ico 请求，然后单击“阻止请求 URL”。
以上所有答案均适用于控制应用程序源代码的开发人员。如果您是系统管理员，正在计算我们的负载平衡器或代理配置，并且对这个 favicon.ico 恶作剧感到恼火，那么这个简单的技巧会做得更好。这个答案是针对 Chrome 的，但我认为应该有一个类似的替代方案，你可以为 Firefox/Opera/Tor/任何其他浏览器找出 :)
小智 5
您可以使用.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"
一个非常简单的解决方案是将以下代码放入您的.htaccess. 我有同样的问题，它解决了我的问题。
<IfModule mod_alias.c>
RedirectMatch 403 favicon.ico
</IfModule>
参考：http : //perishablepress.com/block-favicon-url-404-requests/
- 因此，您会收到 403 错误（禁止），而不是 404。这更好吗？ (3认同)
小智 5
把它放到你的 HTML 头中：
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4//8/AAX+Av7czFnnAAAAAElFTkSuQmCC">
这比其他答案大一点，但确实包含一个实际有效的 PNG 图像（1x1 像素白色）。
详细说明之前的答案，这可能是 HTML 文件本身最短的解决方案：
<link rel="shortcut icon" href="data:" />
在 Chrome 版本 94.0.4606.81 上测试工作正常，没有错误消息或失败的请求
小智 5
只需简单地使用：
<link rel="shortcut icon" href="#" type="image/x-icon">
什么也没有显示！！！！
| 归档时间： |
|
| 查看次数： |
281655 次 |
| 最近记录： |