Favicons are found in all popular websites and browsers. It is simply an icon that is associated with your website. It is usually displayed in the address bar of browsers and also in the bookmarks bar. It is an extremely useful feature to implement on your website. Many website owners tend to overlook the importance of a favicon. A favicon helps you to improve your brand identity and the user experience as well.

If your site is powered by WordPress, you can use a plugin such as All In One Favicon to add a favicon to your website. Although you can do this via the WordPress customizer, the features there are limited. For example you will need at least a 512 x 512 px size image. The customizer does not also support different file formats. With the plugin you can use .jpg, .png and .ico images. The plugin also allows you to define different favicons for the backend and the frontend.

Why You Need to Set a Favicon in WordPress

Website visitors tend to bookmark pages they want to revisit. Obviously it is much easier to look through images (favicons) than struggle with reading the full website names. It helps in improving the user experience by allowing the users to do a fast visual search.

Here are a few popular examples of favicons

Examples of bookmarks with favicon

Can you recognise these? As you can see these have been bookmarked and are easy to recognise. The first one being the WhatsApp web bookmark, the second one YouTube and the last one Gmail. A website without a favicon will display with the icon of a browser. This will make your users struggle to find you amongst their bookmarks.

Example of bookmark without favicon

The last bookmark above is an example of the generic browser icon, definitely you cannot recognise what website that is. This means if you are not using a favicon, even though users may bookmark your website, they may not be able to easily recognise it.

Favicons also come in handy when users have multiple tabs opened in the browser. As users open more tabs the site title starts to get hidden. The only way users can then recognise a website is through the favicon. The site title tends to keep shrinking as more and more tabs get opened.

Favicon with multiple open tabs

Of course with time, frequent visitors will recognise your favicon and new visitors might struggle at first to identify your favicon. However a well-designed favicon can help even new user instantly recognise your website. Facebooks favicon is a good example of a well-designed favicon. Facebook favicon

How to Set a Favicon in WordPress using A Plugin

Installing All In One Favicon plugin

Login to your WordPress dashboard, under the plugins menu, click on add new. Search for All In One Favicon, install and activate the plugin.

Installing the all in one favicon plugin

Setting up the All In One Favicon plugin

After activating the plugin, under the settings menu in your WordPress dashboard you will find a new menu item: All in One Favicon. Clicking on it will take you to the plugins dashboard. It is divided in to 4 sections: Frontend settings, backend settings, settings and tips.

In the frontend settings you can upload an image to use as the favicon for the front end of the website. Simply click on upload, select your desired image and save your changes.

Setting the front end favicon

You can then upload a custom favicon for the back end of the website as shown below.

Setting the back end favicon

In this example we have used a blue favicon for the front end and a black favicon for the back end. This is how opening the front end and the back end in 2 separate tabs now looks like:

Preview of front end and back end favicon

Using 2 separate favicons for the frontend and the backend of the website will only be useful for admins and other users who have access to the back end. Otherwise a single favicon should suffice. This will help improve the user experience for logged in users. It can come in handy when editing a page or post and previewing it in the front end as you can easily switch between the 2 tabs. It can also be useful when bookmarking the front end and the back end of a website.

Conclusion

The importance of favicons cannot be stressed enough. Search engines are also beginning to recognize them and are now integrating favicons as part of their search results. Google has already begun rolling out search results with favicons.

Favicon in search results

If you haven’t already got a favicon, we hope this article helps you add one to your site.  The plugin is free and supports multiple languages. It is a decent solution for anyone looking to add a favicon to their website. You may also want to create a custom short URL for your WordPress site to improve your brand image.

PHP Code Snippets Powered By : XYZScripts.com