Favourites Icons (favicon) - Small, very important but often overlooked

21 August 2007 - By Sean Fishlock

Do you want your website to stand out from the crowd ?  A favourites icon (favicon) is a great way to do it, but I'm baffled as to why more sites don't use it.  I'll explain why they are important.

Do you bookmark sites ?

I do.  You never know when you might need to recall some information from my favourite sites and blogs. 

These days social bookmarking and sites such as de.licio.us, which use communities to decide what's hot and what's not are making bookmarking even more popular.

Is your brand important to you ?

Well if you are in marketing or PR like me, you'll be itching for every opportunity for your logo to appear.  A favourites list should be no exception.  Yet, it is suprising how many sites don't have a favourites icon. 

Following from our discussion on the importance of friendly URLs, we thought we'd take a look at another bit of attention to detail which  should be a given but seems to slip by many web designers.

Below are two examples of bookmarked sites, the City of Boroondara website (which we built) and the City of Banyule (which we didn't).


You'll notice that to the left of the Boroondara link is the council's own logo, an orange and green leafy yin yang type symbol, whereas the Banyule site when bookmared (at the time of writing) has just a generic world icon.   The logo is what we like to call it a favicon, but some also call it other things, like a website icon, urlicon or page icon.  I think all these other descriptions are a bit confusing, and not really descriptive of what it is actually for.

Most people, I'd imagine, would say "big deal" and ignore this little favicon thing.  They'd say it is such a small thing that is completely trivial.  But this is not the case, it is actually very important from a usability and brand perspective.  As I often explain to customers, ignore too many small things and it adds up to a big problem.  Ignore things like a favourites icon and it can make your site look unpolished and unprofessional.

In a big list of favourites, the Boroondara link is going to stand out much more than the Banyule link, which has the same boring icon as the rest of the links.  Furthermore, if I have done business with Boroondara, then I am more likely to recognise the logo, and this means it will stand out to me.  Some people are very visual, and are unlikely to read through heaps of web addresses to work out which one is the one for Boroondara.

Problem solved?  Just upload a logo ?  Well, no, there are actually things to consider to make your favicon successful and maximize your brand and I'll briefly explain them here.

A big problem is that things are very small, so not many logos lend themselves to a favicon, particularly when words are an important part of them.  You only have a tiny 16 x 16 pixel image, to squeeze as much of your brand in as possible.  A bit of creativity and licence is required to get the best result.  It might mean (some PR managers will gasp here), that you have no choice but to create a new variation for your logo.  But relax, it is an accepted thing on the web.  Some browsers allow for larger images, but most do not, therefore to maximize the exposure to your brand, you need the skill to be able to create icons at different sizes.

Also, favicons are not just ordinary images, they are actually an Icon file (.ico) (although some browsers now suport other types of files, it is better to be safe than alienate some user of an obscure web browser), and they need to go in the root directory of a webserver.  Once the domain just of Microsoft Internet Explorer, it is now very widely adopted.  In fact many browsers will actually ask for when someone bookmarks your site even if one even if it doesn't exist.  Your web designers need to make sure they link to it from the XHTML in your web pages.

Your Content Management System (CMS) also needs to support it.  Many of these systems have re-write rules which can play havoc with favourite icons.

We make it standard practice to implement favicons on all of our sites, as we are as interested as you are in ensuring the consistency of your brand promotion.  Our Freestyler CMS has favicon support built in.  All you have to do is upload your logo and it converts it into the right format for you like magic.  We feel it is a very important aspect of attention to detail and we make sure it is part of our whole web design process.  In fact, we have a website launch checklist, and if the logo isn't there when we bookmark the site, you get your money back.  Only joking ;) but we do make sure it gets created and uploaded.  And we believe that every web designer should take the same care in the websites they build.

Comments

By Justin on 29 November 2007 at 03:31 AM

i uploaded a favicon, but it turned out like half the size of the regular ones, so you can barely see it. Is there a way to fix this? i uploaded it at 16x16 px


Name *


Comment *


Verification code *


Click to regenerate Regenerate code

Promotional Banner
We reduced staff training costs and increased customer satisfaction with our central knowledge-base. Click here to find out how.
Creative e-business