(first published in 2001, last updated March 2009)
Just about everyone who uses a web browser also makes use of their "Favorites" or "Bookmarks" function.
I'm not sure what your Favorites list looks like, but mine contain hundreds of entries. It can be quite difficult to find what I'm looking for. Also, on many occasions when I come across a site of interest, I forget to add it to my Favorites - and I guess I'm not the only one.
Getting people to your site for their first visit is one challenge -
getting them to remember your site and return is another. This tutorial
will show you how to encourage people to bookmark your site and also how
to create a Favorites icon that will stand out from the rest of their
How to create a Favorites icon
If you have ever visited sites such as Yahoo and added them as a favorite, you would have noticed that the icon is very different to other bookmarks in your list. The custom icons are also displayed in the tabs of modern browser windows.
This is a relatively simple feature to implement!
Creating your own static Favorites icon.
Then test it out by adding your site to your Favorites. This should work regardless of the page you are on. While it should be detected automatically, it's a good idea to to add a tag your pages that directs browsers to the favicon file (see below). This is certainly advisable if you decide to created an animated version of your icon which I discuss later in this tutorial.
Use a dedicated icon editor program. If you need an icon editor, you can download a great freeware program called IconEdit 32 here.
IconEdit32 allows you to create, import, edit, and save 16X16, 32X32, and 48X48 icons in 2, 16, or 256 colors.
You'll then need to create a .gif version of that file. Use IrfanView to open the favicon.ico file and then save a copy of the file in gif format; i.e. favicon.gif, also in your site's home directory.
Then publish the files to your server. Test it out by going to your site and adding it to your Bookmarks/Favorites. If it fails to appear, try adding the code below.
Specifying favicon.ico location
As mentioned, most browsers should detect the favorites icons automatically, but in case they don't; there's a tag you can use that will let them know where they are. The code should be placed between the <head> and </head> statement. These tags are also definitely necessary if you decide to use an animated version of your favorites icon and in the unlikely event that your hosting service doesn't support .ico files, the gif version should cover it.
<link rel="shortcut icon"
If your favorites icon still doesn't display
Depending on your ISP and your system's caching, it may take anywhere up to a couple of days before you see the new favicon image in your bookmarks and browser tabs, so don't panic if it doesn't appear straight away.
Animated favorites icon
Many sites now use favorites icons - so in order to stand out a little more, consider using animation as it really does catch the eye. Unfortunately, older versions of Internet Explorer don't support animated favorites icons, but Firefox and Safari do.
Depending on the topic of your site, Firefox usage could be anywhere from 15% to 50% of your visitors, so it's definitely worth the extra effort; particularly given that not many other sites seem to take advantage of this feature.
I use an animated icon for Taming the Beast.net that you should be able to see if you bookmark the site in Firefox; but in case you can't/don't see it, here's how the icon looks:
Ok, so it likely won't be winning any graphic design awards, but it does the job :).
To make an animated icon, while also providing a version for browsers that don't support animation, you can either:
a) use the gif animation features of your graphics software package, remembering to stick with the 16x16 pixel size and 256 colors. After the animation is created, save it favicon.gif in the root folder of your web site. Also use your graphics package or Irfanview to convert a copy to .ico format so you have a static representation if the browser being used doesn't support animated gifs.
b) create separate 16x16 pixel images in gif format which will be the frames for your animation. Then run them through a free gif animation service such as Gif Ninja. Save the resulting file as favicon.gif in your site's home directory, then create a static version in .ico format using your graphics package or IrfanView.
c) use a a free service such as Animated FavIcon that will apply a basic animation to the image you upload, plus text if you specify it. I recommend against using the additional animated text as it does make the file size blow out considerably. A static version in .ico format will also be generated during the process. Both versions should be saved/published in your web site's home directory
Whichever way you go, remember to add the following tags between the <head> and </head> files of your pages:
<link rel="shortcut icon"
Creating a bookmarking script
Now you have your very own Favorites icon, you'll also want to encourage people to add you to their bookmarks. Even though adding a site to a bookmarks/favorites list is a very simple task, people need to be prompted at times - and the best way to get them to add you is to make it as *easy* as possible for them to do so by creating "bookmark me now" type links place strategically throughout your content.
a simple cross-browser compatible script you can use:
This script should work well in most Netscape and Internet Explorer browsers from version 4 onwards, plus also Firefox.
Special note: you'll need to publish the script up to your server to see
it in action, it more than likely won't work previewing it on your
For a more comprehensive bookmarking script that also incorporates features for adding bookmarks to social networks, see my article, The Social Bookmarking Effect.
These simple free strategies really do work and are definitely worthwhile implementing as part of your overall web marketing arsenal!
paid cash taking online surveys - free to join online
In Loving Memory - Mignon Ann Bloch
copyright (c) 1999-2011 Taming the Beast Adelaide - South Australia