Favicon stands for Favorite icon. It is the tiny image which represents your website in a browser’s favorite menu, tabs and wherever else it is represented visually. Even a small detail can make a big difference in how your website is seen. Having a favicon is good for gaining brand recognition and building trust with the visitors.

In this article we will show you how to include a favicon on your website. First we will talk about why you should add as favicon and then how to add one to your WordPress site.

Why to Add a Favicon to Your website?

A Favicon is part of your website’s identity and is good for user experience. Below are some of the reasons to use Favicon to your site:-

• Easy to identify in Web Browsers

A favicon helps your site to be more recognizable in web browsers. Generally users open more than one website in their browsers. If you have used a favicon in your site then it will help the users to identify your site among many other open tabs.

In the above image you can easily identify the tab for WordPrax site by the logo alone. You can also identify the other sites from their favicons. Otherwise you have to make an effort to read the beginning of the site. Clicking on every tab is certainly not the best option.

• Looks more Professional

If you have added a favicon to your Website then it will look more professional and trustworthy. Many of the customers may be relying on this small detail to take their decision to purchase something.

Now we will discuss about how to add a favicon to your WordPress site.

How to Add a Favicon to WordPress Site

There are many ways to add a favicon to your WordPress site. Lets talk about them one by one.

Method 1: Using the Customizer

This is the most easy option to add a favicon to WordPress and has been around since WordPress 4.3. Just activate it in your theme and you can simply add favicons via:

Appearance > Customize  in WordPress backend. Here just click on the ‘Site Identity’.

Here, you can change site’s title, description and other thing related to your site including the favicon. To change this just click on the ‘Select File’ button to upload your favicon file.

If the file is too large then WordPress will ask you to crop it to the appropriate size. Otherwise just save it. Now you can preview your favicon in action. Finally just save and publish.

Method 2: Using Your Theme Options

Sometimes option to change the favicon is not present in the Customize then you can still find it in your theme settings. Now a days the themes come with lots of options and they are not standardized. Hence you should first check this option within your theme as this is one of the easy option.

Method 3: Adding a Favicon using Plugin

If your theme doesn’t have a built in option then you can also use a plugin. We are giving you some options:-

• All In One Favicon
• Favicon by RealFaviconGenerator
• Heroic Favicon Generator
• Very Simple Favicon Manager

Now we will describe how to add a favicon using the All In One Favicon which is one of the most popular solution.

Just install the plugin and go to the Settings under Settings > All in one Favicon.

This plugin provides support for GIF, ICO, PNG files and Apple Touch Icons. It will also help you to define different paths for icons used in the frontend and backend. You just need to paste the paths of your already present favicons in the WordPress media library. Otherwise you can use the buttons to upload your files and the plugin will automatically insert their paths. Then save the changes.

Method 4: Adding a Favicon using Code

If your WordPress version is old then you have to add a favicon manually. First try this in a local development site to check whether it is working fine. To do so, first you have to upload your favicon files to the site’s root folder. You can also use a subfolder but remember the file path for later use. Make sure there is no other favicon files present there.

After the upload, you can add the favicon to the WordPress site either by adding certain code in your header file i.e header.php or functions.php. We are giving a code for use in functions.php.

function add_favicon() {

echo ‘<link rel=”shortcut icon” type=”image/png” href=”‘.get_template_directory_uri().’/assets/favicon.png” />’;

}

add_action(‘wp_head’, ‘add_favicon’);

If you are using an ICO file then use the below version:-

function add_favicon() {

echo ‘<link rel=”shortcut icon” type=”image/x-icon” href=”‘.get_template_directory_uri().’/assets/favicon.ico” />’;

}

add_action(‘wp_head’, ‘add_favicon’);

Just replace the part after href= with the location of your favicon files and this code will work for your site.

Conclusion

Although favicons are small design details but they make a big difference in the opinion about a website. Favicon helps in making your site more professional and help it to stand out in so many browser tabs and ultimately enhancing the user experience and brand recognition.

We have discussed how adding a favicon will be beneficial and four ways to add them to your WordPress site. You can choose any options but the favicon will always have a great effect on your website’s perception. And this is one of the most important thing to get while running a business website.