How to add favicon to website

By | January 24, 2018

1. What is favicon, why we use it ? Favicon stands for “favourite icon”. It is a small graphic icon which is displayed in your browser address bar, favorites menu, browser tab, desktop shortcut, bookmark menu and with blog feed in RSS reader.  Favicon make help to identify a website and make a brand impression.

2. What is the ideal size and file extension. ?

Favicon’s ideal size is 16 x 16 pixels and its ideal extension is .ico, but you can save it in .png and .gif format also. All old and modern browsers support .ico extension, but .png and .gif format are supported by only modern browsers.

3. How to create favicon ?

You can create favicon by using any graphic editor which can save image in .ico format. There are some online services like favicon.co.uk and Dynamic Drive allow users to create favicon. favicon image should be very clear and its color should match with your website theme color. It is not compulsory you give name “favicon.ico”. Favicon file can have any name.

4. How to install or add favicon.

After creating favicon, upload it to your root directory. If you don’t want to upload your favicon file in root directory then add the following HTML snippet between  <head>…. </head> tag.

<link href=”/ICON_PATH/nobleicon.ico” rel=”icon” type=”image/x-ico” />

ICON_PATH is the path where you have saved your favicon.

5. How to install or add favicon in WordPress.

Upload the favicon file into your theme main folder. Also upload favicon into the website root directory. Open your theme header file header.php and search this snippet  <link rel=”shortcut icon”  and ends  with   /nobleicon.ico” />;
and put the following code snippet in place of it.

<link href=”<?php echo get_stylesheet_directory_uri(); ?>/nobleicon.ico” rel=”shortcut icon” />

You can use WordPress plugin Easy Set Favicon. If you don’t want to upload favicon file to your website folder, use All in One Favicon plugin.

In future if you want to change your favicon, you just replace the icon file having the same name.