Web Studio One | Designing e-Business Solutions
About Us Services Portfolio Contact Site Map Affiliates
Home Resources
How to Create a Customized Favorites Icon and Bookmarking Script
Michael Bloch - www.tamingthebeast.net

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 help you make the most of these standard browser features for marketing your own web site and to really stand out from the rest. 

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. This is a very simple feature to implement.

Special Note: Some hosting services don't support Favorites icons. I discovered this when we moved from one server to another. We had been using an icon for a couple of years and it was only when I went to update this tutorial that I realized our Favorites icon was no longer functioning. If this should occur to you, contact your web host and ask them to enable .ico support. If they don't/won't/can't; there is a workaround you can use below.

Creating your own Favorites icon. 

Method 1:

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

  • Drop the number of colors on the palette to 16 

  • Create your graphic (okay, I know-16x16 pixels doesn't give you much room to be creative!) 

  • Save it as a gif. 

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

After opening the gif file in Irfan View, save it as favicon.ico in the root directory of your web and publish to your server. Then test it out by adding your site to your Favorites. It should work regardless of the page you are on. Done!

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, 16 color

  • Create your icon

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

Then publish the file to your server.. that's all there is to it. Test it out by going to your site and adding it to your Bookmarks/Favorites. The file size is very small, so it won't annoy your visitors.

In the unlikely event that your hosting service doesn't support .ico files; you can use this workaround - just put a copy of the favicon on a different server - perhaps the free space that you usually get with a standard ISP account. Then, add the following tag between the <head> and </head> files of your pages:

<link rel="shortcut icon" HREF="http://www.domain.com/favicon.ico">

... with domain.com point to the alternate location of the Favorites icon file.

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/Favrouties 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 script you can use complete with instructions - it allows you to customize the text that will appear in the bookmark description. 

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.

In this script:

- When Netscape 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 your homepage to this visitor's "Favorites" from any page in the site - along with a custom description you specify in the script. 

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

These strategies really do work and definitely worthwhile using 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!

About Us Services Portfolio Contact Resources Affiliates

Web Studio One - New York Web Design - New England Web Design - All Rights Reserved