Favicon Not Showing Up [Solved]

Is favicon not showing up on your website?

Don’t worry, you’re not alone.

Every website owner or admin encounters this issue more often than you might think.

Even though the favicon is a crucial aspect of every website that adds a touch of personality and brand identity, sometimes it might decide to play hide-and-seek.

And it can be annoying.

However, luckily, fixing this issue isn’t rocket science if you understand the reason behind this problem.

To make it easier for you, in this post, we’ll show you some of the reasons why favicon is not showing up on your website and how you can easily fix it by taking some precautions and following some easy steps.

So, without wasting any further time, let’s dive right in.

What is a Favicon?

A favicon is a square-shaped icon representing your website identity in a web browser or search results.

Simply put, the icon you can see at the browser’s address bar beside each website you visit is called “Favicon.”

Back in 1999, Microsoft first introduced favicon when they launched Internet Explorer 5 to help navigate through the bookmark section of the browser efficiently.

Later, most web browsers adapted the same and started showing favicon as a unique symbol of a website to help users navigate between multiple websites easily.

You can use your brand’s logo as a favicon or even create a separate icon that is somewhat similar to your branding.

7 Reasons Why Favicon Not Showing Up

There could be many reasons why favicon is not showing up on your website.

And before you go out to fix that, you have to first understand what is causing the issue and why it’s happening in the first place.

It’s hard to fix something without knowing the cause.

Here are some of the possible reasons why favicon not showing up on your website even if you have installed it correctly.

1. Browser Caching Issue

You might find it funny, but one of the common reasons why favicon is not showing up on your website is because of caching issues within your browser.

Yes, even if your favicon is properly correct and other users can see it clearly, sometimes you might notice the favicon is not appearing on your device.

This usually happens when you upload a favicon for the first time on a website or if you have recently changed the favicon. 

Even though the Favicon file gets uploaded to the server, the browser might be showing you the older version of your website without the favicon because the older version of the website was stored inside the browser’s cache.

Thankfully, you can quickly eliminate this issue by clearing up your browser cache and reloading the page once again.

2. Wrong File Format

Another reason why the favicon is not showing up on your website is maybe because you have uploaded the Favicon icon in the wrong file format.

ICO, PNG, JPEG, and SVG are some of the most common formats supported by the majority of web browsers.

Among all of these formats, ICO is supported by all web browsers, but Microsoft Edge does not support PNG format.

That’s why, to be safer, you should only try using the ICO file format and avoid every other file format like webp or gif that we have not mentioned above.

3. Incorrect File Path

Incorrect file path is another common reason behind the favicon not working issue.

If the favicon doesn’t show up on your website even if you have cleared your browser cache and uploaded it with the proper file format, maybe you have given the wrong file path while uploading the icon.

Make sure to properly mention the file path inside your CSS code, including the folders (if you have uploaded the icon inside your image folder).

4. Wrong Favicon Dimension

If your favicon is not following the appropriate dimensions, it will not show up on your website.

Google and web browsers have certain guidelines regarding favicon that everyone needs to follow.

One of the key points within that guideline is the proper dimension of the Favicon icon.

Your favicon must be a multiple of 48px square at any cost to get supported by Google.

The Favicon icon is used in different locations throughout your website, and if possible, ideally, it should have different sizes for different locations.

However, if you’re just starting out as a one-man army, it’s just not worth the time.

So, in that case, you can use the most widely used and optimal Favicon size, which is 16×16 pixels.

Later, Google will automatically resize it according to the viewpoint whenever needed.

5. The Favicon File is Hosted on Local Servers

Most popular web browsers like Chrome, Safari, and Microsoft Edge do not support Favicons hosted on local servers.

For your Favicons to become visible to every user, the file should be hosted on a web server and should be easily accessible to crawlers.

6. Robot.txt Blocking The Favicon 

If your favicon isn’t showing up on Google search even if it’s showing in your browser’s address bar, it means Google has not been able to crawl your Favicon image.

And it can generally happen due to robot.txt blockage.

To check if Robot.txt is blocking Google from crawling your Favicon image, head over to the page indexing reports inside the Google search console.

And here, you can clearly see if Google is blocked by robot.txt to access your Favicon file.

7. Syntax Error

The last but yet another overly common issue that might be causing the favicon to not work properly is a simple syntax error within your HTML code.

Double-check the HTML code and see if there are any quotes, commas, or spelling errors.

How to Fix The “Favicon Not Showing Up” Issue

As we have mentioned earlier, to fix the “favicon not showing up” problem, you should first understand the root cause of the issue.

Once you identify the issue, it’s super easy to fix it.

However, to make it easier for you, here are some of the things you can try to fix the favicon not showing problem within a couple of minutes:

• Clear your browser cache.
• Preferably use ICO file format for the Favicon icon image.
• Ensure the dimension of your Favicon image is multiple of 48px square.
• Check and fix any syntax errors within your HTML code.
• Do not host your favicon on local servers.
• Do not block Google crawlers from crawling your Favicon image using robot.txt.

If you follow these tips religiously, your favicon will instantly start showing up in your website.

FAQs Related to The “Favicon Not Showing Up” Issue

How long does it take for a favicon to show up?

Practically, the favicon should start showing up almost immediately once you set it up on your website. However, due to caching problems with your browser, it might take some time to show up.

Why is my favicon not refreshing in Chrome?

Your favicon is not refreshing in Chrome because of a caching issue. Try clearing the cache of your Chrome browser and revisit your website once again.

Why even when I delete the favicon it still shows on the website?

Your website might be showing you the older version of your website because it was stored inside the cache folder. Clearing up the cache will fix the issue on its own.

Is favicon stored in the cache?

Yes, just like any other website element, favicon is also stored inside your browser’s cache folder.

Can I use PNG file as favicon?

Yes, you can use a PNG file as a favicon, but keep in mind that Microsoft Edge does not support the PNG file format for favicon.

Conclusion

So, we hope you have found a clear answer for why favicon not showing up on your website.

The favicon not working is a quite common issue that every webmaster faces at least once in their lifetime.

However, by following and troubleshooting the reasons we have outlined in this post, you can easily fix the issue within a few minutes and bring the Favicon icon back to your website once again.