Bookmark Icons

Introduction

This post explains how to customize the icons of your web site and RSS feeds. Most web browsers support web sites that use customized icons to represent their sites. In Firefox, it is a blue ribbon () and for Internet Explorer it is a page with a blue ‘e’ on it (). Here are the details:

Icon Specifications

For Firefox or Internet Explorer you just need an .ico file with the following specifications:

• 16 x 16 pixels in size.
• The .ico file must be in Windows32 format. Using 256 colors (8-bit) seemed to work fine for me.
• File must be named favicon.ico.
• The favicon.ico file must be located in your web root. For example, if your domain is http://www.foo.com then your full icon path would be: http://www.foo.com/favicon.ico.

For RSS 2.0 feeds, you just need the following:

• Image must be in .jpg, .png, or .gif format.
• Maximum size must not be greater than 114 x 400 pixels.

Examples

In truth, you can name your .ico file anything and have it located anywhere on your web server. However, it has been my experience to not deviate from the specs or you might have browser and feed reader issues. Here is the HTML code to use for all pages:

In order to create the .ico file, I used SnagIt since the SnagIt Editor that comes with the program allows for the saving of images as .ico files. For my RSS feed, I simply created a .gif file of the same image used for my .ico file. Then I added the following code to my RSS feed (since I am using WordPress, I added this to the wp-rss2.php file):

The problem with this is that my FeedDemon RSS reader does not seem to make use of the .gif file in my RSS feed but uses the favicon.ico in the web root of my web site instead. Not sure why this is but it is something to be considered.

Notes

Be patient when testing your newly built icons. I noticed that in both Firefox and IE that it took some time for the browsers to update the icon associated with the bookmark.

When creating .ico files, make sure to drag and drop them in your browser to see if they load properly. Behavior between what you see in your file explorer can differ than what is really being shown in your browser.

Resources

I found these sites to be helpful when figuring out how to make my own icon.

• HTML Goodies
• Web Work Site
• Wordlog - Add an image to your RSS 2.0 feed.

1 Comment to Bookmark Icons

1. 

   This post was updated to take into account the behavior of the FeedDemon RSS news reader since it seems to use the favicon.ico.
Brooke Kuhlmann on August 7th, 2006

Leave a comment

You must be logged in to post a comment.