All
About Favicons
Mike
de Sousa, Director, AbleStable
A Favicon (pronounced fav-eye-con) is short for
Favorites Icon. This tiny 16x16 pixel image file
often resides in the address line of your browser
as you surf the Internet, or within the Favorites
menu if the site is bookmarked. Here's a guide to
the tiny world of this powerful branding image file.
A Little History
Although favicons were only originally viewable
on Microsoft's Internet Explorer (IE 5), Opera,
Netscape, Mozzilla, and the Mac's Safari browsers
now all support them, and for those that don't,
the icon will simply be ignored.
Defining the Favicon
A favicon is a special image file and has the file
extension .ico. Any icon file can be used as a favicon
provided the icon file is 16 x 16 pixels in size,
can be viewed in at least 256 colours, and is called:
favicon.ico.
If
the favicon.ico file is in the root folder with
other web files on the server, then the browser
will often automatically download and use the favicon,
but be aware, different browsers behave in different
ways.
Internet Explorer 6 for example will only show an
icon after a site has been bookmarked. Some years
ago the favicon was a rough and ready means of telling
the webmaster how many had bookmarked their site.
That however has now changed as many browsers, including
Opera, Netscape, and Safari, show favicons on the
address bar by default.
The Assertion of Company
Brand
A favicon asserts a company brand much like a company
logo. Indeed many favicons like the one featured
at AbleStable are based on the main logo. There's
little doubt that when you scan down your bookmarked
websites in your favorites list, favicons stand
out from the crowd. Favicons may be small, but they
can be highly effective at reminding the user about
a company and its website.
Creating Favicons
There's more to developing favicons than you might
at first presume. Don't think changing the file
extension from .gif to .ico will do the trick as
the .ico file has to be 'built' by a special graphics
program.
Creating an effective favicon.ico is a particular
challenge for the designer as the visual information
needs to be conveyed in a very limited space. To
work well the icon needs to convey the site's identity
without appearing visualy cluttered.
There are two kinds of program that can perform
this task. Either a dedicated professional icon
editor like the excellent IconWorkshop from Axialis
(opens new window),
or a program that can convert or create icons as
part of its feature-set, like the freeware application
Toolbar Paint which is highlighted later in this
article.
The screenshot below shows some of the tools available
within IconWorkshop which
creates, extracts, converts, manages and redistributes
Windows icons (ICO) and Icon Libraries (ICL). The
newest version of IconWorkshop also works with
Macintosh icons even though Macintosh icons are
entirely different file formats. There are other
Windows
based icon
editors, but
none that I've come across that offer such comprehensive
and usable features.
The simplest root I've found to developing an icon
is to work with an image editor you're already familiar
with, on an image 32x32 or 16x16 in size. Save your
creation as a high quality .jpg without compression.
Import that file into your icon editor and then
fine tune it from there.
Deploying Favicons
After you've created your favicon the next step
is to upload the image file onto your web server
in binary mode (check your FTP settings). You'll
need to place the favicon.ico in the root directory
of your web server where your main index.html page
is located. This is the location that browsers will
search for the favicon.
Although it's not strictly necessary to provide
any code in your web pages, favicons are notoriously
'shy' and may not appear in some browsers without
some additional 'encouragement'. Inserting the following
piece of code somewhere between the <head>
and </head> tags on your pages will help:
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
or
<LINK REL="SHORTCUT ICON" HREF="http://www.yourdomain.com/favicon.ico">
Change the path and icon filename above to match
the location of the icon file on your site. Also
be aware the icon graphic filename should be lowercase
and that for complete coverage you may need to copy
the favicon icon to each folder on your server.
Testing Favicons
The
favicon may not initially appear in your browser
when you first test it. Try the following when bookmarking:
• Clear all temporary
Internet files including your browser cache and
history
• Remove any
and all bookmarks (favorites) to your site
• Delete everything
in your Recycle Bin
• Restart Windows
• Navigate to
a neutral site away from your own before bookmarking
• Close all programs
except your browser when bookmarking
• CTRL+D will
save the link in your Favorites folder in IE
• Test on a variety
of browsers (Internet Explorer is the most problematical)
• Wait for another
day before seeing whether the favicon shows up
Conclusion
You don't need to splash out on a professional icon
editor to enjoy the benefits of the favicon. There
are freeware graphic editors which will also produce
good results.
 |
The
freeware editor Toolbar
Paint is targeted at developers who wish
to design their own toolbar button graphics
but can also be used as an icon editor.
Toolbar Paint includes image manipulation tools
to replace colours, apply gradients and more.
The great news is that it's available as a free
download at AbleStable! |
If you have a website there's no excuse not to ensure
your favicon lays in wait to jump on board the next
browser that opens your page. The favicon not only
brands your site, but adds just that little extra
flare to your online presence...
|
|
|
|
