JBSlemmer.com         favicon
The best guide to practical information that you'll use every day!
Home Up

Tools

Search this website!

Feedback

Search the Internet: Google   Yahoo  

Find a phone number: YellowPages or WhitePages 

Web based email: YahooMail  Hotmail 

Look up Stock Quotes 

Maps and directions: Mapquest

Useful links for Travel, shopping & dining and  Movies  

Job resources    Website design resources 

Fitness: Fitness and exercise information  

Humor! 

EHSO: Environment, health and safety Information  

Chastain Park:  Looking for Chastain Park Concert tickets or directions?  Click here 

 

Favicons - What they are and how to use them!

If you're trying to entice people return to your site from the Explorer's Favorites menu, it helps to prompt them with a special logo of some kind. If you're in Explorer right now and pull down that menu, you'll probably find some of those logos lined up next to the selections in the Channels item. For very little effort, you can have the same thing next to your own site's name.
 

This little icon is called a "favicon", and it works only in Explorer 5 and above. If your visitors are running Netscape or an older version of Explorer, the browser will just ignore your little icon.

When an Explorer 5 user bookmarks your page, Explorer searches for a special icon with the name "favicon.ico". If it finds one, it replaces the default Microsoft icon with your special little icon next to your name in the favorites menu and in the location bar. The user can also put your icon on the desktop and the taskbar, though few are likely to bother.

The icon you create has to be exactly 16 pixels by 16 pixels. There are some alternative larger sizes, but only use these if you've investigated favicon use very thoroughly. The safest route is definitely 16x16. Try to fool the browser with a larger or smaller size and it will usually ignore you. You should also stick with 16 Windows colors. Again, more colors can be used in sophisticated icons, but 16 is your safest bet.

There are two routes to creating your icon. You can take an existing graphic, maybe a BMP or a GIF, and convert it using graphics software. A decent converter is available for free at Irfanview. Unfortunately, some icon converters don't do a good job of transforming bitmaps into .ico files.

The alternative is to use a dedicated icon editor. There's one included in Mocrosoft Visual Studio, and an online Java editor you can try at www.favicon.com. In the long run, you'll probably find it faster to use an icon editor to create your graphic from scratch, rather than converting an existing graphic and ironing out the inevitable bugs.

When you save the .ico, name it "favicon.ico". That's the default icon that Explorer looks for. If you want other pages to have different icons, you can do that too. Name each icon differently, but make sure they all have .ico extensions.

To have Explorer pick up the default favicon.ico, copy it into the root directory - the main directory that holds your HTML pages. If all you want is favicon.ico to be associated with your site, you're done. Every time a visitor bookmark your site with Explorer, favicon.ico is copied to the visitor's cache, where it waits to be displayed. You don't even need to alter your HTML.

However, there are some other tricks you might want to play. If you want a different icon associated with special pages, use the LINK tag on those pages like this:
<LINK REL="SHORTCUT ICON" HREF="mypage.ico">

When visitors bookmark this page, instead of favicon.ico they'll get mypage.ico. You can direct the browser to any absolute location you want using:
<LINK REL="SHORTCUT ICON" HREF="http://www.mysite.com/graphics/icons/mypage.ico">

Of course, there are weirdnesses to take into account. If you test the favicon on your own site, you may get only one shot at it. Once a site is bookmarked, it's hard to flush out that listing completely. Even if you delete the pages from your cache, delete the listings from the Favorites menu, and reboot, re-bookmarking a previously bookmarked site may not cause the new icon to "take". If this happens, enlist the help of somebody who hasn't previously bookmarked your page.

One other potential snag is that some Web hosts don't support .ico files. If you use one of these, contact the company and politely ask them to start supporting .ico files.

If you follow these guidelines you should find it all relatively straightforward. The only time-consuming parts are getting used to an icon editor and then creating your icon or fixing the problems with your converted graphic. For relatively little effort, you too can give your site that customized cutting-edge look in IE5.

 


All images and text © Copyright J Slemmer 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009
email me

Other great web sites: 1. Fitness and exercise information     3. Environment, health and safety Information     4. Where to find a pick-your-own farm    5. Find Pumpkin Patches, Corn Mazes, Hayrides and More     6. Find choose-and-cut Christmas tree farms, precut trees, etc.     8. Free resources to start your own website business.  Chastain Park:  Looking for Chastain Park Concert tickets or directions?  Click here