Even the little details of web interfaces can make a great impact not only on their usability but also on the level of recognizability and successful promotion. One of these elements is obviously favicon, a small but powerful player in the field.
Favicon is this icon that appears on your browsers’ tab
What is a Favicon?
Imagine just for a short moment that you have opened your list of bookmarks and saw that all the links are only written in the text lines. Just a huge list of copy to get through if you need a particular webpage. Sounds horrible, doesn’t it? This is the time when the favicon comes into play and adds its two cents to saving the world.
Basically, the word “favicon” is a shortening of the phrase “favorite icon”. The term is used to define a file containing a small icon associated with a particular website in general or a particular webpage if it needs this sort of special visual support. The icon is added to the website/webpage code and appears on its tab next to the page title if the applied browser supports the tabbed document interface. Also, the icons are added to the bookmarks list helping to mark out the pages visually.
By the way, this type of icon has a number of other names like browser icon, URL icon, bookmark icon, tab icon, website icon, shortcut icon. Such a variety of titles shows the comprehensive nature of this small but powerful detail of the web interface.
Why are favicons important?
We live in the times when people get tons of information on not only a daily but even hourly basis. There is so much data around us that we are physically unable to consume it all because the time doesn’t grow correspondingly.
The World Wide Web of today presents the active model of the world. So, internet users overwhelmed with a great amount of data constantly face a variety of choices. They have to choose where to buy things, entertain themselves, communicate, study and do business. In terms of growing competition with more and more well-known and brand new websites, the role of recognizability and memorability of a digital product grows as well. Favicons contribute much to making websites user-friendly due to the benefits mentioned below.
Credits: TGC
Benefits of favicons
They enhance the usability of the web interface. And it’s not only about a particular website but also the browsing experience in general. Most users are visually driven creatures and perceive images faster than words. It means that favicons save precious time on searching the needed tab or link: the small image will work as a hook, a visual tag enabling the user to find the needed content in split seconds just looking through the set of images instead of reading the copy of all the links or tabs one by one. It may seem that saving the short seconds is not so influential, but if you consider the numerous times when users do it day by day, the general picture will look impressive.
They strengthen the consistency of design solutions. Favicon is an integral part of the web interface, it is perceived as a functional element of the layout which is involved in providing positive user experience. Usually, its design follows the same stylistic concept and contributes its part to a web page unity.
They support brand awareness and recognizability. In fact, the favicon works the same way as well as logos do for physical products or places – that is why logos or their variations are often chosen for this role. Favicon is a memorable and catchy element that enables a user to find or notice the digital product aka website out of the crowd. Moreover, if a symbol, mascot or lettermark for a website is thoroughly designed and its legibility in small sizes or resolutions is tested properly, seeing it time by time users subconsciously remember the image better and better. This factor supports the general promotion strategy and increases brand recognizability in a variety of sources it can be found.
They allow users to find a necessary page much quicker and easier. A favicon can be somehow compared to health: people understand its importance only when it’s poor. If everything is done correctly, the icon is legible and good-looking, we don’t even think about searching for it, it happens automatically. Vice versa, if the favicon is not added or is illegible, that is the moment of having a weak point in user experience. Modern users expect favicons as a must-have in website design as it saves their most precious resource – time.
Credits: Icons8 Photos
Favicon format
The first who started applying favicons were Microsoft: in spring 1999 they rolled out the Internet Explorer 5 which started the history of favicons. So, originally it was a file used in .ico which is a specific file format used for icons in Microsoft Windows. Today, the variety of browsers and operating systems apply this feature allowing different formats of favicon files. They can be accomplished in ICO, PNG, GIF and JPEG format which is supported by most of the widely used browsers. However, some formats such as APNG, animated GIF, or SVG may be not supported by some browsers.
So adding the favicon, don’t forget to test the website in diverse browsers and analyze which ones are most frequently used by the target audience so that the web resource could be presented effectively.
Favicon size
As for the sizes, the first thing to remember is that favicon should be inscribed into the square shape. For the ICO format, icon files can be 16×16, 32×32, 48×48, or 64×64 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth.
To get further, the Icon Handbook offers the helpful chart of sizes for favicons applied in different formats:
Favicon Generators
There is a number of services that can help generate the favicon according to the necessary parameters and convert different formats to ICO file. Following the simple instructions, even non-designers can generate the favicon for their website which will follow the requirements of good performance.
Some of the popular ones are:
Icons8 app that already includes 65k icons; Windows version can export them to favicon format
Dan’s Tools Favicon and App Generator
To learn more about icons, check our articles about types and functions of icons and guide to icons sizes and formats
About the author: Marina Yalanska, tech/design blogger and researcher, content writer for Tubik Studio
