Jul 12, 2011

Favicons Now Supported in Blogger

A favicon is a small image file, commonly 16X16 pixels, that gets displayed in the address bar of every browser. If you use Blogger the orange Blogger logo is your default favicon unless you hacked the template to display a custom favicon. Blogger now supports custom favicons for blogs by allowing you to upload your own favicon without any template hacking. Here is what my favicon looked like on the MrBrownThumb garden blog before and after I uploaded a custom one of my logo using Blogger:

Adding a favicon in Blogger blogs
When visitors land my blog my logo is displayed in their browser, and when (if?) they happen to bookmark my blog for later it will hopefully stand out among all the other favicons in their bookmarks, making my blog easy to locate.

Making a favicon is easy with the help of a few websites. Here's how you can make your own.

Step #1: Generate a favicon from your logo or an image from your computer using one of the many free online tools.
FavIcon from Pics: As the title suggests it let's you use an image from your computer to create a favicon.
FavIcon Generator: Dynamic Drive's favicon generator also allows you to create a favicon from your Twitter profile picture.
Ico Converter: Allows you to also create a favicon from an image on your computer.

Step #2: After you've generated and saved your favicon to your computer log into draft.blogger.com. As of this writing you'll see the new Blogger interface that we will all get one day soon. Do not be alarmed. Click on the arrow next to the little house icon on your dashboard, from the drop down menu select "Layout." This will take you to the section where you add and remove widgets to your blog.

add favicon to Blogger blogs

Near the top of the page click the "Edit" link located in the box where the default Blogger favicon is. In the window that pops up select and upload your custom favicon then click "Save arrangement" in the upper-right corner.

That's it, you now have a custom favicon installed on your blog.

Tips:

Image of a simple shapes or colors work best.
When you generate your favicon choose the 16x16 pixels size as it is pretty much standard.
Complicated images of your garden, an intricate flower or animal may look pixelated or unrecognizable.
If you use a logo or create an illustration use as few colors as necessary.

I changed my blog's favicon back in June on the day the option became available. At the time it took a few days for Blogger to recognize it. If you find that your favicon doesn't change immediately try clearing your browser's cache. If you can see your favicon on the page elements page where you uploaded it, it worked and should appear soon in visitor's browsers.

7 comments:

  1. It would have been better if Blogger had explained about how to create the favicon (applying it is easy once you've got it). And once one had completed the process, the delay was maddening. I did mine over and over, thinking I was doing something wrong. Gave up - then it appeared a few days later. Altering it is a horribly slow process because you have to wait so long for it to appear you can't tell if you've applied a better image or worse.

    I was going to give you an example but, as I look to the top of the page to say why . . . I see all the favicons have disappeared again - yours isn't here, nor is mine on the tab.

    Oh . . . mine's back. And so is one on another blog I was taking a look at to compare. Yours isn't yet but that may be because I can't refresh the page while writing this.

    Oh the joys of blogging!

    Esther

    ReplyDelete
  2. Esther,

    Yeah was pretty much my experience too. It took a few days for it to switch to the custom one. You don't see it on this blog because I haven't done it here, but I just looked at your garden blog and I can see your favicon. Looks good and matches your blog.

    ReplyDelete
  3. Thanks. Glad you like it.

    Esther

    ReplyDelete
  4. Thank you. I now have a new Favicon, though despite being a new gadget, not sure Favicons are all that exciting...

    ReplyDelete
  5. @Petra, LOL. They're not very exciting but Favicons are great ways to personalize a blog and make it stand out from the pack.

    ReplyDelete
  6. How come Blogger won't accept my 16X16 pixel favico generated by favicon.ico Generator?

    ReplyDelete
  7. My favicon does show in Blogger, but it's in black and white. Everywhere else it shows fine in color. Any suggestions?

    ReplyDelete

I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.