What a favicon is

A favicon is the small square icon representing a website in browser tabs, bookmarks, browser history lists and phone home-screen shortcuts, supplied as a set of image files referenced in every page’s code.

Why it is easy to forget and quick to notice missing

A favicon is inexpensive to produce relative to the rest of a build, and routinely forgotten anyway. A missing one shows a generic blank document icon in the browser tab, which reads as an unfinished site to anyone glancing at their open tabs. It is also what a returning visitor actually uses to find a specific site among the many tabs they typically have open at once.

Why a simplified mark, not the full logo

A favicon rendered at the small size a browser tab actually displays needs a deliberately simplified design — often a single letter, initial or symbol — because a full, detailed logo scaled down to that size frequently becomes illegible. This is a specific design task in its own right, not an automatic byproduct of resizing the main logo file.

What modern requirements actually cover

Current browsers, phones and dark-mode interfaces expect more than one favicon file — multiple sizes and formats, and a web app manifest file where a site should support being added to a phone’s home screen with its own icon. A build that supplies only a single, older-format icon file can still show correctly in some contexts and fail in others.

Favicon link tags: rel, href, PNG icons and the favicon ico fallback

A favicon is declared with one or more link tags in a page’s HTML head, each carrying a rel attribute, an href pointing at the icon file, and usually a type and a sizes value for each additional icon a build supplies. The rel attribute is what tells a browser a link points to an icon rather than a stylesheet or anything else sharing the same tag. rel="icon" and the older rel="shortcut icon" both still work in current browsers, and a build that only defines one is usually fine. A legacy file some browsers still request by name — favicon ico, with a dot between the two words in practice — sits at the site’s root regardless of what the head declares. It is still what some older tools and feed readers fall back to if no link tag is present at all.

Chrome, Internet Explorer, apple-touch-icon and a favicon website visitors bookmark

Chrome and every current browser read the link tags in the page head to build the tab icon, the bookmark icon and the URL bar icon. Older versions of Internet Explorer were the main holdout that still requested a root-level favicon.ico by name whether or not a page declared one. That is the historical reason that filename convention still gets shipped as a fallback, even now that Internet Explorer itself is retired. A favicon website visitors bookmark or add to a phone home screen also needs an apple-touch-icon sized specifically for iOS, plus a set of PNG icon sizes referenced from the web app manifest for Android — icons neither Chrome’s default handling nor the classic single ico file covers on its own.

How to create favicon files, keep favicons in sync, and avoid a shortcut icon mismatch

Most build tools now generate the full icon set — the legacy ico file, several PNG sizes, and the apple-touch-icon — from a single source image. That is the practical way to create favicon files without hand-exporting each size. Browsers cache favicons aggressively, so a newly added or changed favicon can take a forced refresh to actually show up even after the underlying file is fixed. The page title shown next to the icon in a tab is a separate setting entirely. But a missing favicon next to a generic title is what makes an unfinished tab most obvious in a crowded browser window.

What to do next

Checking an existing site’s browser tab, and its appearance when saved to a phone’s home screen, is a two-minute test that reveals whether a favicon is genuinely complete across formats. For where this fits into a build’s visual identity work, website design services covers where it is scoped.