What the heck is a Favicon?
A favicon (short for Favorites Icon) is that little 16 x 16 pixel image that you see in the address bar, tabs menu, bookmarks menu and a variety of other places.
The Favicon was introduced with Internet Explorer 4
When it came out in 1997, the favicon was only supported by Internet Explorer 4. It was installed by uploading the favicon.ico file to the root directory where it would be seen by the browser and automatically added to the favorites menu.
Improvements were soon introduced that allowed designers to indicate the location of the icon from any given page using the link tag in the HTML.
More modern browsers support other image formats (such as png and gif) but given the prevalence of Internet Explorer 6, .ico still remains the preferred format.
The advantages of the favicon
It improves usability
The favicon makes it much easier for the user to find your website in the bookmarks menu or tabs bar. Instead of reading the text they can use the icon as a clue to help speed up their search.
Compare the bookmarks on the left with the same bookmarks on the right. See how much easier it is with the favicons?
It strengthens the brand and improves user confidence
At it’s core, your favicon should reflect your brand. It should have similar color, shape and contrast to the overall look and feel of your design or brand, in particular your logo. When someone looks at your favicon on the tab bar or bookmarks menu, they immediately start to form a mental picture of your website and what to expect. The longer they are exposed to your brand, the more they will remember it.
Favicons are expected on modern, professional websites. It’s just one extra step you can take to earn your user’s trust and get them to place that order. The absence of a favicon can actually cause people to second-guess their decision. Especially the extra-cautious users.
Designing a Favicon
Use simple, bold shapes
Like in logo design, your favicon should use simple shapes such as rectangles. triangles circles etc. The silhouette should be easily recognizable and internal details should be as simple as possible.
The round shape works but all the details get lost in the resizing. Starbucks could simplify the design and make it sharper.
Targert's favicon matches the company logo, it uses two small shapes which are immediately recognizable.
Use text sparingly
Text should be avoided at all costs. If you find it necessary, try to stick to only one or two letters or numbers. More than that and it won’t be legible.
The staples push button is very recognizable, the text on the otherhand is not
McDonalds uses their iconic M symbol very effectively as their favicon.
Use a limited color palette
Gradients and diverse color choices will not hold up when it’s re-sized down to 16 x 16. You should choose at least two colors and no more than four (four is even pushing it). The colors should also be obvious, don’t use any small lines or shapes within a larger shape. Those will dissapear.
Nike only uses two colors to create their successful favicon.
Use high contrast
Your favicon should have a high contrast between the background and shape. Try to avoid using a lot of white or light grays since most browsers use this as the tab and bookmark background.
High contrast in the shape itself will also help create emphasis and make your icon more clear.
Further Reading
How to create a favicon
The Favicon Gallery
Favicons: Small but significant