- Frank West
Favicons, otherwise known as `Favorite icon` are the tiny 16px * 16px image displayed next to the page title of a website. Although small they can have a big impact and today I will be looking into 115 of the most popular websites around to find out the best way to approach creating your own favicon.
- Red (25)
- Blue (22)
- Black (21)
- Mixed (11)
- Orange (10)
- Green (7)
- Yellow (5)
- Grey (3)
- Purple (2)
- Pink (1)
- Brown (1)
Do all websites use favicons?
Much to my surprise 7 of the 115 websites did not have a working favicon.
What do they contain?
The more letters and numbers a favicon contains the less useful it is, most websites seem to have learned this already.
- 52 favicons contain zero letters or numbers
- 35 favicons contain one letter or number
- 6 favicons contain two letters or numbers
- 6 favicons contain three letters or numbers
- 3 favicons contain four letters or numbers
- 3 favicons contain five letters or numbers
- 2 favicons contain six letters or numbers
- 1 favicon contains seven letters or numbers
Which are the best?
Strong, clear symbols work well along with single letters, but they must use at least 50% of the space to stand out enough.
are examples of favicons which single handedly tell you which website you are on.
Which are the worst?
Lots of letters and small symbols make for terrible favicons, even if your logo is globally known, cramming it into a 16*16px image is not always wise.
are examples of terrible favicons which are hard to recognise and may just be a smudge.
If you want your favicon to represent your website then the trends would suggest using a single letter or just an icon in red, blue or black. Try to avoid the lazy option of shrinking your logo down unless is really works well at the favicon size.