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?

+1 good question but it seems like the simplest solution is just to add a valid favicon :-) surely this is a one minute job and your site looks more professional straight away? — Matt Wilko, Jan 30 '12 at 20:57
I like this question, you might want to research encoding a base64 favicon inside your page ( granted, you need to get an icon first then ). — tomdemuyt, Jan 30 '12 at 21:06
You can also have an empty favicon.ico file. This will stop the requests (after the first), but not cause the browser to render a blank favicon where it usually renders whatever its default icon is. — mxcl, Feb 02 '12 at 14:03
I have to say that I agree with the questioner's implied point completely: for what purpose would something *extra* be made *mandatory*? and further, how is it that we cannot simply add some meta data to the response saying "behave exactly as if you requested a favicon.ico and got a 404, only don't actually make the request and further don't ask again until this page changes". — Daniel, Apr 19 '12 at 23:36
This is such a pain. I have a webservice which only serves JSON and doesn't even have the basic capability of serving files without some changes (for a start, _every_ method requires an auth token to avoid a 401/403). I log failed requests so I can analyse them later - the logs are constantly flooded with requests for a favicon. — Basic, Jul 29 '13 at 13:53
how would you justify adding a favicon.ico file to your REST APIs? — Kingz, Mar 27 '14 at 00:24
There's a bunch of good answers, but I think the best answer as well as discussion of alternatives is on this Stack Overflow Q&A. The best seemed to be base64 encode the image in js, and feed the favicon link with a hash - the latter suggested above. A few other variations were proposed as well. — David Hobs, Aug 22 '12 at 05:44
Thanks, I encountered this problem with EpiServer 8. Navigation code shared in a header partial was getting executed twice due to the 404 request caused by the missing favicon.ico. The solution below worked like a champ. — Ken Palmer, Aug 09 '16 at 13:03
I have a mini web server builtin to a service process for inspecting the operations of the process. Every URL has code to generate a pure HTML page. No scripts, no pictures, no icons, just pure HTML. favicon.ico was a rude surprise when I added a form tag with an input tag. Thanks for solution. — brian beuning, Apr 20 '17 at 21:35
Please notice all website pages (and head config) are not the only potential responsibles of this favicon 403 error. For example, if you try to access to a website ressource directly (ex. http://example.net/mywebsite/images/logo.gif), the browser will request "favicon.ico" too !! (tested with google chrome) that makes me crazy for a while ... hope this helps.. — boly38, May 10 '17 at 15:13
This is a legit question if you need to create a page with really locked-down CSP settings. It's absurd to open up an `img-src`, or spam your error logs, just for an unnecessary favicon — Stephen R, Feb 06 '20 at 21:36
Would be nice to have an accepted answer. I found @Diego-perini 's to be good. — akauppi, Dec 27 '20 at 21:18
Similar to @Basic, I have no HTML. I have a flask app that just returns JSON responses, running via a Cloudflare tunnel which is serving the app with Gunicorn. I don't want these requests to happen at all and I don't want a favicon. I'm fairly new to using Cloudflare so I assume there's some way to block the request, but I'd really just rather have the request never get sent. Is there some header I should set to tell the browser not to make the request in the first place? — pspahn, Apr 06 '22 at 21:35

score 700 · Answer 1 · edited Jun 28 '20 at 14:42

700

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

edited Jun 28 '20 at 14:42

Sridhar Ratnakumar

75,681
63
142
179

answered Nov 16 '12 at 12:41

Diego Perini

7,643
1
17
9

1

Brilliant. I have to guess the fact that you've gotten so few votes has to do only with the fact that several years have elapsed since the question was asked, and less clever answers had more time to gather votes. – iconoclast Feb 28 '13 at 14:58
32

Your UPDATE 2 had issues on Lollipop...adding `` seems to solve the issue. – Alko Jul 14 '15 at 08:41
3

If I got it right, I can open `data:image/png;base64,iVBORw0KGgo=` in browser, save it as `favicon.ico` aka. **empty PNG file** and store it in website root. Right? – Martin Jun 30 '16 at 15:04
7

@Alko That empty PNG file is still invalid. If this is just about creating an data URL that describes an empty file, use: – vog Aug 12 '16 at 12:20
4

Browsers tend to request the favicon even if there are no references to it in the index.html file, so how would this solution prevent this? Specifically, I have seen Firefox being very aggressive about requesting it as soon as you visit a domain. Other browsers may do it later, maybe after the index file has loaded the header(somebody with more knowledge of the internals of browsers please comment). Not having a favicon has potential side effects, just google it, or: http://stackoverflow.com/questions/4269695/do-i-need-to-have-a-favicon-on-my-site-how-do-i-get-rid-of-the-errors-i-see-in – juanheyns Dec 22 '16 at 18:53
4

I was using this, but had to tighten up security on my web application. Now, I get this: "Refused to load the image 'data:;base64,=' because it violates the following Content Security Policy directive: "default-src 'self' https: 'unsafe-eval' 'unsafe-inline'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback." - so this solution (while good) only works with more relaxed security scenarios. – Kevin Teljeur Feb 21 '18 at 11:55
debug your app in chrome first then you can back to mozilla – CodeToLife Sep 21 '19 at 08:51
1

what about `` suggested by @azrail? https://stackoverflow.com/a/66268568/806169 – Yukulélé Feb 14 '22 at 00:25
The original solution (``) worked for me (firefox 96). – x-yuri Mar 12 '22 at 14:03

vog · Answer 2 · 2018-12-04T10:02:02.590

217

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

edited Dec 04 '18 at 10:02

answered Aug 12 '16 at 12:22

vog

21,017
11
55
73

6

If you're just trying to shut up chrome devtools on a local project, this is by far the easiest and cleanest way to go. – Andrew Jul 12 '17 at 03:18
2

Please expand on this. Do I just need to include this in my HTML file to stop favicon request? – Aakash Verma Jul 20 '17 at 12:16
4

@AakashVerma Yes, that's all. Nothing else is needed. (Unless your site needs to support Internet Explorer 8 or older.) I improved my answer accordingly. – vog Jul 22 '17 at 17:53
1

@asynts What do you mean by `reserves space`? – mvorisek Sep 02 '19 at 10:38
@Andrew What is the problem that Chrome DevTools have with this solution? – Flinsch Oct 22 '19 at 07:39
1

@leojh What exactly is happening on Safari? Did you find a simple solution that should be added to my answer? – vog Feb 27 '21 at 00:44

score 59 · Answer 3 · edited Sep 05 '18 at 12:43

59

I believe I've seen this ~~(I haven't tested it or used it personally though)~~:

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

Anyone had similar experience?

EDIT:

I just tested the above snippet and on a forced full refresh, no favicon requests were seen in Fiddler. I tested against IE8 (Compat mode as IE7 standards) and FF 3.6.

edited Sep 05 '18 at 12:43

vog

21,017
11
55
73

answered Jan 14 '11 at 14:16

mlhDev

2,024
1
21
41

1

my tests also indicate that this trick works. However, I'd have the `href` link to some static (cached) resource that you've already loaded (e.g. css or script file) - to ensure that a dynamic (non-cached) page doesn't get requested twice. (Just to be safe since `href="#"` technically points to the current web page). – Már Örlygsson Mar 15 '11 at 23:32
This doesn't help if the requests are coming externally or from a page outside one's control. – rxgx Apr 01 '11 at 09:38
@rxgx - what do you mean? Like if someone is requesting the favicon directly? Or do you mean if the html source is not able to be edited? – mlhDev Apr 19 '11 at 12:40
If a browser is automatically requesting the favicon, there's no way on the client or server side to stop it from originating the request. All you can do is decide what to do with the request. – rxgx Apr 25 '11 at 22:19
3

I tried in Safari. The favicon request hits the hosting page again. – Morgan Cheng May 16 '11 at 10:21
36

I wouldn't suggest this, because it makes the browser (Safari5/Mac, maybe others too) to request the webpage from the server twice. – Manav Jul 18 '11 at 18:05
4

@Manav That is no longer the case in Safari6/Mac. – Marcel Feb 13 '13 at 05:44
4

BOOM THIS! Thanks :D now I won't see that annoying error, until I finally get around to making that icon hehe. – Leon Gaban Jan 25 '16 at 22:42
3

Use `about:blank` instead – mems Sep 25 '17 at 09:22
Also it will send request twice in **Chromium 89**, **FireFox 85**, it seems worst – a55 Dec 04 '20 at 00:24
What this snippet does is trying to load the html page itself as a favicon It won't display an icon, but the page itself is requested twice (unless it's cached) – Petruza Oct 18 '21 at 04:41

Ionuț G. Stan · Answer 4 · 2012-06-30T09:41:19.217

37

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.

edited Jun 30 '12 at 09:41

answered Aug 24 '09 at 11:39

Ionuț G. Stan

169,171
18
186
199

8

He said he doesn't have a favicon. They don't get much smaller than that. And it doesn't make any sense to cache non-existant files. – innaM Aug 24 '09 at 12:07
18

If he doesn't have a favicon then he should make one, that was my point. There's no better solution than this one. Isn't it logical? If there's no possibility to stop requests, **unless** you use caching, what do you do? – Ionuț G. Stan Aug 24 '09 at 12:40
3

You turn it off. If you don't want a favicon, and you also don't want error requests in your error logs, then you should turn it off. Why is that so hard to understand? – B T Jul 03 '20 at 16:51
@BT the server or the browser? :D – Ionuț G. Stan Jul 04 '20 at 17:02
The both of them. – B T Jul 08 '20 at 18:02
There can be a good reason to not make a favicon. In my case, I'm trying to update the 401 page to not request the favicon, since that request will also be unauthenticated and have an error. – Marlin Pierce Nov 12 '20 at 18:06

score 10 · Answer 5 · answered Mar 17 '18 at 19:09

10

if you use nginx

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

answered Mar 17 '18 at 19:09

Vincent-cm

984
1
9
21

This doesn't prevent the request, but I like it as an alternative. – QasimK Apr 23 '18 at 21:15
1

Sure, if you can control the web server. – jbruni May 09 '19 at 21:19

Parth Patel · Answer 6 · 2021-10-05T05:15:09.773

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

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 :)

score 6 · Answer 7 · answered Jul 09 '11 at 19:12

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"

Don't forget to enable the module: ~ /etc/apache2 # a2enmod expires && service apache2 restart — Sino Boeckmann, Jan 08 '17 at 20:31

score 6 · Answer 8 · edited Apr 07 '21 at 11:14

6

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).

edited Apr 07 '21 at 11:14

safrazik

1,379
9
13

answered Mar 25 '21 at 12:59

Tarik Huclaslun

69
1
2

[Also](https://stackoverflow.com/a/19891866) `data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=` – a55 Sep 27 '21 at 23:39

score 5 · Answer 9 · answered Nov 12 '13 at 15:32

5

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/

answered Nov 12 '13 at 15:32

Marcio Mazzucato

8,343
6
62
76

The article linked to from here is very good, but I believe the syntax in the response is incorrect. – Erica Kane Jan 15 '16 at 20:07

score 3 · Answer 10 · answered Dec 08 '19 at 18:57

3

In Node.js,

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

answered Dec 08 '19 at 18:57

Visv M

325
2
12

can you elaborate? Where in node? – john ktejik Sep 11 '20 at 16:00

score 3 · Answer 11 · answered Feb 18 '21 at 21:42

3

Personally I used this in my HTML head tag:

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

answered Feb 18 '21 at 21:42

Azrail

39
6

score 2 · Answer 12 · answered Apr 20 '22 at 09:50

2

Just make it simple with :

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

It displays nothing!!!!

answered Apr 20 '22 at 09:50

Israel Manzi

21
2

score 1 · Answer 13 · answered Oct 18 '21 at 04:53

1

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

answered Oct 18 '21 at 04:53

Petruza

11,026
24
79
128

score 0 · Answer 14 · answered Aug 01 '16 at 04:19

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!

score 0 · Answer 15 · answered Jun 26 '19 at 18:50

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

pbaranski · Answer 16 · 2022-05-24T03:52:12.730

0

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

edited May 24 '22 at 03:52

answered Feb 05 '22 at 05:42

pbaranski

20,172
17
93
109

As cool as this is it adds unneeded clutter to your code. Israel Manzi example is likely best – JSON May 26 '22 at 20:30
1

@JSON I'm a tester and sometimes I need to prototype very fast to get proper results. That's why I posted this solution and someone already liked this answer - this is perpouse of SO to give people choices and they can choose what suits best their problems. SO is for downvotes to, so thanks for the feedback! – pbaranski May 27 '22 at 04:58

score -1 · Answer 17 · answered Oct 24 '21 at 20:45

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

score -15 · Answer 18 · answered Jan 30 '12 at 19:31

-15

You could use

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

That way it won't actually be requested from the server.

answered Jan 30 '12 at 19:31

josh

1

1

That seems like it may cause some browsers to throw scary error messages - also you'll have to watch out for using that trick on pages that might be served over HTTPS. – Brighid McDonnell Jan 30 '12 at 19:48
6

Using about:blank is better. – Luke May 20 '12 at 16:32

How to prevent favicon.ico requests?

18 Answers18

Linked