The Favicon, an untapped image promotion trick - Best practices by
Andrei Smith
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.
|
