Resources | JavaScript | Bookmarking and Favicon

Bookmarking and Favicon:

*** This will only work for IE 5.0 or greater ***

One easy way to ensure that users return to your site after visiting it is to give them the option to add your site's URL to their "Favorites" folder, by Bookmaring it. You can use this javascript code to accomplish this:


I use this code in a seperate .js include file, so it gets written out as soon as the SCRIPT Tag gets read by the browser. However, you can easily modify this and place the code into a function that can be called after a scripted event takes place (ex. BUTTON onClick() event).

Along with setting a bookmark, you can add a "Favicon," which will appear next to your site's URL. (This site's Homepage has a favicon if you bookmark -- you can also try out CNN's site for another example)

With Internet Explorer browsers 5.0 and greater, you can include an icon (the Favicon) that will be retrieved every time visitors bookmark your site. When the user looks at their Favorites folder, they will see your icon. If they go to that bookmarked page they will also see your icon at the left end of the Address window in the browser's toolbar. It also appears in Windows' Explorer thumbnails.

The first step in this process is to create the graphic that will be your Favicon. Go into a graphics editor (you can even do this in the Paint program that comes with Windows), and create a logo. Keep it simple, because small details won't show up well at the size the icon needs to be. Your icon must only have 16 colors and it must be 16 x 16 pixels in size.

Now save your new logo in either the .bmp or .gif format. You will then need to convert this file into a .ico format. Microsoft's Paint Program won't let you do this, but some other programs -- Adobe's Photoshop -- will do it for you. If your graphic editor won't let you save your image as a .ico, you need to download a shareware program that will convert it for you. (My suggestion is to use this site)

Now that you have your icon, you need to upload it to your ROOT Directory (the "www" folder, where your index.htm page is). If you don't have access to the ROOT Directory, then you can put the icon in the folder where all of your html pages are.

Finally, you need to add this code within the HEAD tags of all the HTML pages where you want the icon to show up:


Comment on this article or ask us a question: click here !
armbrustconsulting.com