A favicon (pronounced fav-eye-con) - short for 'Favorites Icon' - is a multi-resolution image included on nearly all professionally developed sites. Within Internet Explorer the favicon is displayed on the address line and in the favorites menu. Tabbed browsers like Firefox and Opera extend the functionality of favicons. Firefox can even display animated favicons. Each web browser has a unique user interface, and as a result uses the favicon in different ways. The favicon allows a company to further promote a site by displaying a logo, a mascot, etc. Often, the favicon reflects the look and feel of the web site or the organization's logo.
Many critique the favicon as being just an eye candy, non-essential to your website's operation.
This is actually not entirely correct. Creating one can save your site some bandwidth and clean your hit and error logs (non-cluttered logs are essential). If you have created a custom 404 File Not Found error file (if not, you should), this file will be sent by your web server every time there is a request for a nonexistent favicon.ico file. Also, creating such an icon adds to the professionalism of your site, marking you as a web designer or site owner who respects all the standards and formats of proper website building.
In this article I will try to present all the essential best practices needed to understand and properly utilize the little-known marketing power of that tiny icon named the favicon:
1. Create a multi-resolution ICO file with two images.
One image should be 32x32 pixels and the other 16x16 pixels. Use 256 colors. If in Windows, then stick to the "Windows Default Palette" scheme. If you don't, you might see annoying shifts in colors, where the operating system re-maps your colors, a technical term describing results such as the lovely orange color on your logo showing in a dark green.
In most modern browsers, you can drag the favicon to the desktop where it becomes a link. The desktop icon is often 32x32 pixels.
If you don't include the 32x32 version, the default browser icon will be displayed instead, the blue letter "e" for Explorer, the red "O" for Opera, etc. Basically the browsers will imprint their brand into the memory cells of your visitors, and you will lose a very simple but potentially efficient marketing opportunity.
You will find many tutorials telling you to just make a 16x16 bitmap and name it ICO. While this will work for less restrictive browsers such as Firefox, which basically takes almost any bitmap format as a favicon, it will not work with most other browsers. Also, you lose the opportunity to show your design in 32 square pixels.
You will find many tutorials that insist on the fact that icons and favicons must be created in 16 colors. While this very conservative approach will most definitely ensure full compatibility with all systems and will probably eliminate the fear of color shifting due to palette re-mapping, it is irrelevant today. The 16 color rule dates from the old days, when browsers, due to the limitation of the operating systems they ran on (Windows 95, etc.), could only display 16 color favicons. Have you ever looked at your website in 16 colors? Try it - you'll be very, very scared.
Some extreme geeks adopted the "if you can't beat them, overload them" attitude. They insist on creating 4 image favicons. 2 16x16 images and 2 32x32 images, having one image with 16 colors and one image having 256 colors keeping size constant. It's totally unnecessary and a waste of energy and file size. Once again, do you browse the web in 16 colors? If you do, please shut your computer down, go outside and think hard whether you would consider farming, gardening or any less stressful activity.
One very important conclusion we get from the above is that you absolutely must pay close attention to the dates when tutorials are written, just because in the online world things change so rapidly. This is also the main reason why I didn't write this article as a true step-by-step howto for a specific platform. Some of the stuff I wrote here will probably become obsolete soon, but I want to leave you with the basics, I want you to understand how things work. If you do get a good grasp of the basics, you will find that you no longer need that step-by-step tutorial, instead, you can just take any available tool or platform and work with it.
2. Name your file 'favicon.ico'.
If you want to adhere to the proper web design standards, you must name your file 'favicon.ico'. Most browsers search for this file by default.
Know however that with modern browsers, particularly Firefox, you can have different favicons with different names, as long as you design the pages to point to the proper file.
You can of course have a combination of both scenarios, in which case Firefox displays your custom favicons, while the rest of the browsers grab the standard 'favicon.ico'
3. Place the favicon at the "root" level of your site.
The "root" of your site is the place where your "home page" resides, i.e index.html (or index.htm, or index.php, etc.)
If you intend to get really creative and use different favicons on different pages, then upload the files in their respective locations. Common sense dictates that you can only name your different files the same (favicon.ico) if they go into different folders (same way as different folders have different index pages). If however you work with different pages located in the same folder (directory), then you must name your files differently and hardcode the exact names into the individual pages.
Whatever you decide, it is advisable to always have a favicon.ico in the "root" of your website, so it can be grabbed and displayed by all browsers.
4. Use the LINK tag on every page within the {HEAD} section. IMPORTANT NOTE: please replace all "{" and "}" brackets with "<" and ">" brackets.
Place this line between the {HEAD} tag and the {TITLE} tag (with the proper "<" and ">" brackets - see above note):
{LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/favicon.ico"}
Use hardcoded locators (such as http://www.mydomain.com/favicon.ico) and not relative ones (such as ../favicon.ico).
You might want to know that in general, just having a favicon.ico in the "root" of your site is sufficient. However, some browsers will not attempt to retrieve the favicon unless there is a LINK tag such as the one above. As a workaround tip, it is said that if you place the above code only in the index page of your site, it should be sufficient, as the browser will grab and store the favicon.
Test your favicon file. With Internet Explorer, in some cases your favicon may not appear when you test it. If you have this problem, following these steps:
1. Delete all current favorites to your website.
2. Clear your History and Cache files.
3. Clear your Recycle Bin.
4. Restart (reboot) your PC.
5. Bookmark your site. Your favicon should appear.
Common favicon file problems (mostly with Internet Explorer type browsers):
- Favicons are not permanent and are stored in your temporary Internet files folder (browsers like Firefox use a different approach and do not store favicons as separate files).
- If your Temporary Internet Files folder is deleted, your favicons will be lost.
- Internet Explorer 5 sometimes fails to download the favicon automatically.
- Some Web hosting services may not support .ico files. If you're in doubt, ask your hosting service.
Get more information in my other favicon related articles. Just Google for "The Favicon, an untapped image promotion trick" (with quotes).
In conclusion, remember, you must design with all users in mind, and while I strongly favor the use of modern, progressive and unusual eye candy techniques, I urge you to never ever do it at the expense of the folks who can't see it.
Since this article is about best practice, you should have loaded on your computer every possible version of browser that can be loaded on your computer without crashing it. Ideally, you should have different operating systems, a PC, a Mac, etc., but few people can afford this. I think the minimum you should have is Internet Explorer, Firefox, Opera and Lynx. If all your features work in Explorer, Firefox and Opera (and whatever other browser becomes popular if you are reading this and an 'old' article), and your site is still usable and can be easily browsed in Lynx, then congrats, you did a banging job and your efforts will be rewarded by an increased number of happy visitors!
About the Author:
Andrei co-owns Bsleek - a company that specializes in web design, hosting, promotional items, printing, tradeshow displays, logos, CD presentations, SEO and more.
Andrei has amassed an extensive technical knowledge and experience through his career as the CIO for a major travel management company and through his past careers in military research, data acquisition and airspace engineering. He also consults for Trinity Investigations, a New York based PI firm.
Bsleek Web Design - If we build it, they will come.
WebmasterLore.com and on behalf of individual copyright
owners.
