A favicon is a small icon that appears in the browser’s title bar. Browsers use this icon to display a tab when pinning a web page. Some search engines also show the icon in search results, making it a branded icon for websites. Google is a good example that most of us can find the simple G icon for the Google Search website. However, there are many reasons why your WordPress icon might not show up in browsers like Google Chrome. If you’re struggling to fix the problem, here are a few options you can try.
WordPress favicon in browser
The following shows how the icon will appear in the Google Chrome desktop browser.
When you pin a tab, Chrome will use the icon for that tab, as shown below.
Chrome also shows a cached icon in the address bar when you try to open a site. Similarly, you can see the favicon or favicon of the site in the Chrome mobile app by viewing all your open tabs.
Almost all browsers on both desktop and mobile also use the icon as a shortcut on the new tab page. Please note that Google used to show the site’s icon on the results page. However, Google removed the favicon from the latest search results design.
Fix WordPress Favicon Not Displaying in Google Chrome
If you can’t see your website favicon in Google Chrome or any other browser, follow the solutions below to fix the problem.
1. Check your WordPress Favicon settings.
WordPress allows you to add an icon to your site. After logging into the admin panel, go to Appearance > Customization > Site Identity and upload your icon image. Unlike standard icon image sizes, a WordPress site icon must be 512 x 512 pixels.
You can upload a .PNG image for your website favicon, and after uploading the image, check if it displays correctly in the browser when you are in the admin panel. If everything is working correctly, open the live site and see if the image appears in the title bar.
2. Remove your theme’s favicon.
Many commercial themes offer a customizable theme panel for logo and icon uploads. If you are already using WordPress’ default site icon feature, be sure to disable your theme settings for the icon. This will help avoid duplication of using the same function in different places, potentially confusing a browser that doesn’t display the icon.
3. Use the Favicon plugin.
The recommended icon size to display in the browser title bar is 16 x 16, 32 x 32, or 48 x 48 pixels. However, WordPress suggests using 512 x 512 pixels since WordPress uses the same icon as the mobile app icon. Unfortunately, this larger image size can cause issues with displaying it correctly. Since you need images of different sizes for different devices, you can try favicon plugins like RealFaviconGenerator .
- First, install and activate the plugin on your site.
- Go to Settings > Favicon and turn on “Display Update Notifications” to be informed when a plugin update is available.
- Go to Appearance > Favicon and select your favicon in the Media Library. If you don’t have an icon, leave the “Main Image URL” field blank and click the “Create Icon” button.
- This will take you to the developer site where you can create an icon using a different option. We recommend creating an icon using a free icon maker tool and uploading it as your main image.
- Scroll down and click the Generate Your Icon and HTML Code button.
- You will automatically return to the admin panel and see a preview of your images across platforms. You can also instantly inspect your icon to see how it looks in the browser.
When you look at the source code of your site, the plugin will add a lot of link meta tags to support different devices.
You can try this plugin to add a 48 x 48 px favicon.ico file if the default WordPress site favicon doesn’t work on your site. In addition, the plugin will help you create icons for different devices such as iOS and macOS Safari. The only thing is that you need to keep the plugin active in order to permanently use the favicon on your site.
Note: Unlike all other image requests that you may see in the browser developer console, you will not see an icon image request. Therefore, you should see the source of the page and find the link to the icon image in the header meta tag.
4. Loading the icon manually
If the WordPress default icon option doesn’t work and you also don’t want to use the plugin for whatever reason, you can try manually uploading your own icon.
- Prepare your icon image with the free icon maker tool. Make sure the image is in .ico, .gif, or .png format and is 16 x 16 pixels.
- Login to your web server using FTP or use the File Manager app on your hosting panel and upload an icon image to the root directory of your WordPress installation. If you want to upload an image from the media library in the admin panel, make sure the file path is correct.
- When in doubt, open the image file in a browser. You should be able to access the image just like any other image on your site.
- Now go to Appearance > Theme Editor and find your theme’s header.php file.
- Paste the code below into your header.php file along with other meta tags.
<link rel="icon" type="image/png" href="https://www.webnots.com/favicon.png">- It should look like below and be sure to use the correct URL for your icon image.
- Click the Update File button to save your changes.
- If you don’t want to edit the theme 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 make sure the icon is displayed in the title bar.
5. Remove the default hosting icon.
Another issue with the favicon is that many hosting companies such as Bluehost and HostGator use their own favicons on some pages. For example, when you view images or source code, you will see HostGator and Bluehost icons instead of your website icon.
This does not happen with SiteGround and other hosting companies. What you can do is check the root installation to see if there is any icon available and replace it with your own icon. Otherwise, contact your hosting support to see if the problem can be fixed at all.
Another problem may arise due to the location of the icon. On our website, we use a separate subdomain to store all media files. This can create a problem if you don’t include the correct image path in the href value of the meta link. So make sure the path is correct and make sure your image is available in the location you specified to avoid any issues.
6. Favicon in Mac Safari
Some browsers, such as Safari on macOS, work differently. You can enable or disable the icon according to your needs. Check out our article on how to enable the icon in Safari and make sure you enable this setting if your browser offers this feature.
7. Clear the site and browser cache.
If you change the icon or use a different image with the same filename, be sure to clear the cache.
- Clear the cache on your site if you are using caching plugins like WP Rocket, W3 Total Cache, etc.
- Then exit the admin panel and press Control + Shift + Delete on Windows or Command + Shift + Delete on macOS. A pop-up window for clearing browsing history will open. Select the Browsing History and Cached Images and Files options and delete them.
- Now open your site and make sure the correct icon is displayed in the browser.
On mobile devices, you need to go to the settings or history section and clear browsing data.
Final words
Previously, the favicon was used only by browsers. However, the same meta link tag is used for different icons, such as apple-touch-icon for iOS. Therefore, it is recommended to use all the necessary icons on your site and check if they work in the browser and on 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.