How to prevent favicon.ico requests?

Favicon Problem Overview

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?

Favicon Solutions

Solution 1 - Favicon

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

Solution 2 - Favicon

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

Solution 3 - Favicon

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.

Solution 4 - Favicon

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.

Solution 5 - Favicon

if you use nginx

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

Solution 6 - Favicon

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

Solution 7 - Favicon

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

Solution 8 - Favicon

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"

Solution 9 - Favicon

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/

Solution 10 - Favicon

In Node.js,

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

Solution 11 - Favicon

Personally I used this in my HTML head tag:

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

Solution 12 - Favicon

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

Solution 13 - Favicon

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!

Solution 14 - Favicon

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:

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'
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

Solution 15 - Favicon

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

Solution 16 - Favicon

Just make it simple with :

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

It displays nothing!!!!

Solution 17 - Favicon

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

Solution 18 - Favicon

You could use

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

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

Content Type	Original Author	Original Content on Stackoverflow
Question	Daniel Silveira	View Question on Stackoverflow
Solution 1 - Favicon	Diego Perini	View Answer on Stackoverflow
Solution 2 - Favicon	vog	View Answer on Stackoverflow
Solution 3 - Favicon	mlhDev	View Answer on Stackoverflow
Solution 4 - Favicon	Ionuț G. Stan	View Answer on Stackoverflow
Solution 5 - Favicon	Vincent-cm	View Answer on Stackoverflow
Solution 6 - Favicon	Parth Patel	View Answer on Stackoverflow
Solution 7 - Favicon	Tarik Huclaslun	View Answer on Stackoverflow
Solution 8 - Favicon	Anon1	View Answer on Stackoverflow
Solution 9 - Favicon	Marcio Mazzucato	View Answer on Stackoverflow
Solution 10 - Favicon	Visv M	View Answer on Stackoverflow
Solution 11 - Favicon	Azrail	View Answer on Stackoverflow
Solution 12 - Favicon	pbaranski	View Answer on Stackoverflow
Solution 13 - Favicon	J. Declan Young	View Answer on Stackoverflow
Solution 14 - Favicon	ohsoifelse	View Answer on Stackoverflow
Solution 15 - Favicon	Petruza	View Answer on Stackoverflow
Solution 16 - Favicon	Israel Manzi	View Answer on Stackoverflow
Solution 17 - Favicon	AnandShiva	View Answer on Stackoverflow
Solution 18 - Favicon	josh	View Answer on Stackoverflow