How to Fix a WordPress Favicon or Site Icon Not Showing?

How to Fix WordPress Theme Not Uploading or Installation Failed?

Is your WordPress favicon not showing? When you have your site open, on your browser tab, does it still show the WordPress logo?

A website’s favicon can be considered one of the most important elements of a well-maintained site. Like your logo, it serves as an identifier for your visitors. It also serves as an icon on mobile devices if they bookmark your site on their phones.

I don’t know about you, but my Chrome browser is home to thousands of tabs (ok, not thousands, but you get my point). At any given time, I am only able to see the favicons of the tabs and won’t even get to read the whole site name.

WordPress Favicon or Site Icon That's Not Showing

In this example, we all know Google’s favicon, right? The other five, not so much. These 5 open tabs are all articles about “blogging”. According to Hubspot, a favicon makes your site look professional and it can impact brand awareness and user experience as well.

Going back to the example, if you are researching and you have a lot of open tabs, chances are, those that have the WordPress logo as a favicon, or the earth logo 🌎 (Chrome’s default favicon for sites that don’t have one) won’t stick to your mind. You won’t remember what sites those are.

Therefore, having the WordPress or the earth logo in place of your logo when your site is loaded, may not give a good impression to the user. 😕

There are several reasons why your WordPress website’s favicon isn’t showing up, which we’ll discuss further along with the guide. The reasons range from a simple fix like clearing your cache to more complex ones that require basic knowledge of codes. If codes scare you, don’t worry, we’ll provide the simplest solution in this guide, in case your problem lies there (let’s hope it doesn’t! 😇)

Thankfully, the most common way to upload a favicon on WordPress is through the Customizer menu (no codes!). If you just did that and your favicon is still not showing, read on.

edit or add wordpress favicon or site icon through customizer

 

edit or add wordpress favicon or site icon through customizer

In this guide, we’ll look at the possible reasons why your WordPress favicon or site icon isn’t showing, and 5 fixes to try.

Let’s jump right in! 👍🏻

 

 

Why is My WordPress Favicon or Site Icon Not Showing?

Let’s start this guide by figuring out the root of the problem. To effectively give a proper solution, you have to determine what causes the problem in the first place.

The most common reason why favicons don’t show up on your WordPress website is because of your browser’s cache. Your browser may be showing you a cached version of your site. Hence, this is a version that doesn’t include your newly uploaded favicon yet. Furthermore, another reason may be because of the filename of the image that you were uploading. WordPress may pull up a wrong image that is larger and can’t show the favicon.

More complex reasons are code-related. Read on to see the possible solution depending on the root of the problem.

 

5 Fixes When Your WordPress Favicon or Site Icon Is Not Showing

Let’s go through the problem and solutions one by one. If your problem is not listed here, feel free to comment so we can add a solution that can work for you. 😉

 

1. Clear the Web Browser Data

The most common reason why favicons don’t work is the browser’s cache. No matter what device or browser you are using, it is probable that your browser is showing you a cached version of your site.

This is common for most browsers to make sure it can load a site faster. However, if the saved cache does not have your favicon yet, the browser will persistently show the old version no matter how many times you hit refresh.

To fix this, head over to your browser settings to clear your Web Browser Data. For this, the steps and settings may vary depending on which web browser you’re using. Scroll down to see the steps for Google Chrome, Firefox, and Safari.

 

On Google Chrome

  1. First, on a desktop, open Chrome.
  2. After that, click the three dots on the upper right and click Settings.
  3. Under Privacy and Security, click Clear browsing data.
delete web browser data, cache and cookies on Google Chrome to fix wordpress favicon or site icon not showing

 

  1. Next, choose the time range and make sure you check cached images and files.
  2. Finally, click Clear data.
delete web browser data, cache and cookies on Google Chrome to fix wordpress favicon or site icon not showing

 

On Firefox

  1. First, on a desktop, open Firefox.
  2. Next, click Menu and choose Options.
  3. Then, click Privacy & Security.
  4. Lastly, under the Cookies and Site Data section, click Clear Data.
delete web browser data, cache and cookies on Mozilla Firefox to fix wordpress favicon or site icon not showing

On Safari – Mac

  1. First, on Mac, open Safari and then click on the drop-down menu and choose Preferences.
delete web browser data, cache and cookies on Safari macOS to fix wordpress favicon or site icon not showing
  1. After that, click Advanced, select the Show Develop checkbox.
delete web browser data, cache and cookies on Safari macOS to fix wordpress favicon or site icon not showing

 

  1. Next, click the Develop drop-down menu.
  2. Finally, click Empty Cache.
delete web browser data, cache and cookies on Safari macOS to fix wordpress favicon or site icon not showing

 

 

2. Rename the Image File

One reason why your WordPress favicon isn’t showing is due to the filename of the image you uploaded.

Make sure you name your file properly and it’s not titled “untitled-image.jpg”, “IMG_1245.jpg”, or anything generic.

Sometimes, if all the images you upload on WordPress are not properly named, there might be duplicates that you won’t notice. When this happens, WordPress may pull the wrong image and not the favicon image that you just uploaded.

 

 

3. Resize the Image

Favicon sizes can range from 16×16 pixels to 180×180 for retina-enabled devices. If you upload a landscape, horizontal, or a large image, WordPress won’t crop it for you. It will just assume that your site has no uploaded favicon.

Different devices show favicons depending on their display properties. As such, your ideal favicon size may depend on the device that your target audience may be using. Here are some ideal Favicon image sizes:

16×16: Browser
32×32: Taskbar shortcut
96×96: Desktop shortcut

152×152: iPad touch
167×167: iPad Retina touch
180×180: iPhone Retina

128×128: Chrome Webstore
196×196: Android Chrome
228×228: Opera Coast

 

What’s the best size for a favicon?

Since each device shows favicons differently, there’s no exact answer for what size is best. You can note that a 16×16 pixels favicon may appear stretched on other devices.

Therefore, to prevent this, it’s better to create a bigger-sized favicon or use a favicon generator to generate multiple sizes based on what you need.

 

Note: There are WordPress themes that let you upload different favicons per device that it will be shown on.

 

 

4. Syntax Error

The language of computer programming is a bit of jargon for someone who does not understand codes. Codes are basically numbers, letters, and symbols. Syntax, on the other hand, are rules that define the structure of the codes. In basic terms, a syntax defines what should be pulled out and showed on the front end for the users.

In this case, the syntax or the source code being used is the <link> element that imports an image and uses it as a site icon/favicon.

Given that, if there’s even a slight error in the syntax of your favicon, then it won’t execute. So, your site’s favicon won’t show up to your users, since WordPress might just assume that you don’t have an uploaded favicon.

If you generated your favicon using a generator, then you may be given a .ico file. Your code in the header should look like this. (look for the <head> tag in the HTML)

  • <link rel=”icon” href=”favicon.ico” type=”image/x-icon” />
  • <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />

 

Note: Some users report that removing “shortcut” and just using “icon” in their code fixed their favicon issue on WordPress.

 

On the other hand, if you are using a JPG or PNG file, make sure you check the image type path.

  • <link rel=”icon” type=”image/gif” href=”favicon.gif” />
  • <link rel=”icon” type=”image/png” href=”favicon.png” />

 

Additionally, make sure to check each character, since even just one wrong character in your code can result in a syntax error.

 

 

5. Wrong Path

Google Chrome and Safari browsers don’t show favicons that are saved on your local computer. If you are checking on these browsers, make sure your favicon is uploaded to your site’s root folder.

For this, you can find the image’s File URL, by selecting it in the Media Library.

check the image File URL if wordpress favicon or site icon is not showing

Then, you can access the favicon image file through your hosting’s Cpanel, and then file manager.

check image file through Cpanel and file manager if WordPress favicon or site icon is not showing

You can use the File URL from before to navigate to the specific location of your image file. Either click through the corresponding folders or you can search for the file name using the Search function.

Furthermore, check if the string to load your favicon is in the <head> part of your site. While some browsers may show your favicon even if the string is placed on the <body> part, Chrome won’t.

 

 

Conclusion

To sum things up, this guide shows you 5 quick and easy solutions when your WordPress favicon or site icon is not showing.

Ultimately, it can be observed that when your favicon is not showing, you first have to check if your browser is showing you an older cached version. Clear your cache regularly, if that helps.

In case it doesn’t work, that’s the time you check the image itself. Check the size, filename, and even its extension. After that, if it still doesn’t work, then you can check the path, the code, and your Cpanel.

Furthermore, creating a favicon is like creating a logo for your site. It’s not something that you can do carelessly and just upload the next image you have on your gallery. It involves careful design and planning. You have to remember that your favicon gives your site a professional vibe, ensuring that your users get to have a great experience on your site.

With that said, don’t let all that planning and designing of your favicon go down the drain if some browsers don’t show it.

Moreover, if you’re having problems with your WordPress favicon not showing, drop us a message on our Services Page. It will be our pleasure to assist you. 🤗

Lastly, how about joining the conversation and telling us what you think in the comments:

  • Have you encountered the problem of your WordPress website’s favicon or site icon not showing up?
  • Did you use any of the solutions above?
  • Do you know of other solutions that we can add to the list?

Feel free to share this post on your social media or to anyone who has a problem with their WordPress favicon or site icon that’s not showing.

 

Total
0
Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts
Total
0
Share