Get Latest Tricks Alert Daily
Follow Readers

How to install or add a Favicon in a blog or website : Full Tutorial


How to install or add a Favicon in a blog or website : Full Tutorial
A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16x16 pixel square icon associated with a particular website, blog or webpage. Some of my friends asked about installing or adding a favicon to their blogs and stuff related to it. I have

tried to include every point related to favicon in this post. So here it is ..

What is a Favicon ?

As I have already mentioned the definition but still the following pictures will make it more clear.

How to install or add a Favicon in a blog or website : Full Tutorial

The icons marked in the screenshot above are known as Favicon. The image shows favicon of Blogger. These favicon are shown inside the address bar and on the tabbar whenever a site is shown in the browser.

How to create a favicon for your blog or website ?

There are two ways to create a favicon either you can convert an already existing image to a favicon or you can create a favicon directly.

If you want to create a favicon directly you can use , it allows you to design a favicon using your imagination. It also allows animation to be included into your favicon.

If you want to create a favicon using a pre existing image, you can use these images to icon services , to create a 16 x 16 icon file which can be used as a favicon.

How to install or add a Favicon(16x16 icon) in a blog or website ?

Now that you have created your favicon, you have to install it in your blog or website. To install or add a favicon you have to include a code in the your blog or website. Before installing the code you should upload the 16 x 16 favicon that you already created. You can use these services to upload your favicon for free. Upload the favicon.

After uploading, copy the URL of the icon file you have uploaded and paste it somewhere, it will be used further in the process.

Copy the following code and paste it between <head> and </head> tags.

<link href='YOUR-ICON-URL' rel='shortcut icon'/>

NOTE: Don't forget to replace the YOUR-ICON-URL with the URL of uploaded icon file. Thats all you have installed a favicon in your blog or website.


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Subscribe To Get Latest Tricks On Email!



  1. Thanks for a nice tutorial.Waiting for more professional posts.

  2. very informative articular, Thanks for sharing this

  3. Thought-provoking ideas . Incidentally , if you is wanting to merge PDF files , my colleagues discovered a service here