How to Fix “404 Favicon Not Found” Error
Have you ever stumbled upon the famous "Favicon not found" error while checking your website's 404 error logs? Getting this error even though you have a favicon image is annoying, isn't it? This post will explain how to get rid of that error from your logs for good.
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 16x16 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