Back to list
Lv.1

Favicon

Favorite Icon

A small icon unique to a website that appears in the browser tab and bookmarks.

In Simple Terms

A favicon is the small image that shows up in your browser's tab or bookmarks list when you open a website. When you've got a bunch of tabs open on your computer or phone, it helps you tell at a glance which tab belongs to which site. Sites usually use their logo or a symbol that represents them, so you can recognize them instantly without even reading the text.

Behind the Name

The name "favicon" is short for "favorite icon." In the early days of the web, when you added a website to your browser's Favorites (bookmarks), a small icon would appear next to the site's name — and that's where the name comes from.

Take a Closer Look!

A favicon is the small image data that appears as a website's symbol in places like a browser's tabs or bookmark list.
When you open different sites in your browser, you'll notice each one has its own logo tucked into the corner of the tab — that's the favicon.

Basically, it works by having the site's administrator prepare a specific image file and set it up within the site's code. It doesn't have to be a dedicated icon file, either — a regular image file can be used and displayed the same way.

By the way, the "Home Screen icon" that appears when you add a website to your smartphone's home screen is a different technology altogether, with its own setup process separate from the browser favicon. While a browser favicon is a simple setup that just points to one image file through an HTML tag, a Home Screen icon needs separate configuration — an "apple-touch-icon" tag for iOS, and, for Android and PWAs, a dedicated configuration file (manifest.json) that links the app's name to its icon image.

A favicon lets a single small image convey a site's identity, making it one of the essential elements to prepare when building a website.

CategoryWebDesign