Chrome Developer Tools shows favicon 404 error in Brackets LivePreview

Question

I've just started doing Anthony Alicea's "Javascript: Understanding the Weird Parts" course, and he's using the live preview feature of Brackets to demo his code. The first module is a barebones HTML page with a script tag linking to an empty JS file. When I open this page in Brackets and run the live preview, Dev Tools complains the favicon file is missing.

Favicon error in Chrome Developer Tools

I know it's a minor error, but it's annoying: I'd like a clean console when I'm working through the code examples for the course. I'm not sure if it's Brackets or Dev Tools that's doing this. Is there any way I can silence the error that doesn't involve adding a dummy favicon to every section's code folder?

score 38 · Accepted Answer · answered Oct 21 '15 at 07:24

38

To solve this error just add this reference in :

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

answered Oct 21 '15 at 07:24

Vicente Fernández

431
4
2

3

Great work around. For those wondering, this is a base64 encoded image. Read more on http://stackoverflow.com/questions/1207190/embedding-base64-images – Adriano Nov 29 '15 at 08:18
Er... sorry, but "add this reference" where? – Sopalajo de Arrierez May 20 '20 at 08:51
What's the data though? A broken image? – Fabien Snauwaert Jun 10 '22 at 08:07
You might get the console error `net::ERR_INVALID_URL` with this answer. In order to remove that error, remove the ; character from the URL. So it would be like this: `` – Soufian Feb 03 '23 at 18:38

score 7 · Answer 2 · answered Jun 07 '15 at 11:42

7

This is basically how browsers work, they try to look for a favicon.ico in the root folder if none is specified in the meta tags.

There is a simple solution to filter it out though, but it will remove any network related errors from the console (but you can of course still see it in the Network-tab). Click the filter icon (the one that looks like a funnel next to <top frame> in the console window and then check "Hide network messages" and you should be fine.

answered Jun 07 '15 at 11:42

Karl-Johan Sjögren

16,544
7
59
68

OK thanks - this is a pretty annoying behaviour - I'd expect the browser just to show its default favicon if it finds none. In case useful to anybody, this answer elsewhere on StackExchange suggests adding a base64 encoded blank favicon: http://webmasters.stackexchange.com/questions/34544/can-i-instruct-the-browser-not-to-look-for-a-favicon. – And Finally Jun 07 '15 at 17:29
It's mostly a legacy thing. In the dark ages of the internet (Internet Explorer 5) someone thought it a good idea to put a favicon at `/favicon.ico` and then it kinda stuck. It's so widely used today (since it's easy and beginners like easy stuff) that it would "break" a lot of sites if the browsers removed it so it'll probably be around forever. – Karl-Johan Sjögren Jun 07 '15 at 22:13
Thanks for the background! – And Finally Jun 07 '15 at 22:55

Muhammad Awais · Answer 3 · 2016-08-30T18:14:09.623

1

Just add any favicon.ico file in root folder. Just like in image:

edited Aug 30 '16 at 18:14

answered Aug 30 '16 at 18:05

Muhammad Awais

4,238
1
42
37

score 0 · Answer 4 · answered Oct 21 '21 at 17:12

You can save the favicon.ico file and specify its location:

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

or you can add a picture in text format (e.g. Base64):

<link rel="shortcut icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAdUlEQVR4AY3BsQmFQBBAwbeLiaFNmIt2cj3YhYVYhK2IuT2YGsn6WWS5Cw7+jNgPf1AqpolCw0eEkBIcB4jAusI8g5IRwW0bPA9cF0HJmFHoOoJS0bYUlIr7pqBkhgE3jrjzJCiZfcctC67vCQ0fM0JKYEbhBV2WHBhF7w0KAAAAAElFTkSuQmCC" />

or from some external service:

<link rel="shortcut icon"  type="image/x-icon" href="https:example.com/favicon.ico />

Chrome Developer Tools shows favicon 404 error in Brackets LivePreview

4 Answers4