Creating a Favicon for your blog in less than 5 minutes [Blog Design]

By | March 22, 2009 | 7 Comments

What is a favicon?

As Wikipedia puts it,

A favicon (short for favorites icon), also known as a website icon, shortcut icon,url icon, or bookmark icon is a 16×16 pixel square icon associated with a particular website or webpage

In short, a favicon is something that you see on the title bar, at the left corner of a webpage or a website that you visit.

Here is how the favicon of a page in Google looks, in case you haven’t seen this before.

favicon_1

Why do I need it for my Blog?

Once your Blog starts growing, many people might like to bookmark your blog home page or a specific post, on their favorite browser.   When they do this, the “favicon” will help to distinguish and uniquely identify your content from the rest.

Here is an example that shows, how a favicon might distinguish various bookmarks that are grouped together.

favicon_2

How to Create and Install a favicon?

If you are convinced that a favicon might be good for your blog or a website, then I am going to show you how to create one for “free” and install it.

There are many websites that let you create a favicon from scratch and download the “favicon.ico” file that can be installed on your website.  And, this is one of my favorites:favicon_3

Here is another site that allows you to Upload an image file of your choice and convert it into a 16 x 16,  “.ico” file – http://tools.dynamicdrive.com/favicon/

Once you have created a favicon of your choice, follow these simple steps to install it on your website:

  • Upload the “favicon.ico” file to the root of your website using any FTP tool.  For example, if your site is hosted at http://yoursite.com, upload it directly under the public_html folder
  • Make sure it is uploaded by accessing it at http://yoursite.com/favicon.ico
  • Insert the following HTML snippet inside the tag of your web pages
  • If you are trying to install the favicon on your WordPress blog, make sure to add the HTML snippet in the header.php file, under the tag
  • You are done!!!

Note that it may take sometime for the favicon to appear in your Browser.  Sometimes you may have to clear the cache or wait a little longer.

Spice up your Website or Blog with a favicon and let me know how it goes…

If you link this entry, please share it
Related Content

Related posts:

We Recommend
Hostgator is our first choice when it comes to Reliable 24x7 Hosting, Affordable Cost, Awesome Support and Great Quality. Click here to explore and get your Own Hosting now!>
Filed Under: Blogging

Comments

  1. Peter Fletcher says:
    April 20, 2009 at 4:23 am

    Thanks for a simple but very effective tutorial. You've made my day. I almost freaked out when it didn't show up immediately so I read your post again, rebooted my browser and it worked a treat.

    Thanks heaps.

    Reply
  2. ashwin_c says:
    April 20, 2009 at 5:23 am

    Hi Peter,

    Great to know that you found this useful. Thanks for taking time to provide a feed. Keep reading :)

    Thanks.

    Reply
  3. Peter Fletcher says:
    April 20, 2009 at 1:53 pm

    Thanks for a simple but very effective tutorial. You've made my day. I almost freaked out when it didn't show up immediately so I read your post again, rebooted my browser and it worked a treat.

    Thanks heaps.

    Reply
  4. Ashwin / Thoughts Unlimited says:
    April 20, 2009 at 2:53 pm

    Hi Peter,

    Great to know that you found this useful. Thanks for taking time to provide a feed. Keep reading :)

    Thanks.

    Reply

Trackbacks

  1. Ashwin says:
    March 22, 2009 at 8:13 pm

    [Blog Post] Creating a Favicon for your blog in less than 5 minutes [Blog Design]: What is a favicon?.. http://tinyurl.com/chlxkw

    Reply
  2. Ashwin says:
    August 25, 2009 at 6:08 am

    Creating a Favicon for your Blog http://bit.ly/ohMbq #wordpress

    Reply
  3. What’s New in Thesis Theme 1.8? says:
    August 25, 2010 at 7:04 am

    [...] All you have to do is prepare a Favicon (a 16 x 16 Image with an .ico extension) and upload it using the Thesis Admin Interface.  If you aren’t using Thesis, here is another post to help you setup a  Favicon for your WordPress Blog. [...]

    Reply

Speak Your Mind

*