Design favicons For Your Site With Favicon Generators

By -

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.

How to design favicons for your site


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:


You can also find favicons from favicon search engines;

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 ;)

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.

Soumya is the admin and founder of Techcular. He loves to discover and learn new things on Internet. You can find him writing on his personal blog few times.

2 Comments to Design favicons For Your Site With Favicon Generators

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

What is 12 + 15 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)