Why does my Web browser display some book-marked sites with a custom icon?

internet bookmark folder
Companies like HowStuffWorks and Google have custom bookmarks.
HowStuffWorks 2008

Internet Explorer versions 5.0 and higher include custom bookmark icons for some sites. Most likely, only a handful of your favorite sites will appear with these custom icons. The rest will have the simple default icon. This is because most webmasters don't know about this function or haven't taken the time to create an icon, and so they haven't posted anything for Explorer to use. Oddly enough, the site for Internet Explorer itself doesn't have a custom icon!

­ It's funny that more sites don't have custom icons because it's fairly easy to set one up and they help boost traffic. A typical Internet surfer bookmarks a lot of sites, but only returns to a select few more than a couple of times -- most sites just get lost in the crowd. When it's surrounded by plain default icons, a custom icon really jumps out at the user, and they don't forget about it so easily. This is a great way to give your site an edge over other sites, and it only takes a few steps to set everything up.


­The first thing you need to do is come up with a suitable icon. Icons are just simple 16 by 16 pixel bitmap images, but Explorer won't use ordinary GIF or JPEG files. You'll have to save the image as an ICO file, a special icon file format. The biggest difference between this format and GIF and JPEG files is that ICO is designed to save multiple sizes and color schemes of one image. This is because Windows displays desktop icons in a variety of ways depending on the context and monitor settings. It's not very difficult to create an ICO file; this site has online programs that will convert your bitmap image to the ICO format or let you generate a new image in ICO format. It also has a free downloadable trial version of a converter program, with instructions of how to create your graphic. As a general note, if you are creating custom icons in any format, design them as 16 by 16 pixel images that use only 16 colors.

Once you have the ICO image, there are a couple of different ways to post it to your site. The simplest way is to post the file to your root directory as favicon.ico (for example, the HSW bookmark icon can be found at www.howstuffworks.com/favicon.ico). When a user bookmarks any of the pages on your site, Explorer will look for this file in the root directory and use the icon for the bookmark.

You may not have access to your root directory (if you are using free Web space from your Internet service provider, for example), but you can still post a custom icon in basically the same way. You'll need to post the favicon.ico file in every directory with Web pages people might want to bookmark. You may want to post your icons this way even if you do have access to your root directory, because it will let you set different icons designs for the Web pages in all your different directories.

You can also set up individual icons for each page using a simple bit of HTML code. To post the icon this way, give the icon a simple name (other than favicon.ico) and post it as an ICO file anywhere on your Web site. Then ad this code to your Web pages, in between the tag and the :

In the open space, just insert the URL address for your icon graphic, and Explorer will load that image whenever anyone bookmarks the page. After a user has book-marked your site, Explorer will also display your icon in the location bar beside your URL whenever it brings up your site.

If your custom icon won't load correctly, it could be because of a number of things. Some free servers have a policy against ICO files, so this might be the problem. The links below have comprehensive lists of other troubleshooting tips which should help you fix any other errors.

Here are some interesting links:


Frequently Answered Questions

Where is the bookmark icon?
The bookmark icon is typically located in the upper right-hand corner of a web browser.