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?

Answer 1

To solve this error just add this reference in :

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

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.

Answer 3

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

Answer 4

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