What is this used for?

To brand your web site

Why set up this functionality?

It is to make a tiny personalized icon show up in the tab of users browser when they visit your web site, giving your site a nice extra touch and a more personal feel.

Ghost Fav Icon Example

So how did you do it?

① First, I decided on what image I wanted to use so I headed over to my trustworthy image library Stockunlimited and surfed around a bit. Found this icon set:

Icon Map Example

② Then I extracted the cute little ghost guy in the top left corner
③ Resized him to a smaller size, more suitable to use as a favicon

Applying the favicon:

I followed this excellent tutorial:

It is a very easy-to-follow tutorial that should have your favicon up and running within minutes.


Making a Favicon

How to make an actual favicon is outside the scope of this tutorial but here is a good article that explains that very well: http://blog.teamtreehouse.com/how-to-make-a-favicon

TIP: If making a favicon is not something you want to spend time doing, I recommend you outsource it to a freelancer on a service like Fiverr and get them to do it for you for a few dollars. This is not something you should have to spend a lot of money on.

Reference Links: