What are favicons?
The small graphical representation of the website you are visiting, which is visible on the left to the website’s name in the address bar, is called a favicon. It is a shortened expression for ‘favorite icon.’ It helps you identify the visited website among the many open tabs. For example, The fancy P that appears on the tab left of the ProCreator website’s address bar is the favicon for us.

Favicon-1
People tend to confuse it with the logo. It can or cannot resemble the logo, but the intent of both of these a very different. Favicons are generally a square of  16 x 16 px used by web browsers. However, the size can vary when you design the favicon for a mobile screen. On a mobile screen, the favicon is the favorite apps you set on your home screen.

Various Favicons Examples

Here are multiple examples of how the big tech giants design favicons for them.

Favicon-2-Google

Google makes use of a circle with a G written inside it.

Favicon-3-Facebook

Facebook makes use of its logo itself, with the alternate color scheme.
Favicon-4-Amazon

Amazon also makes use of a square with an ‘A’ written inside, resonating with the first letter of their logo.


How to make a favicon?
This can be achieved in the simple steps mentioned below-

  • Choose the correct image, resonating with your brand’s identity or logo. It makes it easier for the user to identify your website or app. The image you choose can be of PNG,  JPG  formats. The most accomplished is the ICO format, which is easily recognized by all web browsers.
  • Choose the correct size. It can range from 16px (accepted by all web browsers) to 128px (for Chrome Web Store).
  • The easiest way people choose is to select an online tool and then downloading the resulting icon.
  • The icon can then be exported and sent across to the developers.

What is the purpose of a favicon?
Favicons have become popular because of the branding strategy the companies these days follow. It’s an excellent way to make your brand feel recognized among the thousand other opened tabs in the browser.
This helps in user recall, thus enhancing the user experience. This gives a boost to your online branding and helps set up a recognizable entity for your brand.
Favicon-5-bookmarks
When a user bookmarks your website, at a later point when he or she decides to return to the site, the favicon will make it easier for them to recognize it. This increases the chances of a visitor’s click for your website.

Conclusion
Adding favicons add legitimacy to the website, helps you identify among the bookmarked sites, and the many opened tabs on your browser. A small piece of design but can very well act as a reference for your brand or product.

 

Rashika Ahuja

Rashika Ahuja

An individual who firmly believes that an interface speaks to its users via content. A content creator who helps brands narrate their story most prolifically — skilled in UX Writing, Copy Writing, Micro Copies, Content Marketing.

Leave a Reply