Favicon ico ошибка

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

Firstly, this error
is saying you that, “Hey! You are missing a favicon for your web
page”. In case, you don’t know what is a favicon? It’s a little
icon that you see when you open a website(like, Google), on your tab
along with the title of the webpage.

Example of a favicon

Secondly, this will not effect your code at all! Yeah, but if you are going to take your web project to production level, then you will need to have a favicon, because such kind of errors in the console and a missing favicon on the webpage might look a bit unprofessional and can effect the user-experience on your website. But if you are not going to take it to the production level, then you can follow this solution:

How to Fix: 404 (Not Found) favicon.ico?

Solution(if your
project is not for production level): To remove the error from the
console, you have to add some code in the <head></head>
tags of your html code. The code is given below:

<link
rel=“shortcut icon” href=“#”/>

This
will solve your problem and you will no longer see the error in the
console!

How to Stop favicon.ico Error?

But
if you are taking your webpage to the production level then, you must
add a favicon to your webpage. Here, you can use any image as
a favicon, but we recommend you to create one for good appearance of
your website(You can create one from here!).

Then, add the
following code inside the <head></head> tags of your html
code:

<link
rel=“shortcut icon” href=“[location of your favicon]”
type=“image/x-icon”/>

Note: Add the location of the favicon at the place of [location of
your favicon] in the above given code.

By this, you will add the favicon to the webpage and your problem
will be solved and you and your user will not get this error any more
in the console!

How to Get Favicon?

You can create a good looking favicon for your webpage within a few seconds, follow these steps:

Using Text

By this way you can generate a favicon using text!

Using Image

Using Emoji

Conclusion

So, this was how you can Fix: Server Responded With a Status of 404 (Not Found) favicon.ico error. If you are facing any problem, then feel free to write it down in the
description! We will try our best to solve your problem! Have a nice
day! Happy Coding!