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's favicon


PayPal's favicon


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!


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

If you need help with your don't hesitate to contact us.

Enjoy this article?

Subscribe for weekly insights