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.

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?

Tureen

Answer 1

To solve this error just add this reference in :

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

Bipartisan

Great work around. For those wondering, this is a base64 encoded image. Read more on https://mcmap.net/q/21087/-embedding-base64-images – Outing

Er... sorry, but "add this reference" where? – Inhabitant

What's the data though? A broken image? – Ungenerous

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: <link rel="icon" href="data:base64,iVBORwOKGO=" /> – Kicker

Thanks for that @soufian! @vincente should update his answer. Really appreciate the solution everyone! Silly this would ever be an error, considering it's not something the dev specifically told the browser to do. – Chaudfroid

Answer 2

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.

Jehius

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: webmasters.stackexchange.com/questions/34544/…. – Tureen

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. – Banshee

Thanks for the background! – Tureen

Answer 3

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

Barrios

Answer 4

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

Relativistic