AbleStable®
go to Reviewsgo to Servicesgo to Registered Usersgo to Resource Centrego to AbleStable: Helpgo to About Us
go to AbleStable: Home Articles
go to Search

go to Exhibitions Centre
  The Internet: exploring the world of creative professionals  
go to Help
go to Resource Centre
go to Library
go to Articles
go to E-Books
go to Glossary
go to Reviews
go to Web Link
Library > Articles > The Internet > 023

E-mail this web page address to a friend or colleague
Enter their email address below (no record is kept of this action)

     
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

Browser Icons

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.

Browser Address Bars

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.

Icon Workshop: a professional Icon Editor


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.

Freeware Icon Editor 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...

     
       
 
Contributor Information


Mike de Sousa is the Director of
AbleStable®. Mike has been commissioned as an artist, music composer, photographer, print and web site designer, and author.

If you observe inaccuracies in our articles or wish to contribute an article or review to be included at AbleStable® visit Feedback.

Copyright Notice
Although our contents are free to browse, copyright resides with the originators of all works accessed at AbleStable®, and unauthorised copying or publication of our site contents is strictly prohibited. To use our specially selected premium content go to Content Syndication and Licensing

AbleStable © 2002-2007

 
     
       

 All Material: AbleStable © 2002-2007
go to Frequently Asked Questionsgo to Feedbackgo to Press Centrego to Privacy Statement