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

by Ashwin on March 22, 2009

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…

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    blog comments powered by Disqus

    Previous post:

    Next post: