Favicon 404 ошибка

Chrome — source code tab — I see the following in console:

GET http://localhost/favicon.ico 404 (Not Found)

Inside head tag I have the following:

<link href='ico/favicon.ico' rel='icon'>

Click on the above link — opens a new tab with the ico image.

Also tried — without succes:

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

Click on the above link says- doesn’t exists.

Also I noticed the error message appears only at start and after pressing Ctrl F5, and after pressing F5 only — it dissapears.

Anyway, there is no icon on the browser’s tab in any case.

On page tab — console is empty.

Other browsers not tested.

So what is the right way to have an icon and how to avoid the above message?

I quit trying to make sense of why some modern web browsers request resources that are not mentioned on a web page long ago, such as Firefox seeking a favicon icon (favicon.ico) religiously in your website’s root folder, or iOS browsers looking for almost a dozen different apple touch icons (apple-touch-icon-…) with different sizes, as if the Internet will collapse if they are not found. Instead of wishing for web browsers to behave the way I desired as a webmaster, I decided to play the game by its rules and looked for ways to get rid of annoying errors of this kind, even though it meant unproductive additional work.

Briefly speaking, the 404 HTTP status code is triggered when a web browser (client) requests a resource (a page, file, image etc.) on a website (web server) but that resource does not exist or cannot be located correctly. For example, considering our case, if the web browser sends a request to a favicon image file located at,

https://www.tutsandtips.com/favicon.ico

but such a file does not exist, it will create a 404 error which will be sent back to the browser (it won’t be displayed to the user in browser window since it’s not the same as a page not found error or server not found error), as well as logged in the access logs of the website like the following:

«GET /favicon.ico HTTP/1.1» 404

This error log will also be displayed in your traffic stats file (e.g. AWStats), where 404 errors are listed.

Why is «Favicon.ico Not Found» Error Triggered Even Though There is a Favicon Image on My Website?

To answer this question, we need to understand how some web browsers work.

A 404 error being generated for a supposed-to-exist but not-existing file is totally understandable, in fact it is what must happen (and what happens) in order to give a clue to the website administrator to fix such errors. For example, if you forget to upload an image that is linked to from one of your pages, loading that page will (and should) cause a 404 error for that image. Hence, when you see that error in the log, you can upload the image.

What I explained above is the natural and expected behavior of a web browser; however, some browsers do create resource requests (GET) even though they are not linked to or mentioned on your web page. To clarify this, let’s assume you created a favicon image for your website, named it as icon.png and uploaded it to the following location via a free FTP software or via File Manager of your hosting:

https://www.tutsandtips.com/images/icon.png

And you linked to it using the HTML <link> tag, as it is how it is instructed to add a favicon to your website in the HTML specification.

<link rel=»icon» href=»/images/icon.png»>

TIP: You can also refer to our more detailed tutorial about how to add a favicon icon to your website.

Now, while some browsers respect your choice of name and location for your favicon icon (you should be able to name it whatever you want and place it wherever you want, right?) and find it at your specified place with no issues, some other browsers such as Firefox, in an incomprehensible way, insists on seeking «a» favicon icon which is named as favicon.ico and located in the root directory of your site.

/favicon.ico

If it can’t find that file there, then it will cause a 404 error to be generated and logged. This may be a small, negligible thing for some webmasters but for me and I am sure for you too since you are reading this post, it is unacceptable because 1) the browser makes a request for a non-existent file that is not linked to from the page, 2) it causes a 404 error to be generated and logged which keeps you busy while checking your logs, 3) it consumes bandwidth by grabbing the 404 file since it can’t find the favicon.

For the above reasons, I decided to get rid of this error once and for all and came up with the following solution.

The Solution for 404 Favicon Not Found Error

The solution is not the most efficient but it is simple enough and it will help you never see a 404 error for a non-existent favicon.ico in your logs again.

Here are the steps:

STEP 1: Create a .ico file and name it as favicon.ico.

You can use one of the free online graphic design programs and image conversion tools to help you while creating favicons. The favicon file dimensions can be anything from 16×16 pixels and higher; bigger images will look better on mobile phones and tablets when your site is bookmarked like an app. Also don’t forget to optimize the file to save bandwidth. Not recommended tip: If you don’t care about having a favicon, simply create an empty text file -0 bytes- and save it as favicon.ico.

STEP 2: When the favicon icon is ready, upload it to your website’s root directory. The root directory is where the index file (index.html, index.php etc.) is located.

https://www.tutsandtips.com/favicon.ico

STEP 3: Open a web browser and make sure your favicon is accessible by typing its URL (simply replace the domain in the above URL) into the address bar and opening it.

If you can view your favicon, that means it is ready for visitors and browsers. From now on, you will not receive any 404 errors for the favicon image.

TIP: Here are some other solutions to common errors that you might be interested in:
White Question Mark in Black Diamonds Error
No Video with Supported Format and MIME Type Found Error

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.

Description

While having a ./src/favicon.png works like a charm by adding the relevant rel="icon" head links, browsers keep trying to download favicon.ico at the root level of the website…

This throws a 404 error, which actually downloads the 404 html, whatever its size.

Steps to reproduce

Open your Gridsome website in a browser (say Chrome) and open the console.

Expected result

No 404 error, because a favicon.ico file would be there, be it a default empty file, or the automatically .iconized version of the ./src/favicon.png file.

Actual result

A 404 error, seen in console as :

GET http://localhost:8080/favicon.ico 404 (Not Found)

Environment

Libs:
- gridsome version: 0.7.5
- @gridsome/cli version: 0.2.3


Browser:
- [X] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX