The Favicon, an untapped image promotion trick - Best practices
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!