How to Fix Favicon Not Showing Up in WordPress

Sharing is Caring

Have you ever encountered the frustrating issue of your website’s favicon not showing as expected in WordPress? The favicon, that small but crucial icon visible in browser tabs and bookmarks, is a vital component of branding and user recognition.

When it fails to display correctly, it can adversely affect the overall user experience. In this guide, we will explore common reasons why your favicon might not be showing and provide step-by-step solutions to rectify the issue.

Creating Your Favicon

Before we dive into the solutions, let’s ensure that you have a properly created favicon. A favicon is a tiny image typically in the format of a .ico file, though modern browsers also support .png and .jpg formats. We have already written an article on how to create Favicon. So we believe that you already have a favicon, if you have any doubts you can check our article or you can watch the video guide below:

How To Create Favicon

4 Ways To Fix Tab Icon Not Showing Up in WordPress

Now that your favicon (tab icon) is prepared, let’s address the issue of it not displaying correctly.

Fix Favicon Not Showing – Method 1: Reupload

Sometimes, the favicon may not display due to a corrupted or incorrectly uploaded file. To address this:

Access your WordPress dashboard.
Navigate to “Appearance” and select “Customize.”
Look for the “Site Identity” or “Site Icon” option. Here, you should see the current favicon.
Click on the existing favicon and choose to remove it.
Upload your favicon file again.
Save your changes.

Refresh your website in your browser, and your favicon should now display correctly. If it doesn’t, proceed to the next method.

Want To Add Favicon To the Shopify Website? Check out this video guide.

Fix Favicon Not Showing – Method 2: Clear Cache

Sometimes, browsers cache favicons and an outdated or incorrect version may be stored. To clear the cache:

Open your website in a browser.
Perform a hard refresh by pressing “Ctrl + F5” (Windows) or “Cmd + Shift + R” (Mac). This action will clear the cached favicon.
Check if the favicon is now displaying correctly.

Fix Favicon Not Showing – Method 3: Install SSL

If your website lacks an SSL certificate (https://), some browsers may not display the favicon as a security measure. To install SSL:

Obtain an SSL certificate for your website from your web hosting provider or a trusted source like Let’s Encrypt.
Once installed, update your WordPress site’s URL settings to use “https://” instead of “http://.”
Save the changes and check if your favicon now displays.

Fix Favicon Not Showing – Method 4: Update Theme Code

In some instances, your theme’s code may conflict with the favicon settings. To update the theme code:

Access your WordPress dashboard.
Go to “Appearance” and select “Theme Editor.”
Locate the “header.php” file in the list of theme files and click on it.
Search for the <head> section of your website’s code.
Confirm that the following line of code exists within the <head> section:

<link rel="icon" href="YOUR_FAVICON_URL" type="image/x-icon" />
<link rel="shortcut icon" href="YOUR_FAVICON_URL" type="image/x-icon" />

Replace “YOUR_FAVICON_URL” with the actual URL to your favicon.
Save the changes.

After making these code adjustments, refresh your website, and your favicon should now display correctly.

In conclusion, while a favicon may appear as a minor element, it plays a significant role in your website’s branding and user experience. By following the steps in this guide, you can diagnose and resolve the issue of a favicon not displaying correctly in WordPress, ensuring that your website maintains a polished and professional appearance for your visitors.

Sharing is Caring