Favicon is a small icon that shows in the browser’s title bar. Browsers use this icon to show the tab when you pin the webpage. Some search engines also show the favicon in search results thus making it a brandable icon for websites. Google is a good example that most of us can find the simple G icon indicates the Google Search website. However, there are many reasons your WordPress favicon may not be visible in browsers like Google Chrome. If you are struggling to fix the problem, here are some of the inputs that you can try.
WordPress Favicon in Browser
Below is how a favicon will show in Google Chrome desktop browser.
When you pin the tab, Chrome will use the favicon for that tab like below.
Chrome also shows the icon from the cache in the address bar when you try to open the site. Similarly, you can see the favicon or site icon in mobile Chrome app by viewing all open tabs.
Almost all browsers both in desktop and mobile also use the favicon as shortcut icons on the new tab page. Note that earlier Google Search was showing site’s favicon in the result page. However, Google removed favicon from the latest design of search results.
Fix WordPress Favicon Not Showing in Google Chrome
If you are not able to see the favicon of your site in Google Chrome or in any other browser, follow the below solutions to fix the issue.
1. Check WordPress Favicon Settings
WordPress allows you to add a favicon to your website. After login to your admin panel, navigate to “Appearance > Customize > Site Identity” section and upload your favicon image. Unlike standard favicon image sizes, WordPress site icon needs to be in 512 x 512 pixels.
You can upload a .PNG image for your site icon and after uploading the image check whether it displays correctly in the browser when you are in the admin panel. If it works properly, then open the published site to see if the image is showing in the title bar.
2. Remove Your Theme’s Favicon
Many commercial themes offer custom theme panel to upload logo and favicon. If you are already using WordPress default site icon feature, make sure to disable your theme’s settings for favicon. This will help to avoid overlapping of using the same function in different places which could potentially confuse the browser not showing the icon.
3. Use Favicon Plugin
The recommend favicon size to show in the browser’s title bar is 16 x 16 or 32 x 32 or 48 x 48 pixels. However, WordPress suggests using 512 x 512 pixels as WordPress uses the same icon as mobile app icon. Unfortunately, this larger image size can cause problem in properly showing your image. Since, you need different image sizes for different devices, you can try favicon plugins like RealFaviconGenerator.
- First, install and activate the plugin in your site.
- Go to “Settings > Favicon” menu and enable “Display update notifications” to receive information when there is a plugin update.
- Go to “Appearance > Favicon” section and select your favicon from the Media Library. If you don’t have the icon, leave “Master picture URL” as blank and click on the “Generate favicon” button.
- This will take you to the developer’s website where you can generate a favicon using different option. We recommend generating an icon with free favicon generator tool and upload use that as your master image.
- Scroll down to bottom and click on “Generate your favicon and HTML code” button.
- You will be automatically taken back to the admin panel and see the preview of your images in different platforms. You can also check your favicon instantly to see how it looks on the browser.
When you look at the source code of your site, the plugin will add lot of link meta tags for supporting different devices.
You can try this plugin to add 48 x 48 pixel favicon.ico file if the default WordPress site icon does not work on your site. In addition, the plugin will help you to generate icons for different devices like iOS and macOS Safari. The only thing is you need to keep the plugin active in order to continuously using favicon on your site.
Note: Unlike all other image request that you can see in browser’s developer console, you will not see favicon image request. Therefore, you have to see the page source and find the favicon image is linked in header meta tag.
4. Manually Uploading Favicon
If the default WordPress favicon option is not working and you also do not want to use plugin for any reasons, then you can try manually uploading your own favicon.
- Prepare your favicon image from free favicon generator tool. Make sure the image is in .ico or .gif or .png format with 16 x 16 pixels size.
- Login to your web server using FTP or use File Manager app in hosting panel and upload the favicon image in root directory of your WordPress installation. If you want to upload the image from Media Library in admin panel, make sure to use the correct file path.
- If you have any doubt, open the image file in browser. You should be able to access the image similar to any other images on your site.
- Now, go to “Appearance > Theme Editor” and find header.php file of your theme.
- Paste the below code in your header.php file along with other meta tags.
<link rel="icon" type="image/png" href="/favicon.png">- It should look like below and remember to use the correct URL for your favicon image.
- Click on “Update File” button to save the change.
- If you do not want to edit theme’s file for this purpose, you can use plugins like Insert Headers and Footers and paste the above code in the header section area.
Now open your site and check the favicon is visible in the title bar.
5. Remove Default Hosting Favicon
One of the other problems with favicon is that many hosting companies like Bluehost and HostGator uses their own icons on some pages. For example, when you view the images or view source code, you will see HostGator and Bluehost icons instead of your site’s icon.
This does not happen with SiteGround and other hosting companies. What you can do is to check the root installation to see if there are any favicon available and replace it with your own icon. Otherwise, contact the hosting support to check if this can be resolved at all.
Another problem can occur is due to the favicon location. In our site, we use separate subdomain for keeping all media files. This could create problem if you do not provide correct image path in the meta link href value. Therefore, make sure to provide correct path and test your image is accessible in the location you have provided to avoid any issues.
6. Favicon in Mac Safari
Some browsers like Safari in macOS works differently. You can enable or disable favicon as per your need. Checkout our article on how to enable favicon in Safari and make sure you have enabled this setting if your browser offers this feature.
7. Clear Your Site and Browser Cache
If you are changing the icon or using different image with same file name, then make sure to clear your cache.
- Clear the cache on your site if you are using caching plugins like WP Rocket, W3 Total Cache, etc.
- Next, log out of your admin panel and press “Control + Shift + Delete” in Windows or “Command + Shift + Delete” in macOS. This will open clear browsing history popup. Select “Browsing history” and “Cached images and files” options and delete them.
- Now, open your site and check it shows correct favicon in the browser.
On mobile devices, you need to go to the settings or history section and clear your browsing data.
Final Words
Earlier favicon is used only by the browsers. However, the same meta link tag is used for different icons like apple-touch-icon for iOS. Therefore, it is a good idea to use all necessary icons on your site and test they are working in browser and other devices. The default WordPress site icon may not be sufficient in this case and you need to use your own meta tags or use a theme or plugin that offers this feature.
Leave a Reply
Your email is safe with us.