Favicons
Designing Favicons: Importance, Design Process, and Trends 2021
For a long time, favicons were not getting enough attention. Nowadays, with the tendency of more and more businesses going online and digitalization of almost all aspects of our life, favicons are gaining more popularity. And that’s not a surprise, as they are a significant part of brand recognition.
What is the favicon?
The word “favicon” is a shortened version of a favourite icon. Favicon is a small icon that appears in your browser tab. Each time you open a website, a favicon of that website will be visible in your browser window.
There are many good examples of favicons on the web. From the world-famous, you can think of companies as Airbnb, Invision, Google, Amazon, Paypal, Facebook. No matter how many tabs you have open, you will recognize the ones from these companies.
Where is Favicon Used?
People are spending a significant amount of time online, and your digital recognition is of great importance. Favicons are mostly seen in 4 locations:
- The browser tab
Many people have multiple tabs open at the same time. The favicon gives them a clear understanding of which websites they have open and which one they need to navigate to, depending on their current needs.
2. Bookmarks
Google Bookmarks are your saved shortcuts to your favourite webpages. You can navigate to them in seconds from anywhere. You can choose them to be visible in the top bar of your browser window just under the address bar or to navigate to them from the menu.
3. Browsing history
That’s a handy function if you want to get back to the website you had open recently. When you have a long browsing history or/and need to find a website from some days ago, an easily recognizable favicon is a great help to find what you are searching for.
4. In Google search results on mobile devices
Google has recently updated its mobile search design, and they started showing a website’s favicon in the search results.
In all these locations, we can say that favicons perform the same functions.
The main favicon’s functions
Favicon is tiny, but a powerful player in the field of web usability. It represents the following functions.
Brand Awareness & Recognition
A favicon allows your site to be more recognizable in web browsers. Having a good favicon that represents your brand lets them identify your website among many other open tabs. Favicon is a memorable and catchy element that supports the general promotion strategy and increases brand recognizability in a variety of sources it can be found.
Navigation
Favicons save time and increase the user experience as the user is able to open the correct tab immediately. Thanks to a visual tag, the user can find the needed content in split seconds just looking through the set of images instead of reading a copy of all the links one by one. A favicon is a digital reference to the place you have left off. Users shouldn’t think long about where they should go, the visual guides them the right way.
Consistency of design solutions
Favicon is an integral part of the web interface; it is perceived as a functional element of the layout that is involved in providing a positive user experience. Usually, its design follows the same stylistic concept and contributes its part to a web page unity.
Also, designers themselves are always happy to see nice favicons. Your brand can make them happy :) Read further some rules and tips on how to make a great icon.
Designing the good favicon
Favicon is part of your overall branding. It should resonate with your brand and fit your marketing mix. Favicon is based on your logo. Generally, it’s a modified version of it that meets all the requirements for its visibility and identification.
In case you are a new business and don’t have a logo yet, start from designing it first, but keep in mind the creation of a favicon from it.
Either it’s a new logo or an existing one there are a few standard practices to make a favicon:
Shape
The space for a favicon, by default, is square. If you want anything else, a transparent background is necessary. A favicon should connect to your brand identity, but is often too little to include an entire logo. Consider using some part of your logo, which is recognizable and can be translated to favicon.
Mostly, companies are using as their favicon:
- A part of their logo (first letter/ some of the letters) with keeping the style and colour scheme. Examples here can be Medium, Linkedin, Google.
- The imaginary icon as a favicon. Examples here are Instagram, Spotify, Tableau Public.
Avoid complex elements and colour overload in the favicon design. It should be simple, visible, and specific to your brand.
Size
Make sure the file is small, but not too small. At one time, all favicons were just 16-pixel squares. That’s not the case anymore with the technology progress and more high-definition retina screens. The standard size for most desktop browsers is currently 32×32: which replaces the previous 16×16 size. Still, one image can’t work on all browsers, so you will need to test it.
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 formats, which are supported by most common browsers. Some formats such as APNG, animated GIF, or SVG may not be supported by some browsers.
To cover all of the Browser necessities, you basically need three sizes (16x16, 32x32, and 48x48 full-canvas icons) and a .ico file in the root of your site. Three sizes are required for various pixel densities. a “.ico” file is needed in case something goes wrong, to let the browser find the backup icon.
The Icon Handbook offers a helpful chart of sizes for favicons applied in different formats.
Favicon Generators
There are a variety of services that can help create the favicon according to the right standards and convert different formats to the ICO files. Following simple instructions, everyone can generate the favicon for their website, which in turn will help with building brand awareness.
Some popular ones are:
Make good use of this miniature, overlooked but still very powerful detail. Apply it to your website and stand out in the crowd. It doesn’t take too much effort but is crucial for usability and awareness.
Favicon Trends
There are 3 main trends we have noticed that stayed from the previous times or appeared lately
Flat design
While much of the hard focus on flat design has melted away, icon design is still pretty flat (or at least almost flat). This is probably due to the small size of the design object as a favicon and the ability to combine the pure nature of flat design with other styles and colour schemes.
Colours
Again, due to the size of the object, colour plays a huge role in the favicon design to stand out. It’s common to use primary colours and bright colours. Primary colour palettes are a bold and engaging choice for small design elements. This icon design trend makes use of red, blue, green, and yellow (along with purple and orange) to create a basic set of colour rules.
Pretty often, we can see a combination of two colours where the emphasis is made on the contrast of them. When it comes to the design, pick a primary colour for most of the icons. Use a secondary colour to accent an element of the icon. (Think of using the primary colour for 70% to 80% of the design and the secondary colour for the rest.)
Using bright and contact colours brings the focus on colour and draws attention to little elements on the screen.
Interactive Favicon
Some businesses don’t stop on the image and decide to make it interactive. It is made to enhance the favicon’s functions we described above. Lt see a few examples of companies embracing this approach.
- Google calendar — Favicon displays the day of the month.
- Trello — favicon reflects the colour of the artboard, even if it’s a custom background. It makes it easier to scan when you have multiple boards open at the same time.
- Github — their little mascot favicon changes colour depending on the current system status.
Conclusion
Businesses online are competing for the user’s attention. Each design detail matters. Make sure to make your website stand out from the crowd. Due to the size of favicons, many people don’t find it worth the time to invest in their developments or designs. However, investing your time and energy in it once, will bring more brand engagement and recognition to your business and make it easier for the user to find it in the variety of open tabs. Create a favicon that resonates with your brand and start to see the benefits of using it.
For UX & UI design tasks and web development of your website, software, or app contact Amsterdam Standard.
