Favicon (from the English “favourite icon”) is a subpage icon, which was originally intended for better clarity of the so-called special bookmarks in the browser. However today, it extends its use and process, for example, to the top bar of the browser with open windows and tabs, to the browsing history, and the search engine.
So it is clear that this is an important element of the site. This 16×16 pixel icon helps to improve the clarity and identifiability of your site. In fact, aside from helping your website look better and feel more professional, it is also an excellent way to showcase your brand logo and make a memorable impact on your users.
Why is favicon important?
When you save the bookmarks in the browser, it is very difficult and time-consuming to return to the bookmarked pages by name. You might spend hours searching for a certain bookmark you have visited a week ago, and sometimes the trying is in vain to find the right one. especially is you use these bookmarks on a daily basis and sort them into f.ex. folders.
This small icon that is characteristic of your brand and which helps to quickly identify and assign this icon to the brand name, is extremely helpful. And it looks so much better when the bookmark is just an icon, compared to a plain line of text.
The better the icon the more memorable the brand
Basically, this icon is the first thing a users sees whether you are using your brand logo or any other strategies. And since most of us usually have several tabs open at the same time in our browsers favicon facilitates the user’s orientation. Basically, when you have more than one tab open, you can find your way around fastest, based on the icon.
Try to take a look at your browsing history or favourite bookmarks. You will soon realize that the first thing you recognize is not the URL you visited or the name of the website. It is, in fact, this small, yet extremely powerful icon.
What should a favicon be like?
Generating and inserting a favicon into pages is not complicated, which is why most pages have it today. However, the quality of these icons varies. In order for the favicon to fulfil its purpose well, it should follow the following principles:
- Display schematic and simple shapes
- Try to fit in the size – the full company name usually doesn’t fit in a 16 × 16 pixels space
- Respect corporate design. It can contain the logo or just a part of it, a combination of company colours, etc.
- Be original and stay different from the competitor icons. It’s always an asset
How to create a favicon?
Creating a favicon is easy. You can do it yourself, using design tools like Adobe XD, Photoshop and so on, you can ask a designer to do it for you, or you can use available generators. Regardless, the optimal dimensions are 16×16 px, yet you might find favicons which are twice the size.
This is because most web owners want to maintain the quality of the icon. So, it is also recommended to use image formats that are scalable, such as PNG or SVG.
Here are some popular generators for favicon creation:
The icon and its importance for SEO through search engines
The most popular search engine, Google has been displaying the icon of pages in organic search on mobile devices since May 2019. Other search engines have been displaying the favicons even before Google.
Other examples are DuckDuckgo that showcases the icon in its browser version and the Russian browser Yandex, who shows the icon in the search results instead of the page preview.
This is a useful guide for users who can remember an icon from a previous page and find what they are looking for more easily. Therefore, the more clear and recognizable your favicon is, the more chance you have at recurring visitors.
Not to mention that a well-known favicon or brand logo is also associated with trust, which means that even new users who have seen it before might be more inclined to visit your website instead of a competitor if they feel like they trust your brand.
