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:


Note: GIFs are used for animated Favicons. And lately many websites are intended as web-apps these days, it’s commonplace to design app icons (known as touch icons) even for websites, and because device resolution varies from device to device, those icons should come in a variety of sizes. If this is the case on your project, you can use the following snippet:


If you have downloaded an animated favicon, insert this:

That’s it!