A Guide to Understanding the Favicon

Michael Gearon

Last updated on April 28, 2020

The Favicon is sometimes an overlooked aspect to digital branding, yet this small opportunity is just another way to promote and reinforce your brand to your audience. Although this is a very small part to the website and the brand as a whole, it shows an attention to detail that could separate you from your competitor.

What’s a Favicon?

A Favicon is a small icon that commonly appears next to the website title in the browser tab. They were introduced in March 1999 when Microsoft released Internet Explorer 5 and were then standardised by the World Wide Web Consortium (W3C) a few months later in the HTML 4.01 recommendation in December 1999. Interestingly, the word Favicon is a blend of favourites and icon.

Favicon’s also appear next to the website name in a list of bookmarks. As we recognise images faster than text, they are ideal for quick accessibility.

Why have a Favicon?

As well as being useful with regard to recognising a website in a user’s favourites or tab bar, a Favicon can act as a miniaturised storefront sign that allows brands and organisations to attract attention and stand out from the crowd. It builds brand awareness and it can be vital to the success of the brand. Some of the best companies, such as McDonalds, Twitter and Apple, are recognised just by their colour, shape or typography.

If you don’t have a Favicon in place, the browser will display either a bank page next to the title of your website or, depending on the browser you are using, a worldwide globe, as used by Internet Explorer. Although this is not a complete disaster, it doesn’t communicate quality or professionalism and an extra source of brand advertising is lost.

An old quirk with Internet Explorer 5 was that you were able to record the amount of people bookmarking the website by simply counting the requests for ‘Favicon.ico’ in your web server logs. Unfortunately, it is no longer possible to do this and there more reliable measurement tools, such as Google Analytics, which provide an accurate breakdown of your audience.

Designing across devices

The problem with designing a Favicon is the sizing. The most popular size is 16×16 pixels, which is used in the tab bar and address bar. This isn’t much room to work with, therefore the Favicon needs to be minimal and clear, for example using a limited amount of contrasting colours. The most common type of Favicon file format is .ico which was conceived by Microsoft. They recommend that the Favicon should be in 16×16, 32×32 and 48×48 pixels, and all of these can be in one single file as the ICO file can contain multiple graphics.

In their own Favicon, Google use the first letter of their company, with the recognisable blue background instead of their full logo which would overwhelm the small space.

Home icons are similar to a Favicon as they both provide a way to visually bookmark a website on your phone, tablet or computer. Icons for Apple products have a range of sizes, with the largest being the iPhone 6 Plus (@3x) at 180 x 180 and the smallest being the iPad 2 and iPad Mini (@1x) at 76 x 76. For more information on the icon size visit: Apple iOs Human Interface Guidelines. For Android devices, it isn’t possible to define all the icon sizes due to Android being open sourced, but it is recommended to use 192 x 192 pixels as it is easier to scale down a large icon.

Tools

There are a range of devices to cater for, but to save you time there are plenty of websites that will create multiple versions of your design for all the different icon sizes and devices. If you want to spend a little more time on your home icons and Favicons, you may want to create a different home icon to your Favicon because you have more room to utilise for the home icon. Below are some useful links for creating a Favicon:

Favicon CC
Favicon Generator
Dynamic Drive
Chami Favicon from Pics
Favicon & App Icon Generator
Favicon Generator & Gallery
DeGraeve Fvicon Generator
Anti Favicon
Gen Favicon
Favigen

Additionally, here are a few links for inspiration:

Fresh Favicon
The Favicon Gallery
Delta Tango Bravo

What if I don’t have a Favicon?

It’s not the end of the world, you don’t necessarily need a Favicon. However, if you want to communicate your brand well then it is best practice to have a range of Favicon’s and/or icons suited for all devices. By not having an icon in place, the tab will show the default browser icon. Also, if you haven’t got a correctly sized Favicon it will be stretched, causing it to become blurry, giving a bad impression of your brand to your audience.

Useful Links

Written by