How to Add Your Logo in Browser Url Address Bar? Create and Show Favicon Using Favicon Generator in Easy Steps

Favicon is an image, sized 16 * 16, can be shown in browser URL bar when you visit your blog. This makes your visitors to identify your website in address bars, RSS feed readers, book marking websites. Favicon builds brand value also in your reader eyes. So it is essential to create one for your blog.

What should you consider when design your Favicon?

  1. In most cases, Favicon should be in 16 * 16 pixel size. In some advanced browser, it works better if you give it as 32 * 32. I recommend getting one in 16* 16 size and checking how it works in your blog.
  2. As it is going to be shown in small square size in browsers, I recommend you to design your Favicon with rich color and simple design.
  3. Favicon not necessary to be as your same logo image. Because in most cases, when you make your logo in 16 * 16 size, it won’t be clear to see. So many bloggers are creating one unique Favicon.
  4. You can create your Favicon from your big images using Favicon generators. When you give input image as big, remember to give it as the square size. Rectangular image wont’ be clear when it shows as small square Favicon.
  5. When you successfully created the Favicon, you should save it as favicon.ico.

Favicon Generators

You can use following Favicon generators to create one for you free. Just provider big size Favicon images here and they will convert it to Favicon size.

  1. Favikon
  2. Antifavicon
  3. Dynamic Drive
  4. Genfavicon

You can draw your Favicon here and Degraeve Draw

I have also taken a Video screen shot here how I used to create my Favicon.

How to Add Favicon in my WordPress Blog or in my Website?

Once you are ready with cool Favicon then it is the time to upload it to your blog. Upload your Favicon in your blog or website root directory, in Public_html. Use your ftp software or file manager in control panel to upload it in root directory. For example it should be

Almost all browsers able to pick automatically your Favicon and show it in address bars. If you can’t see still your Favicon, clear your browser cache and close it then open again to see it there. Check your Favicon in different browsers. If it can be seen in any one of browser and not able to see in other browsers, then you should delete all cookies, caches in browsers.

Some browsers won’t show your Favicon with out you inform them as ‘Hey! I uploaded one Favicon. Show me that’. How to tell this to your browsers?

You should copy and paste the following code in your website between the <head> and </head> tags. I recommend you to put this code in immediate next to <head> line. If you are using WordPress blog, you should go for header.php through Dashboard-Appearances-Editor-header.php.

Hope you have successfully generated your Favicon. Bloggers are creative people. I want to see your Favicon also how it looks. Share your site link in below comment section so that I can see your Favicon.

{ 12 comments… add one }

Leave a Comment

  • blinkky December 27, 2009, 6:46 PM

    Good tutorial here especially for beginner =)

    • Pascal December 27, 2009, 7:07 PM

      Thanks blinkky.

  • Gabe | December 27, 2009, 7:05 PM

    Getting a favicon up is definitely a plus. It only takes a few minutes so it’s worthwhile for any blogger.

    • Pascal December 27, 2009, 7:07 PM

      Yes Gabe. I created my favicon in just 2 minutes. I used to draw my favicon.

  • Arijit Das December 28, 2009, 6:11 AM

    Its the most appropriate tutorials for the new bloggers to set up their own favicon!!!

    • Pascal December 28, 2009, 12:54 PM

      Yes Arijit. Every blogger should have it from starting period of the blog. It helps to build a brand later.

  • Sergio January 22, 2010, 2:01 AM

    Thank you Pascal, here is my favicon

    The letter S is the begin of my name Sergio.

  • Suchita August 16, 2010, 11:07 PM

    Thank You….it’s really nice for learner.

  • Aboriginal Art April 4, 2011, 11:32 AM

    Thank you so much…So easy to apply, Cheers 🙂

    • admin April 4, 2011, 12:20 PM

      Glad to know you did use it.

  • Gowtham@wordpress blog August 3, 2011, 7:56 PM

    Thanks …. The list of website for generating favicon helped a lot

  • Glazia Inc July 29, 2012, 9:32 AM

    Hey guys, i have a question:
    My website is
    As you can see the favicon is not really transparent, do you know how i can change it?
    I have tried already gif and png formats without any results.

    If you are interested in the products by the way, its all weather wicker luxury furniture.