What exactly is a favicon in HTML?

What are favicons?

A favicon is an icon that is rendered alongside a webpage's title in different areas of a browser, most noticeably in the tabs section.

Here's an illustration of a favicon in the tabs section:

A favicon also shows up when a webpage is added as a shortcut to the home screen on a mobile operating system (this is possible in both Android and iOS).

An important part of developing any website these days is to effectively design a collection of favicons that can cater to a wide variety of such locations.

The term "favicon" simply stands for favorite icon; as you can guess, "fav" is just a fancy abbreviation for "favorite". The purpose of having the word "favorite" has everything to do with the origin of the concept in Internet Explorer. Let's learn about it.

The origin of favicons in Internet Explorer

In March 1995, Microsoft released the 4th version of Internet Explorer, and with it introduced a particularly nice feature.

A user could select a given webpage as one of his/her favorites and then later on go through all of them via the browser's favorites section. This wasn't a completely new idea, though; it existed in Netscape Navigator (a competing browser) already under the name of "bookmarks" (which is more common these days as well).

But where Internet Explorer innovated was in providing a small icon next to every favorite (webpage) which really helped the user in identifying a given favorite quickly. IE called this a favicon.

And that's how the world got introduced to the idea of favicons on the web. Shortly after this, since the feature prove particularly handy, it was extended to appear in browser tabs as well. Ultimately, it found its way into the HTML standard, denoted via the <link> meta element.

The ICO file type

When Internet Explorer introduced the idea of a favicon, it went with the approach of webmasters having to place a favicon.ico file at the root of their site to represent the favicon. Even to date, this approach works in all browsers, perhaps because of its ubiquity.

But you might be wondering what exactly is this .ico file type. (Were you?)

Well, a file with the .ico extension is called an ICO file. It contains a set of icons (that is, you can have multiple icons in the same file, with different resolutions). The ICO file format was originally created by Microsoft for its Windows operating system to denote icons of desktop applications.

Although initially created for Windows, the ICO file type is now supported on all major browsers on all operating systems. This is not to say that it's the only image file type supported for favicons on browsers; you can even use PNGs, GIFs, JPGs, or even SVGs (although they're not that well supported for favicons as of this writing).

The best thing about ICO is that creating an ICO file is superbly simple.

• You can either use an online tool, such as favicon.io, throw in a PNG and get back a collection of converted .ico files,
• Or you can use the spectacular, open-source image-editing tool, GIMP, to produce a favicon.

How to add a favicon to a website?

There are two ways to add a favicon to your website, as discussed below.

favicon.ico at the website's root

Clearly, the easiest way to add a favicon for a website is to go to the root directory of the website and add a favicon.ico file there.

All web browsers are configured to automatically request for a favicon.ico file from the root of a given website when some other resource is requested from that website. For example, if you visit www.example.com, the browser sends two requests:

• One for www.example.com.
• One for www.example.com/favicon.ico.

As soon as the browser receives the favicon, it renders it right next to the webpage's title in the current tab in the tabs section.

The <link> element

The second way to add a favicon, more so for a webpage than for the entire website, is to use the <link> element with the attribute rel="icon"; the href attribute points to the favicon.

In the example below, I demonstrate linking the following icon,

named favicon.png, to a webpage as a favicon: (Notice that the favicon is a PNG image, not an ICO image; as stated above, this is perfectly valid when you're adding a favicon using <link>.)

<link rel="icon" href="favicon.png">

Live Example

This is the absolute minimal code required for setting up a favicon for a given webpage. Here's how the webpage linked above displays in the browser's tabs section:

Pretty awesome, isn't this?

In addition to rel, there are numerous other attributes that you could include in a favicon <link> element, for e.g. sizes, type, etc.The next section expands upon sizes.

Favicon sizes

A favicon <link> element can contain a sizes attribute to hint about the size(s) of the underlying icon image(s). This hint can be used by the browser to determine the most optimal icon to download and use out of a given set of <link>s.

sizes can be set to either:

• The value "any", which means the icon can be used for any size. This is typically used with SVG icons since SVG images don't have a resolution and, therefore, no fixed size.
• A custom dimension value. This has the syntax <width>x<height>, where <width> and <height> represent the width and height of the icon, in pixels, respectively.

For example, in the following code, I add sizes to the <link> to specify the size of the PNG icon image which is 16px by 16px:

<link rel="icon" href="favicon.png" sizes="16x16">

Theoretically, you can have very large icons but it's clearly a waste of network resources to go this route. You should always try to keep your icon files as terse as possible.

Further reading

If you'd like to read even more about favicons, refer to the following resources:

• The Ultimate Guide to Favicons — Mailchimp
• Favicon — Wikipedia