Favicon

What a favicon is

A favicon, short for favorite icon, is the small square image a browser displays to represent a website: in the browser tab beside the page title, in the bookmarks bar, in the history list, and on mobile home screens when a site is saved. Though only a few pixels wide, it is one of the most repeated visual touchpoints of a brand online, helping users recognise and return to a site among dozens of open tabs.

Formats and sizes

Historically favicons were a single .ico file at 16x16 or 32x32 pixels. Modern practice uses several sizes and formats so the icon looks crisp everywhere. Common ones are 16x16 and 32x32 for tabs, 180x180 for Apple touch icons on iOS home screens, and 192x192 or 512x512 for Android and progressive web apps. PNG is widely supported, and SVG favicons are increasingly used because they scale to any size and can adapt to light or dark mode. A small set of files plus a web manifest covers virtually every device.

How it is declared

A favicon is referenced in the HTML head with link tags, for example a link with rel icon pointing to the image, plus a link with rel apple-touch-icon for iOS and a web app manifest for Android and PWAs. Browsers also look for a file named favicon.ico at the site root by default, which is why that filename still exists as a fallback. Getting the declarations right ensures the correct icon appears on every platform rather than a blank or generic placeholder.

Why it matters

A favicon is small but it does real work. It reinforces brand identity every time your site is open, making tabs scannable and bookmarks recognisable. It signals polish and trust: a missing or default favicon makes a site feel unfinished. It also appears in some search results next to the page title, so it contributes to how professional a listing looks. For sites saved to a phone home screen, a proper touch icon is the difference between a branded app-like tile and a blurry screenshot.

Common mistakes

Typical issues include providing only a 16x16 icon that looks blurry on high-resolution and mobile screens, forgetting the Apple touch icon so iOS shows a cropped screenshot, using an over-detailed logo that becomes unreadable at tiny sizes, and not declaring a manifest so Android and PWA installs fall back to defaults. A design that ignores dark mode can also disappear against certain tab backgrounds.

Favicons at BeBranded

When we build a site in Webflow, Framer or a custom stack, a complete favicon set is part of a properly finished website, not an afterthought. We generate the right sizes and formats, add the Apple touch icon and web manifest, and simplify the mark so it stays legible at 16 pixels while matching your brand. It is a small detail, but the kind of detail that makes a site feel professional in every tab and on every device.