Firstly before I proceed and dig in deep – well, this is fairly easy. But before I proceed, let me start by explaining what a favicon is to those who may be new to the web development field.

 

What is a favicon?

(Favicons) ‘Favourites icons’ are tiny logos that appear at the far left of a browser’s address bar. They can be static or animated, depending on your browser, and give websites that use them a little extra personality.  A favicon is square and usually measures 16 x 16 or in other cases 32 x 32.

 

How to I create a Favicon?

Most graphic editing application software have the functionality to create favicons. A favicon extension is (.ico). Alternatively you can make use of third party tools or even the following online Favicon generating website:

 
 
Inserting a favicon?

First, make sure your favicon has a correct extension (.ico) and that the name is:  ”favicon.ico” (obviously without the quotes). Insert the following HTML tag inside the <head>… </head> section of your web page:

If you have downloaded an animated favicon, insert this:

That’s it!