A favicon (pronounced “fave-icon”)

A favicon is a small, iconic image that represents your website. Favicons are most often found in the address bar of your web browser, but they can also be used in lists of bookmarks in web browsers and feed aggregators.

Well-designed favicons are styled to match the logo or theme of your website, that way users have a quick and easy way to recognize your website at a glance.

Here is our favicon, displayed in the Chome address bar:

What is the primary favicon file?

Answer: favicon.ico. And just to make sure: this is not a PNG renamed to favicon.ico. Although some browsers are easygoing enough to forgive this mistake, ICO is a different format, one that supports multiple versions of an image.

Question: What dimensions should favicon.ico be?

  • A: 16×16. The standard.
  • B: 32×32. Wasn’t favicon updated some time ago?
  • C: 64×64. You know, with all these new high pixel density screens.
  • D: None of the above.

Answer: D.

favicon.ico is a format originally conceived by Microsoft and the other vendors have gone along with it. Microsoft recommends 16×16, 32×32 and 48×48. Yes, a single ICO file can contain multiple graphics.

Desktop browsers often use the favicon in a tab, and on standard resolution displays, the 16×16 version is fine:

But a 16×16 icon is too small for other places: the taskbar and the desktop.

Question: What is the purpose of favicon.png?

When digging the topic, we often encounter another file, favicon.png. People have questions about it all the time. What is it exactly?

  • A: An icon for browsers which do not support favicon.ico. Such as Firefox, maybe?
  • B: A high-resolution icon. You know, with all these new high pixel density displays.
  • C: An old relic from the past. Now there are modern icons such as the Apple Touch icon.
  • D: Answer D. It’s complicated.

Answer: D. Since the adoption of HTML5, favicon.ico isn’t very useful. The sizes attribute was introduced to specify several different versions of the same icon, and those can be PNG files but for beginners, as we are, it is critical to understanding FAVICON.ICO

Return to the lesson