Favicons: Everything You Need to Know About Them

Favicons: Everything You Need to Know About Them

As you have started reading this article, how many tabs do you have open in your browser?

Let’s do a quick survey on this!

There are usually two kinds of internet users, and you need to identify which type you are!


Do you prefer working with 3-4 browser windows open? 

or

Do you feel at home with multiple open at the same time?


We’re guessing by now you have your answer ready!


So, if you are the first kind, well then congratulations, you’re one step closer to multiple window land!


If you are the second kind, we’re sure at least at a subconscious level, you have relied on a tiny logo at the top of your tab to figure out which page you are opening. 


There you go, Favicons to the rescue! 


So, what exactly are they?


When you open a web browser, you usually see your favorite websites mentioned right on the home page. The name is displayed along with an icon which is a distinguishing factor that states its identity without the need of a name! Those, my friends, are favicons.

Let’s take this one step further. Imagine you have multiple tabs open in your browser as in the image below. How do you know which page is which? 

If you cannot read the name, you can surely see the small icon next to the name! Those are favicons! 

An icon associated with a particular website, typically displayed in the address bar of a browser accessing the site or next to the site name in a user’s list of bookmarks. The word has quite a unique ring to it and this is because of its combination of two words. “Favourite” and “Icon.”

So where did all of this start?

Back in 1999, Netscape Navigator and Microsoft Internet Explorer, the two largest browsers, were tussling for control of the virtual markets. Microsoft Internet Explorer was all set to release Internet Explorer 5, which would blow Netscape Navigator’s market share out of the window. To push the boundaries, and gain significant advantage over the competitor, both organizations would experiment at the backend, and this lead to the birth of Favicons! 

 Microsoft’s feature, where users could add websites to their favorite’s list, lacked easy navigation. Bharat Shyam, a developer at Microsoft made a 16 x 16px icon addition that could help users differentiate one website from another.  

Shyam developed a favicon.ico file that could directly be dropped in the root directory of their web server. Internet Explorer would know to look there for a possible icon before adding a site to a user’s favorite list.

 His choice of a .ico format was due to the standard Windows format for icons used extensively by the Windows operating system. 

 The result?

 Huge success! 

At first, it was used only as a navigation aid in the favorite’s list but soon it caught on and was used as a pictorial representation of the website itself. Additionally, it was also used to get an accurate count of the number of people who had added the website as a bookmark by digging through the server logs for the favicon.ico file.

So all said and done, why are they so important?

  • It helps with a recall as users start associating your favicon with your website. Take Gmail for example seen below. Just seeing the envelope icon is enough to enlighten the user of the page’s name.

  • Finally, it's good for SEO. While not being directly responsible, they are indirectly responsible in the following way: 
  • User Friendly Websites Lead to Increased Usage:
    • Having a favicon visible on your browser tabs, bookmarks, history archives, etc makes the website user friendly. It saves time and allows browsing without difficulties. This increases the likelihood of user interactions.
  • Bookmarks:
    • Websites with favicons have a certain advantage over websites that don't. They stand out and are in a better position to be revisited. Additionally, the Chrome browser picks up data for bookmarked websites and not having one increases the chances of missing out on google’s data. 
  • Branding and Visibility:
    • SEO is all about branding and marketing. The better the visibility, the higher the chances of brand recall.  

You can check out all about Favicons and SEO on Favicon SEO by SEOBook!


So how do you make a favicon?

Well, there are a few ways to go around this. You could:

  • Use design tools like Photoshop and Illustrator to create a unique icon.
  • Use a professional agency such as ICON, ARTUA, etc. to design logos and favicons
  • Use online favicon generators with a pre-existing icon or logo.

Check out  a few favicon generators below:

  • Favicon.cc
  • Dynamic Drive
  • Favicon from Pics
  • Favicon Generator
  • Degraeve Favicon
  • Anti-Favicon
  • Gen Favicon
  • Favigen
  •  

    The Guidelines:

    Keep a few guidelines in mind while designing a favicon and you’re good to go!

    • Users can only view your favicon once they have bookmarked or are on your webpage. Hence, make yours as a representation of your brand and not a means to sell
    • Text does not scale well, so aim to design without text.
    • If your logo has text, ensure you design one without it to use as a favicon 
    • To ensure it looks good in different contexts, design two templates:
      • Logo on transparent background
      • Logo on solid fill
    • The previously preferred file format was .ico however today JPEG and PNGs are also accepted. If you want an easy way to design and export all favicon sizes, take a look at the favicon template over at Apply Pixels.
    • Each website you use it on will have a different dimension. The standard size is 16x16 pixels however, larger dimensions such as 32x32 pixels are not unheard of either.
    • A one size fits all strategy won't work as browsers will have different dimensional requirements based on the one in use.

    You can check out other guidelines in “The 2020 Guide to FavIcons for Nearly Everyone and Every Browser” by Greg Gant. 

    Conclusion:

    It's important to remember that the online world is all about recall. Favicons are just another cog in the wheel that puts your brand on the path to virtual success! Most of the world has already incorporated them into their website strategy.

    When are you getting on the favicon train? 

    Bibliography:

    (The blog has been written taking references from the following articles)

    https://thehistoryoftheweb.com/how-we-got-the-favicon/

    https://www.seoptimer.com/blog/what-is-a-favicon/

    https://www.creativebloq.com/illustrator/create-perfect-favicon-12112760

    https://www.clickfusion.co.uk/what-is-a-favicon-and-why-are-they-necessary-in-2019/

    http://www.seobook.com/favicon-seo

    https://www.emergeinteractive.com/insights/detail/the-essentials-of-favicons/

    https://medium.com/visualmodo/favicons-seo-benefits-ce21f1e91d19

    https://medium.com/@coreyhodgedotnet/a-favicon-is-that-tiny-icon-on-a-browser-tab-here-are-the-basics-to-make-one-5e9d895f3df0

    https://medium.com/cucumbertown-magazine/what-s-the-big-deal-about-favicons-why-are-they-important-2353936d47ea

    https://medium.com/@whosale/a-quick-history-of-favicon-41e51e146184