If you are like most web developers, you have wondered at some point in time why
some websites show a custom icon when bookmarked and others don't. Most likely you
want to set up this same functionality for your company's website and this article
will teach you how to do just that.
If you haven't been sold on the concept of a custom bookmark icon,
think about this... It's easy to setup and believe it or not, they can help boost
traffic to your site, particularly return traffic. The average internet user bookmarks
a large number of sites, and subsequently, it's easy for yours to get lost in the
crowd. When put next to the standard IE or Netscape bookmark, a custom icon will
jump out to the user. Anything that can help your site stand out from your competitors
is certainly worth the effort.
Obviously the key piece you will need here is an icon that is suited to represent
your company or website's theme. This may be a variation of a logo or any other
pertinent image you want to use. Since in most cases your icon will be displayed
in 16x16 format, you will be limited on how detailed the image can be.
The next step is to ensure the file is in .ICO format, since Internet Explorer won't
use GIF or JPEG files. The reason for this being that .ICO files support multiple
sizes and color formats saved within a single file. This requirement is set by Windows
which displays icons in a number of different ways depending on where the icon is
being viewed and the user's display settings. If you find designing
custom icons
to be difficult, consider having one designed for you, or search
for an icon from an existing stock icon collection.
Once you have decided on an icon to use, you can take two different approaches to
implement it on your website. The simplest way, assuming that you do not want to
use different icons for each page, is to rename the file to favicon.ico and put
it in your website's root directory. When a user bookmarks any of the pages on your
site, Internet Explorer will pick the file up automatically and use it as the bookmark
icon. If you do not have root access, you will need to copy the icon to every folder
containing pages a user might bookmark.
The other approach is to set up individual icons for each page using a line of HTML
code. Simply paste the bolded text below in between the <HEAD></HEAD>
tags.
<LINK REL="SHORTCUT ICON" HREF="FILENAME.ICO" >