845

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?

Improve this question
6
  • 7
    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. Commented Feb 2, 2012 at 14:03
  • 63
    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". Commented Apr 19, 2012 at 23:36
  • 71
    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. Commented Jul 29, 2013 at 13:53
  • 3
    how would you justify adding a favicon.ico file to your REST APIs? Commented Mar 27, 2014 at 0:24
  • 1
    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 Commented Feb 6, 2020 at 21:36

13 Answers 13

Reset to default
786

UPDATE 3:

Added the proper MIME type:

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

UPDATE 2:

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

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

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.

ORIGINAL POST:

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:

Improve this answer
Sign up to request clarification or add additional context in comments.

12 Comments

Your UPDATE 2 had issues on Lollipop...adding <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo="> seems to solve the issue.
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?
@Alko That empty PNG file is still invalid. If this is just about creating an data URL that describes an empty file, use: <link rel="icon" href="data:,">
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: stackoverflow.com/questions/4269695/…
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.
|
309

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)
Improve this answer

3 Comments

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 What is the problem that Chrome DevTools have with this solution?
@Flinsch i believe they meant DevTools doesn't have a problem with this solution
63

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.

Improve this answer

10 Comments

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).
I tried in Safari. The favicon request hits the hosting page again.
I wouldn't suggest this, because it makes the browser (Safari5/Mac, maybe others too) to request the webpage from the server twice.
@Manav That is no longer the case in Safari6/Mac.
Use about:blank instead
|
38

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.

Improve this answer

6 Comments

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.
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?
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?
@BT the server or the browser? :D
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.
|
18

if you use nginx 

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

2 Comments

This doesn't prevent the request, but I like it as an alternative.
Sure, if you can control the web server.
16

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

Improve this answer

2 Comments

This does not solve the original question. OP is having issue with regular browsing sessions.
@SamSirry I mentioned that this answer is not for regular devs. This thread shows up in Google results, and for ex-sysadmin and DevOps role people like me who are testing some simple API calls from their browser, this method works and, in my opinion, is simple enough for one-off troubleshooting sessions.
13

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

Improve this answer

2 Comments

Also data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=
Perhaps a little larger, but man does it work! Thanks! I am dabbling with serverless as well, this will cut down on my function calls by 50%.
6

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"
Improve this answer

1 Comment

Don't forget to enable the module: ~ /etc/apache2 # a2enmod expires && service apache2 restart
6

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/

Improve this answer

2 Comments

The article linked to from here is very good, but I believe the syntax in the response is incorrect.
So you get a 403 error (Forbidden) instead of a 404. How is that better?
5

Just make it simple with :

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

It displays nothing!!!!

Improve this answer

Comments

3

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

Improve this answer

1 Comment

error GET data: net::ERR_INVALID_UR on v127 of Chrome. <link rel="icon" href="data:;base64,iVBORw0KGgo="> from another answer is working
2

In Node.js,

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

3 Comments

can you elaborate? Where in node?
@johnktejik This is making the Node server send an HTTP Header. This res object is the response, so anytime you send a new page, a new response to the user, you put your headers first, usually.
No, it would not work. Tested already with Firefox.
2

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>
Improve this answer

2 Comments

How does this differ from stackoverflow.com/questions/1321878/… from a year prior?
@TylerH attributes and visible size I think. Will add some content to make it stand off :D

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.