- 1.Web design attention to detail – Favicons
- 2.Web design attention to detail – Customised 404 pages
In this series of articles we look at small details of website design which won’t change the world, but will add to the overall engagement and professionalism shown by your website. This article looks at the use of favicons.
The word favicon is a portmanteau based on ‘favourite’ and ‘icon’ and refers to small images used to identify websites.
Where you can find favicons
There is some variation between browsers and operating systems, but these are the sort of places your favicon will appear:
Google search results
Drag to desktop
Why favicons are important
- Favicons improve the usability of your website by making it easy for users to identify you from a list of tabs or bookmarks.
- They are also another tool in the armament for reinforcing your brand.
- A great favicon can really make your website stand out from the crowd.
What makes a great favicon
Because favicons are so small it’s important to choose an image which is simple and clear. Ideally it should be of your logo, or part of it. Many companies (for example Sainsbury’s, Costa Coffee and easyJet) use the first letter of their name combined with their brand colours to create an effective favicon.
Use strong colours which will contrast well with light or dark backgrounds. If this doesn’t work for your logo, then when you create the image use a solid coloured background (see the Amazon and Insightly examples below).
The favicon file should be a .ico, .png or .gif format to ensure it is supported by all browsers. A variety of image sizes are required from 32 x 32 pixels (for browser tabs) upwards (so suit the many different places they’re used in). Animated favicons are supported by some browsers, but not all. We don’t generally recommend animated favicons as they can be seen as rather ‘gimmicky’.
Some favicon examples
The Amazon favicon is an amalgamation of the first letter of their logo with their brand ‘smile’ underneath it. Because the lettering is black they’ve used a solid white background on the favicon to ensure it will show up clearly on all browsers.
Using their distinctive orange colour, easyJet have gone for a simple letter ‘e’ as their favicon. Eye-catching and easily associated with their brand.
Twitter’s bird logo is a great logo to transfer to favicon size as it’s simple enough to be seen clearly even when miniaturised, and the mid blue colour stands out against the majority of backgrounds.
Insightly have used the first two letters of their logo for their favicon. However, instead of showing this as red lettering on white (which would match their logo) they’ve chosen to use white on red, which creates a more vibrant and more easily noticed favicon.
Want to liven up your website with a favicon? We can help! Get in touch to ask us about designing and implementing your favicon.