What is a Favicon?

Understanding Favicon

Favicon is a small visual marker associated with a website or individual web page. Browsers may show it beside a page title in a browser tab, bookmark list, or browsing history. The icon helps you identify a page quickly when several tabs or saved links appear together.

Related glossary terms: Frontend, Progressive Web App, User Interface.

A favicon usually uses a simple square design because browsers display it at small dimensions. Common file formats include ICO, PNG, and SVG. A site may provide one general icon or several files for different browser contexts, device screens, and display sizes.

How Favicon Works, Is Measured, or Is Used?

A website declares its favicon through an HTML link element in the document head. The element usually sets rel="icon" and points to an image file through the href attribute. For example, a page may reference /favicon.ico. The file can use another name and location.

Browsers request the image while loading the page, then store it in a local cache for later use. Designers assess a favicon by checking its clarity at small sizes, its contrast, and its appearance on light and dark browser interfaces. A practical set may include a 16 by 16 pixel version for tabs. It may also include a 32 by 32 pixel version for bookmarks and larger icons for application shortcuts.

Modern sites can also define Apple touch icons and web app manifest icons for mobile shortcuts or installed progressive web apps. These assets serve related purposes but may use different dimensions and file requirements. Testing should cover current desktop browsers, mobile browsers, private browsing, and a fresh cache.

Why Favicon Matters?

A clear favicon improves visual recognition during routine browsing. People can locate a familiar tab or bookmark faster when the icon has a distinct shape and remains readable at 16 pixels. A missing, broken, or unrelated icon can make a site look unfinished and reduce confidence when users manage several open pages.

Favicons also support consistent brand recognition across browser surfaces, although they're not a direct search ranking factor. Search systems may display a favicon beside a site in some results, subject to their own technical and presentation rules. The icon should support the site identity without replacing readable text or accessible labels.

When Favicon Matters Most?

Favicon work becomes important during a new website launch, a rebrand, or a migration to a new content management system. It also matters when a browser shows a blank icon, an old brand mark, or the hosting provider’s default image. Teams should review the asset after changing domains, templates, headers, or caching rules.

Choose a design that remains distinct from nearby competitor icons and avoids fine details that disappear at small sizes. Check that the file loads over HTTPS and returns the correct image type. Make sure it doesn't require a blocked or private path. For a public website, pair the favicon with suitable accessibility practices. An icon alone can't communicate page meaning to assistive technology.