How to prevent favicon.ico requests?

How to prevent favicon.ico requests?

回答1

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

 

回答2

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

 

Why am I seeing a 404 (Not Found) error failed to load favicon.ico when not using this?

回答1

By adding this to the header section, you will definitely remove the error in the console log:

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

From Chrome 2020 this is the solution :

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

 

回答2

Google favicon generator and make an icon. Name it favicon.ico and drop it in your webroot.

See if this helps.

Also here is a tutorial on favicon: https://www.w3.org/2005/10/howto-favicon

 

I'm getting favicon.ico error

回答1

I have had this error for some time as well. It might be some kind of netbeans bug that has to do with netbeans connector. I can't find any mention of favicon.ico in my code or in the project settings.

I was able to fix it by putting the following line in the head section of my html file

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

I am currently using this in my testing environment, but I would remove it for any production environment.

 

回答2

The accepted answer didn't work for me, I had to add a value to the href attribute:

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

 

回答3

The accepted answer didn't work for me so I've found this solution.

It may be related to the HTML version as the most voted solution there states:

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

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

See the link for more info.

 

作者:Chuck Lu    GitHub
posted @   ChuckLu  阅读(152)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示