| Design / Usability |
How to Brand Your Site through the Favorites Icon or FaviconDr. Ralph F. Wilson, Editor-in-Chief Web Marketing Today, Rocklin, CA - Dec 12, 2006 |
You've probably noticed sites where a special icon displays in your web browser, your browser link tabs, or in your Favorites list. It's variously called a shortcut icon, favorites icon, or favicon.
The icon draws attention to the brand and reinforces the brand logo in the visitor's mind since it also uses shows up on the tabs feature.. The icon seems especially noticeable with the Microsoft Internet Explorer 7.0 browser now being updated on computers around the world. Here's how you can display your own site logo as a favorites icon to reinforce your own brand.
The favorites icon is a 16x16 pixel graphic in a special .ico format. It's probably most easily created with your current graphics program, but you'll need to work carefully. Making the Celtic cross icon for my JoyfulHeart.com site was tricky, for example, since delicate features that work fine with a normal size logo can become unrecognizable when reduced down to a 16x16 format. There are two tricks to this:
- Simplify your logo to the essentials. Lettering isn't likely to be visible unless it is a single letter. The square format also makes it difficult to display logotypes that tend to be rectangular. Removing all the unessential details from your logo is key to an effective icon.
- Take advantage of anti-aliasing. Technically, anti-aliasing is the technique of minimizing aliasing (that is, jagged or blocky patterns) when representing a high-resolution signal at a lower resolution. Anti-aliasing is built in to nearly all modern graphic programs. In graphics, anti-aliasing is a way of tricking the eye into seeing a smoother line using various shades of color on both sides of the line that, when seen from afar, visually suggest the desired image. I had to experiment quite a bit with my image before I got it to look like a Celtic cross at 16x16 resolution.
Once you've created your icon as a 16x16 image, you need to save it in .ico format. Fortunately there's a free ICO plugin from Telegraphics.com (www.telegraphics.com.au/sw/) that can be installed in most graphics programs and comes with instructions on how to install the plugin. You can find icon editing shareware, but if you're already using a graphics program, it's easier just to install the ICO plugin.
Finally, you need to reference the location of your logo in the HTML of each webpage for which you want it to appear. It's best to insert both of the following formats of the link tag in the <HEAD> section of each webpage to cover all the bases of browser compatibility.
<LINK REL="SHORTCUT ICON" HREF="http://www.wilsonweb.com/syspic/wis_shortcut_icon.ico" type="image/x-icon" />
<LINK REL="ICON" HREF="http://www.wilsonweb.com/syspic/wis_shortcut_icon.ico" type="image/x-icon" />
The URL in these link tags can be absolute (as shown above) or relative, so you can display different icons for different sections of your site.
For more information see:
- Jennifer Niederst Robbins, Web Design in a Nutshell (3rd Edition; O'Reilly, 2006, ISBN 0596009879), p. 187.
- Linda Cole, "The Dastardly "favicon.ico not found" Error," Web Developer's Virtual Library, August 3, 1999. http://www.wdvl.com/Authoring/Design/Images/Favicon/
- "How to Add a Shortcut Icon to a Web Page," Microsoft Developer Network (MSDN). http://msdn.microsoft.com/library/default.asp?url=/workshop/Author/dhtml/howto/ShortcutIcon.asp
Sample newsletter. We respect your privacy and never sell or rent our subscriber lists. Subscribing will not result in more spam! I guarantee it!