Have you ever noticed those little images that appear in your web browser next to the blog’s name and wondered what they are, or maybe wondered how to go about how to add one to your blog? This post is being written in the hope of answering your questions regarding favicons.

What is a favicon? The name favicon has been around since Internet Explorer 5, when Microsoft decided that their web browser would start checking the website’s server for an image associated with a website. If present, this icon will then be displayed next to the bookmark text to help those with a lot of bookmarks locate the ones they are looking for quickly and easily.

Since then, the favicon naturally began to be used as a visual element that helps create brand identity. Once you give your website a favicon, people will then associate that image with your website, and in many ways, you as an individual.

Favicons usually appear next to your website logo in the address bar, but can also be found in a variety of other places, including next to your bookmarks, next to your website feed in many feed readers, or even at the top of your individual tabs in your web browser.

How do I create a favicon for my website or blog? A favicon is simply a 16×16 .png file that is converted to an icon resource and saved with the file name favicon.ico. Typically the image is either your blog’s logo, or an abbreviated version of that logo (such as Google’s “g” favicon). In order to avoid additional load time, it is recommended that you not use more than 16 colors in your image. You’ll also want to exercise extreme caution if you decide to make a dynamic favicon, as this can sometimes effect your website’s load time, as well as possibly costing you money by hogging your hosting bandwidth.

Once you’ve created an image that you want people to associate with your blog, you will then need to convert your image over to the favicon.ico format. It is best to have a logo with a transparent background, to avoid having your logo appear like it is in a box. Once you have a website logo saved on your computer’s desktop that you are comfortable with, I recommend you visit FavIcon from Pics. This website will walk you through the steps of getting your file converted to a favicon.ico file and then give you the option to download it in a zip file. You’ll want to save it somewhere on your hard drive and move on to applying the favicon to your website.

How do I apply the favicon? Once you have the favicon, placing it on your website will depend on which blogging services you use. For WordPress users, you can simply upload it to your uploads folder, or if you aren’t using any sub directories that you want to have a different image, you can actually just load it to you root directory. If it sounds like I’m speaking gibberish, you can use the Favicon Manager plugin and load the favicon.ico file wherever you want (and just point towards it in the plugin options panel).

For Typepad users, you can find instructions here. You simply load the file into the File Manager and it should be recognized automatically. If you have multiple websites on your Typepad account, you will instead need to place the favicon.ico file in your individual folder for that particular website (otherwise it will be used on all your Typepad websites).

What if my favicon isn’t showing up? You will want to make sure you have the following two lines of code placed in your website’s header between the head tags:

<link rel="icon" href="/favicon.ico" type="image/ico">
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

This will help ensure all types of web browsers find your favicon. Unfortunately, when sources such as RSS feeds check for updates, they don’t require the website to load, so this information is not sent to them. As a result, you will want to place it in the root of your directory to ensure that your favicon will be found. For most WordPress users, your root directly is the public_html folder.

This means you will have it in your public_html/favicon.ico folder, as well as in your public_html/wp-content/uploads/favicon.ico (where the browser looks for it) . If you prefer to have it in only one spot, you’ll need to update the header code to point towards the root directory.

If your problems are specific to Internet Explorer 7, I recommend you check this out FAQ by Jeff.

In my personal opinion, I feel that it is extremely important to have a favicon on your website. I’ve also found that using your favicon in your profile pictures (MyBlogLog picture, etc.) will help improve your brand identity with others, so you may want to consider that as well when setting up your profile with different companies.

Oh, and an added bonus for favicon lovers! If you really love favicons and maintain a WordPress blog, you can check out the Favatars WordPress plugin as well, which will place the favicon of the website the commentator uses next to their comment.