25.07.2020

WordPress Design

Methods for Adding Favicons in WordPress and Troubleshooting

Methods for Adding Favicons in WordPress and Troubleshooting

READING TIME: MIN

Table of Content

Here we are, back again with yet another part of our ongoing ‘Favicons for WordPress’ series. Armed with the knowledge of the importance of Favicons, their sizing, and how to create a Favicon in many ways, we’ll now delve into part four.

We’ll now take a detailed look into how to add Favicons using the three methods we outlined last time, as well as how to fix issues with Favicons not showing up.

The ‘WordPress Customizer’ Method

In Part 3, we briefly touched upon how you can locate ‘Site Identity’ in WordPress – under ‘Appearance’, then ‘Customize’ – and click on ‘Site Icon’, if you have a theme that supports Favicons:

Here, you’ll find recommended sizing dimensions for the Favicon, and if you’ve created the icon in advance, you’ve also probably ensured that it is the right size for your purposes.
Click ‘Select site icon’ and import your file to the Media Library. Now you can preview it the way it would look like a tab icon in the browser or client, or how it would fare as an app icon on other devices.
Repeat the same steps if you wish to change your icon at a later date.

The ‘Theme Options’ Method

Word of caution before we begin, this method is even more theme-dependent than the previous one.

What Is the Best Time to Post Your WordPress Content in 2021?

Newer versions of WordPress have the Customizer for managing themes. While some premium themes can be managed through a dedicated options page, it’s quite possible that you’ll still be directed to the Customizer at some point.

The ‘WordPress Twenty Nineteen’ theme is one such example of a theme that has no options page and relies entirely on Customizer. On the other hand, the premium theme ‘Avada’ adds its own menu entry which leads to its separate theme options and lets you add a Favicon with no hassle.

Another advantage to the ‘Theme Options’ method is that there are mobile-specific features built-in as well. However, it goes without saying that each theme will have its own implementation. So in case, you can’t locate the Favicon option, just look through the docs or contact the theme developer.

The Plugin Method – All in One Favicon

Finally, a theme-independent method for us all. This can also be a more effective way of managing Favicons, and you can customize how they work to the device on which they’re being viewed.

Definitely, among the most popular plugins for Favicons, it even has a free (and comprehensive) version that you can locate in the WordPress Plugin Directory. With this plugin, you can access both frontend and backend settings, in addition to the general options.

6 Ways to Make Your WordPress Website More User-friendly in 2022

All in One Favicon’s intuitive UI helps you upload images conveniently, and you can choose from formats to upload in – the GIF, PNG and ICO file types.

Troubleshooting the Missing Favicon

While this isn’t a terribly common issue with Favicons, it still needs to be sorted out if your WordPress website has no Favicon despite you have set one. Here are the usual suspects:

Unsupported Image Format. Browsers these days do support the common image formats like GIF and PNG, but older machines with outdated or older browsers are still on the internet, and they only recognize ICO. The smart move here is to use the ICO format and have your Favicon.ico file(s) available where browsers can find them.
Incorrect Icon Sizing. An advantage of the ICO format is its ability to store all differently sized versions of the same icon and display the right one according to the user’s device. Even so, in the interest of avoiding display errors, you’ll want to upload several Favicon.ico files, each with a different size or resolution.
Favicon Generators. A Favicon generator plugin will usually take care of most errors, but if the Favicon still isn’t visible, you need to ensure you have an updated version of the plugin that plays nice with both your theme and your WordPress version.

WordPress Staging Sites from the Ground Up: Getting it Done Manually (Part 2)

That draws this part of our Favicons series to a close, and we’ll see you next time in the final part with tips and plugins for using Favicons with WordPress multi-sites. Until, then, Happy WordPress-ing!