What is Favicon and How to Add Favicon in WordPress Blog

Reading Time: 4 minutes

When you browse web pages, you usually notice that an icon is displayed at the beginning of browser tabs. It is called Favicon. There are 99.99% of website owners use Favicon to represent their sign of trust. You can also notice it beside the address bar. In this article, we will cover What is Favicon, How to Create Favicon using Favicon Generator, How to Add Favicon on your WordPress site.

What is Favicon?

A Favicon short form of Favourite-Icon also known as a Shortcut icon, Website icon, Bookmark Icon etc is a square image file that appears in front of your website name. Favicon helps your user to recognise your site or brand. Here is a sample of Favicon.

In back to 1999, Favicon was supported only by IE 5. Now all type of browser support Favicon which size is 16×16. When users bookmark any page of a specific site, the bookmark tab highlights the icon of the site. For example, if you use Google Chrome browser, you can easily notice the bookmark tab highlights every website’s logo.

The main purpose of adding Favicon is to get recognised easily. When a user has too many different pages that are bookmarked, then he/she can easily find your site by looking at the icon. Furthermore, when you open too many tabs in your browser, then you can quickly switch to any specific website that you are looking for.

Favicon also indicates your brand as a sign of trust. You can easily understand if you open your website along with other sites that already have Favicon. It would be more vital if users compare your site with other competitors, they will not give any value to your site and probably leave it site without any hesitation.

How to Create Favicon?

Well, creating Favicon is very easy as pie. You don’t need to hire any developer to do this. You can create a custom icon by using PhotoShop or any online tools. But there are many free online Favicon Generator available, by which you can create site icon easily and that takes only a few seconds. But make sure the size of the icon is 16×16 pixel and file type is .ICO i.e Favicon.Ico.

After releasing WordPress version 4.3, it implemented site icon feature in its theme, so you can add Favicon from your WordPress dashboard directly. For this, you don’t need to create Favicon of size 16×16. You can upload any kind of default image of size 512×512 pixel.

In case you are using an older version of WordPress, you can use some of the good online Favicon Generator Tools are:

- - Favicomatic
  - ZenBusiness

How to Add Favicon in Your WordPress Blog?

First, you need to create a square image, which size will be 512×512 pixel. Then go to WordPress Dashboard> Appearance> Customize.

Go to Site identity and Upload your image.

No worry if you uploaded a bigger size image, you can crop it after uploading. Now Save & Publish to save the results. In case the icon doesn’t appear, clear your browser cache to see it.

In case, you are not using WordPress and there is no option of adding icon directly, you need to follow this procedure:-

First, place favicon.ico to your theme root folder which size is 16×16 pixel. You can upload the image by using FTP client or directly from cPanel. You theme root folder will be “your site> wp-content> themes> twenty seventeen”.

Now back to your WordPress dashboard. Here you need to add/edit one line in the header.php file. Go to Appearence> Editor> Header/ Header.php and add the following line after the <head> tag.

[code]<link rel="icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">[/code]

If you place favicon.ico file into theme images folder, then you need to add:

[code]<link rel="icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico">[/code]

If you place favicon.ico file into WordPress root folder, then add the following:

[code]<link rel="icon" type="image/x-icon"href="http://www.yourwebsite.com/favicon.ico">[/code]

After placing it, click on save. Now refresh your web page and you can see icon beside your website’s name.

I hope this tutorial, helped you to know What is Favicon and How to Add Favicon to website easily. If so, please subscribe to us and get new fresh content in your mail box. We also available on Facebook, Twitter, Google+.