Why your Website Should use a Favicon

Posted 30/11/2011

Favicon Branding

What is a Favicon?

‘Favicon’ is short for “Favourites Icon”. It appears next to your website URL or on your open tab label in your browser when people are on your website and it will also appear prefixed next to the title of any new bookmarks you save. Internet Explorer popularised the term “Favourites”, it’s really just the same as bookmarks!

 

Why should I have one?

  • Be more easily recognised
  • Display your brand as a sign of trust
  • Differentiate your website from your competitors
  • It looks polished and professional (this builds trust and credibility)

This is how the Twitter Favicon looks:

The Twitter Favicon

Favicons also appear next to your bookmarks:

Favicon appearing in bookmarks menu

Did you recognise any of the above?

We can decipher information from colours and shapes in a snap, but reading takes comparatively longer.

This is what a collection of websites with Favicons look like when grouped together on a bookmarks toolbar. If people will be coming back to your site often, help them to identify it.

Favicons seen on bookmarks toolbar

What’s its main purpose?

It’s a miniature piece of branding, so miniature it’s only 16×16 pixels in size! One of the primary functions of your visual branding (your brand colours and logo in most cases) is to build trust.
If you’ve been good building up strong customer relationships, (…and I hope you have) this little mark will remind them they’ve come back to the right place and is greatly reassuring to people.

Many small businesses simply don’t have Favicons, so having one will allow you to draw from some of the perceived credibility bigger businesses have.

What if I don’t have a Favicon?

If you don’t have a Favicon this is what people will see instead. Where it says “My Website” this will usually be the title of your website.

No favicon

If you don’t have a Favicon, people will see the default icon; so having a Favicon will help your site stand out when placed in a list of other websites.

What makes an effective Favicon?

A common practice is to have your Favicon be a scaled down version of your business logo. Some logos are simply too intricate to display at such small sizes, if this is the case you may wish to convey some of the characteristics of your visual brand through basic shapes and colour. You might for example take a single letter from your logo, and this is precisely what PayPal, Amazon and Facebook have all done.

Amazon

Amazon's favicon

PayPal

PayPal's favicon

Facebook

Facebook's favicon

You might create a brand new symbol or icon that you feel represents your site or the particular theme of your site. i.e. A mechanics might use an icon of spanner, and a florist might use petals.

If you would like a Favicon and don’t already have one, your Web Designer or Web Developer should be able to help you create one. If you’d like to give it a go yourself then there’s a tool for that: www.favicon.cc —though there’s always a reason to have it done professionally!

Further Reading:

How to Setup a Goal in Google Analytics
Why have Staff Photos on your Website

 

Here’s the code you’ll need to reference your icon:


 
 
Comments
  1. So – when you have made your Favicon … how do you put it onto your website? :-)

    Lucy Cadman

  2. Hi Lucy,

    You would first need to upload your icon named: favicon.ico – into your websites main directory. You would then reference the icon with a line of code placed within the HEAD section of your page template. (I can’t paste it here, however see the last image above)

    Hopefully Actinic will have a way of allowing you to do this. If this all sounds a bit complicated or technical you may want to ask your web designer for help. :)

    David Beastall

  3. Hi David – sorry, I only just remembered to check back for your reply! Thanks for the info, and I will be able to do this. I am my own web designer – thankfully Actinic tends to make it reasonably straight forward! lol :-)

    Lucy Cadman

  4. Hi all – this post might help as it has some advice on how to create and implement favicons and why they are important – even though it was written in 2006!
    http://www.attitudedesign.co.uk/a-blast-from-the-past-–-the-return-of-the-favicon/

    Matt Davies

Leave a comment