096 Favicons: The Tiny Icons That Give Websites an Identity

They may be only a few pixels across, but favicons have become one of the most familiar parts of the Web.

Look across the tabs open in your browser and you will probably recognize many of the websites by their little icons before you even read their names. Favicons appear beside bookmarks, in browser tabs, in browsing history, and in other places where a small visual identity is useful.

They are so common today that it is easy to forget there was a time when websites did not have them at all.

It Started With Internet Explorer

The favicon dates back to 1999 and Microsoft's Internet Explorer 5. The name itself came from “favorite icon” because the little image was associated with websites saved in Internet Explorer's Favorites.

The idea was wonderfully simple. A website could place a small Windows icon file named:

favicon.ico

in the root directory of the website. Internet Explorer could then request that file and display the icon with the site.

What started as a feature of one browser eventually became a nearly universal part of the Web.

Making Those Early .ICO Files

I remember when I first learned about favicons. The idea was great, but there was an immediate practical question: How do I make an .ico file?

Most of the graphics programs we regularly used for website images were designed around formats such as GIF and JPEG. Creating an ICO file was something different, so you had to find a program or utility that could create or convert an image into the proper icon format.

And those early favicons were tiny. A 16-by-16-pixel image does not give a designer much room to work. You quickly learned that a complicated photograph or detailed logo was usually a poor choice. A simple letter, shape, symbol, or recognizable portion of a logo worked much better.

That lesson is still true today.

The Beauty of favicon.ico

One thing I have always liked about favicons is how simple they can be.

Put a properly created file named favicon.ico in the root folder of a website, and browsers have traditionally known where to look for it. No complicated system is necessary for the basic implementation.

For example:

https://example.com/favicon.ico

That convention became so widespread that browsers and other software may automatically request the file when interacting with a website.

Web developers can also explicitly identify an icon in the HTML:

<link rel="icon" href="/favicon.ico">

Years ago, many of us used markup such as:

<link rel="shortcut icon" href="/favicon.ico">

The word shortcut is a reminder of the favicon's early browser history. Modern HTML simply uses rel="icon".

More Than Browser Favorites

Favicons eventually escaped from the Favorites menu.

Today they can appear in browser tabs, bookmarks, history lists, shortcuts, search interfaces, and other software that identifies websites. FTP programs, website management tools, and similar applications may also retrieve a site's favicon so that a visual symbol can be displayed beside a domain or website name.

I particularly like that use. When you manage many websites, a small recognizable image beside a domain name can make the site easier to spot than text alone.

It is a tiny example of something humans are very good at: recognizing images quickly.

Favicons Have Grown Up

The original favicon was closely associated with the Windows ICO format and very small images, particularly 16×16 pixels. Today's devices have changed the situation considerably.

Modern websites can provide icons in formats such as PNG and, depending on browser support and use, SVG. Sites can provide multiple sizes for different displays, while phones and tablets may use larger icons when a website is saved to a home screen.

For example, a site might include:

<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

There are additional options for mobile devices and specialized applications, but there is something I still appreciate about the original approach:

A simple favicon.ico file in the website's root directory still works remarkably well.

Designing a Good Favicon

A favicon is not simply a miniature version of a website's full logo. Sometimes that works, but often it does not.

The best favicon is usually the most recognizable element of the logo.

If a company's logo contains a distinctive letter, symbol, shape, or graphic, that element can often stand alone as the favicon. At tiny sizes, simplicity becomes more important than detail.

We recently encountered a perfect example while developing a new website. We created a logo for Rice Equipment Solutions that incorporates a gear into the letter R. The complete logo contains the company name, but the gear and R can stand alone beautifully.

Almost immediately the thought occurred: That should be the favicon.

That is exactly what a good favicon should do. Even when there isn't enough room for the company name, a small piece of the visual identity can still represent the company.

A Tiny Part of Branding

Favicons are easy to overlook when building a website. They don't contain the main message, they don't generate a sale, and they don't provide the site's primary navigation.

But details matter.

A browser tab displaying a generic icon feels unfinished. A tab displaying a recognizable company symbol feels like it belongs to the website.

And when someone has ten or twenty tabs open, that tiny graphic suddenly becomes surprisingly useful.

From 16 Pixels to a Web Standard

There is something enjoyable about the history of the favicon. It began as a small feature associated with Internet Explorer's Favorites and became part of the visual language of the Web.

Those of us who built websites during that transition remember discovering the feature, figuring out how to create an ICO file, uploading favicon.ico, and then seeing that tiny image appear in the browser.

It seemed like a small thing.

More than a quarter century later, we're still using it.

Technology has changed dramatically since 1999. Browsers have changed. Screens have changed. HTML has changed. The devices accessing our websites have changed.

But the basic idea behind the favicon remains as useful as ever:

Give a website a small visual identity that people can recognize at a glance.

Sometimes one of the smallest pieces of a website can become one of its most familiar.