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

Question

Synopsis

After creating a simple HTML template for testing purpose, with no favicon.ico, I receive an error in the console "Failed to load resource: the server responded with a status of 404 (Not Found)" | "http://127.0.0.1:47021/favicon.ico".

I am trying to figure out where this error is coming from and wondered if someone had any ideas to point me in the right direction.

My HTML page looks like this:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Simple JavaScript Tester 01</title>
</head>
<body>

<script src="script.js"></script>
</body>
</html>

When I run this page in Chrome browser and open the console, I see the error message "Failed to load resource: the server responded with a status of 404 (Not Found)" | "http://127.0.0.1:47021/favicon.ico". I am running this on a local IIS server. I see this same error message each time I create a new page.

Is it possible this error is coming from another page on my IIS server that I am unaware of?

POSSIBLE duplicate of http://stackoverflow.com/questions/31075893/im-getting-favicon-ico-error — Nalin Aggarwal, Aug 25 '16 at 16:00
@Nalin Aggarwai I read that answer prior to posting my question, but it did not help me resolve my problem. I am not using Netbeans IDE and I do not have any reference to a favicon.ico on my page. — John Smith, Aug 25 '16 at 16:05
It is essentially a bug in Chrome's developer tools. The request for favicon.ico has not been initiated by the page itself, and its non-existence is not a fatal error, either. So it simply shouldn't be shown at all in the console. — Seven Systems, Jan 24 '20 at 18:34

pollux1er · Answer 1 · 2020-09-10T08:38:13.813

65

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

edited Sep 10 '20 at 08:38

answered Mar 27 '17 at 09:11

pollux1er

5,372
5
37
36

5

I won't downvote this but this is a bad solve. Your website should have a favicon. – Jack Marchetti Mar 06 '19 at 03:02
7

in 2019. this does not work for me in Chrome... which still makes a GET request for favicon – joedotnot Apr 09 '19 at 10:18
1

I'm using Chrome and it disappeared from the developer tools console after I added this. – nCardot Nov 17 '19 at 07:35
2

This does not work for me in Chrome in 2020. See the answer by CostZ instead for a working solution. We're using a web browser embedded onto a physical device. The user in not aware that it's in a browser and so no favicon is required or wanted so that there is one fewer files for the device to load. – Simon Gymer Sep 06 '20 at 16:13
I believe the best way to correct this error is to use `%PUBLIC_URL%/` prefix in the `href` attribute of your link tag. it will look something like this: `` The problem with this solution is that you won't have e favicon if you use it. – str8up7od Nov 11 '20 at 20:50
This is a good solution for my case. I was only creating a JavaScript test page and not a website. – John Smith Dec 27 '21 at 18:12

score 30 · Answer 2 · answered Aug 25 '16 at 16:16

30

Because your browser always looks for the favicon.ico even if you don't specify it within your HTML.

So I'd suggest just creating one and placing it in the root of your website.

answered Aug 25 '16 at 16:16

Jack Marchetti

15,536
14
81
117

makadus · Accepted Answer · 2016-08-25T16:17:10.300

19

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

edited Aug 25 '16 at 16:17

answered Aug 25 '16 at 16:03

makadus

396
2
10

2

This answer lead me to resolve my issue. I forgot that I had the default site in IIS pointing to a site that I have in development. I changed the Default Web Site back to wwwroot folder and added a simple html page as default. This resolved my issue and I did not need to add a favicon.ico. Thank you for your suggestion. – John Smith Aug 25 '16 at 17:11

score 13 · Answer 4 · answered Jul 05 '20 at 15:12

13

You can add this to your <head> tag

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

Works for me

answered Jul 05 '20 at 15:12

CostZ

139
1
6

David Fawzy · Answer 5 · 2019-06-12T11:35:55.577

3

   <link rel="shortcut icon" href="~/favicon.ico">

You can't actually stop browsers requesting the image. However if you do have a favicon it can be cached by the browser which can reduce the number of requests coming in. so if you have the favicon in the root folder of the application the link above should work

edited Jun 12 '19 at 11:35

answered Jun 11 '19 at 14:44

David Fawzy

1,056
15
17

score 2 · Answer 6 · edited Sep 15 '21 at 08:33

2

It's nothing but an icon on your tab bar. This is the main point. You can also use any icon for your local file. However, the format for the image you have chosen must be 16x16 pixels or 32x32 pixels, using either 8-bit or 24-bit colors. For more information please read this documentation: https://www.w3.org/2005/10/howto-favicon.

edited Sep 15 '21 at 08:33

ZygD

22,092
39
79
102

answered Sep 15 '21 at 08:30

afzzal__mahmud

21
2

score 1 · Answer 7 · answered Nov 19 '21 at 09:22

It is an old issue apparently, but since I'm just starting to learn coding...

I had the same favicon issue, both with FF and Chrome and unfortunately, none of the suggestions here helped.

Even when I have the "javascript.ico" file in my folder

<link rel="icon" href="javascript.ico" type="image/x-icon" />

this still wouldn't be able to find the icon, so the problem remained.

However, the following helped remove this error message:

just change the ".ico" extension of, both your file and in the HTML code into for example ".png"... problem solved, icon found.

<link rel="icon" href="javascript.png" type="image/x-icon" />

And after doing this, even if you change back the extension into ".ico", it'll still work and the error won't return.

score 0 · Answer 8 · answered Feb 11 '21 at 16:15

I have faced the issue with using Angular. I have moved favicon.ico from src folder to assets/img and changed href in link tag in index.html:

<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico">

Also I have removed src/favicon.ico from angular.json builder options.

score -1 · Answer 9 · answered Apr 03 '22 at 05:54

-1

It seems pretty lame, but the thing that works for me is that I just reload the page and the browser doesn't show any error.

answered Apr 03 '22 at 05:54

Soham Mafidar

63
8

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 03 '22 at 06:43

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

9 Answers9

Linked

Related