Favicon is becoming a standard now-a-days. People are recognizing site’s value from it’s favicon icon. Though it’s not compulsory to have a favicon, it’s necessary to make an impression. Favicon is a small logo, generally comes in the size of 16×16 or 30×32. This appears next to site address on the address bar. So, it instantly catches notice of your site visitors. It’s pretty easy to make favicons using favicon generators. Lets know how!

Lets have a look on the screenshot and understand what a favicon is. I am using www.google.com for example.

Here you can have a look on most used online favicon generators. But wait, before you click that link, read below.

If you are willing to get your own unique favicon, then you MUST follow the below tips that I’m going to share with you.

• Your favicon should be having some simmilarity with your blog contents. Suppose you are blogging about cars, then your favicon should not show a bike.
• It’s a good idea to get your logo converted into favicon. If you want to differ, then you can create a favicon with the initials of your blog name. For an example, I can use SB for my blog Solid Blogger. Check labnol.blogspot.com to get the idea.
• Do not go for 32×32 size, instaed make a favicon sized 16×16, so that it would be clear and loud.

Few examples:

• Example Favicons 1
• Example Favicons 2
• Example Favicons 3 (various categories)
• Example Favicons 4 (country flags)
• Example Favicons 5

You can also find favicons from favicon search engines;

• Peerbot
• gridwell
• Iconsurf

If you are interested to have animated favicons, you can make them. There are certain sites who can provide you animated icons for free. It’s nice to be different

• Make animated favicon with java animated favicon maker
• make animated favicons with photoshop click here or here
• to save your icon as a .ico format use this  .ico photoshop addon

Now are you ready with your favicon? It’s time to implement that.

• Upload your icon to any image hosting site or use googlepages.

After uploading, get ready with your image link. You need to use the codes below to see your icon next to your link

if its .ico formatted use this code

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

if its .png formatted use this code

<link rel=”icon” href=”favicon.png” type=”image/png”>

if you uploaded your icon to a image hosting site use this code

<link rel=”shortcut icon” href=”http://uploaded link id”>

Now you can see your favicon, thats all.