.... Internet marketing resources, ecommerce web site design tutorials
  Taming the Beast - quality web marketing and ecommerce development services .... .


Return to web marketing and ecommerce articles index

How to create a custom static or animated favorites icons and bookmarking script

(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 bookmarks.

High quality stock photos for just a couple of dollars each?
 Yup, it's true!
Royalty free images and stock photos Big Stock Photo - over 2,450,000 royalty free images and quality photos that you can legally use on your web site - for as little as $1 each!

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. 

Method 1:

  • Create a new image 16x16 pixels in your favorite graphics program. 

  • Save it as favicon.gif in the home directory of your web site

  • Then use an image viewer such as IrfanView (freeware) that has the capability of converting image files to the .ico format.

  • After opening the gif file in Irfan View, save a copy in .ico format as favicon.ico in the home directory of your web site as well.

  • Publish both these files to your server.

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.

Method 2

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.

  • Open IconEdit32

  • Go to "File", select "New"

  • Got to "Images", select 16x16, 256 color

  • Create your icon

  • Save it to the home directory of your web as favicon.ico

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" href="/favicon.ico" >
<link rel="icon" href="/favicon.gif" type="image/gif" >

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" href="/favicon.ico" >
<link rel="icon" href="/favicon.gif" type="image/gif" >

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.

Here's a simple cross-browser compatible script you can use: 

Favorites/Bookmarking script

After clicking the button, use Ctrl +C to copy


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 computer.  

In this script:

- When FireFox is detected, it only displays a message suggesting that the visitor uses the Ctrl+D command to bookmark the page. 

- In Internet Explorer, it will add the current page to their bookmarks, along with the title. 

- Other types of JavaScript enabled browsers will only display the suggestion to bookmark (no keyboard commands as this can vary browser to browser).

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!

Michael Bloch
Taming the Beast
Tutorials, web content, tools and software.
Web Marketing, Internet Development & Ecommerce Resources

Copyright information.... This article is free for reproduction but must be reproduced in its entirety & this copyright statement must be included. Visit http://www.tamingthebeast.net  for free Internet marketing and web development articles, tutorials and tools! Subscribe for free to our popular ecommerce/web design ezine!

Click here to view article index 

Online meeting & webinar software review
Powerful, easy to use collaboration tools that can help improve your marketing sales and training efforts. Learn more about these services in this review & try a free trial!

The best shopping cart software
Our reviews of some of the best shopping carts around - free ecommerce solutions  through to premium services offering affiliate programs, marketing modules & online soft goods delivery.  Shopping cart software guide 

Autoresponder software/mailing list manager
 Read our beginners guide and reviews of all-in-one autoresponder & email marketing software solutions.

Credit card transaction fraud screening!  Effective fraud screening is an essential part of running an online businesses. Fraud transactions cost you money and can threaten your merchant account. Pick up a stack of transaction screening tips in this free guide! 

Need some advice/tools for writing/creating a web design, development or marketing proposal?






Get paid cash taking online surveys - free to join online 
survey companies that will pay you cash for your opinion!

In Loving Memory - Mignon Ann Bloch

copyright (c) 1999-2011  Taming the Beast  Adelaide - South Australia 

Profile - Contact - Privacy - Consultants Portfolio 

Search Site - Terms of Service - Social/environmental