Favicon

A favicon is a small icon (typically 16x16 or 32x32 pixels) that represents a website in browser tabs, bookmarks, and search results — one of the most visible branding elements on the web.

Related workflow terms: Open Graph Image, Image Format.

Favicon formats and sizes

Favicons have evolved from a single 16x16 ICO file to a set of images in multiple formats and sizes, each serving a different context.

ICO (favicon.ico) is the legacy format. It can contain multiple image sizes in a single file (16x16, 32x32, 48x48). Browsers check for /favicon.ico at the site root automatically, even without an explicit link tag. ICO remains necessary for compatibility with older browsers and some enterprise environments.

PNG is the most common modern format. Individual PNG files at specific sizes (32x32, 192x192, 512x512) are referenced via <link> tags in the HTML head. PNG supports transparency and is universally supported across current browsers.

SVG is the most flexible option. A single SVG favicon scales perfectly to any size without pixelation. It also supports CSS within the file — including @media (prefers-color-scheme: dark), which allows the favicon to adapt automatically when the user switches between light and dark mode. SVG favicon support is available in Chrome, Firefox, and Edge.

Apple touch icon (180x180 PNG) is used when iOS users add a website to their home screen. It is referenced with <link rel="apple-touch-icon"> and is displayed as a rounded app icon.

A comprehensive favicon setup typically includes: a 32x32 PNG for standard browser tabs, a 180x180 PNG for Apple devices, a 192x192 and 512x512 PNG for Android and PWA manifests, an SVG for scalable rendering with dark mode support, and a legacy favicon.ico as a fallback.

Where favicons appear

Favicons are more visible than most developers realize. They appear in:

• Browser tabs — the primary context, displayed at 16x16 or 32x32 pixels next to the page title. On modern browsers, tabs may shrink to show only the favicon.
• Bookmarks and reading lists — saved pages display the favicon as a visual identifier, helping users locate sites in long bookmark lists.
• Browser history — recent pages show favicons alongside titles and URLs.
• Search engine results — Google and Bing display favicons next to search results, making them a subtle but persistent branding element.
• PWA and mobile home screens — Progressive Web Apps and "Add to Home Screen" use larger favicon variants as the app icon.
• Tab groups and tab managers — browser features that organize tabs rely on favicons as the primary visual differentiator between sites.

How to create a favicon

Start with a simple, recognizable design. A favicon must be legible at 16x16 pixels — intricate logos, detailed illustrations, and text-heavy designs will not work at that scale. The most effective favicons use bold shapes, strong contrast, and minimal detail.

Design the icon at a large size (512x512 or higher) and scale down. This ensures the design works at every required size. Test the scaled versions at actual display size — zoom in to a browser tab to check legibility.

For automated workflows, a screenshot of a styled HTML element — a colored letter, a simple SVG shape, or a branded icon — can serve as the source image. The captured image is then resized and exported to the required formats and dimensions. This approach allows teams to generate and update favicons programmatically as part of their build pipeline.

Use a favicon generator tool to produce all required sizes and formats from a single source image, along with the HTML markup needed to reference them.

In a real publishing workflow

Favicons are easiest to keep consistent when they are generated from the same source asset as the rest of a site's visual system. Instead of hand-exporting favicon.ico, touch icons, and manifest icons separately, teams can keep one high-resolution source and derive the required sizes during release prep. That reduces drift between tabs, bookmarks, PWAs, and search results.

Common mistakes

• Using only favicon.ico. A single ICO file misses Apple touch icons, Android manifest icons, and SVG dark mode support. Provide the full set of formats and sizes for consistent display across all platforms.
• Designing with too much detail. A favicon is displayed at 16x16 pixels in a browser tab. Fine lines, small text, and complex shapes become an unreadable blur. Simplify the design to its most recognizable element.
• Forgetting transparency. Favicons without transparent backgrounds display a solid rectangle behind the icon, which looks unprofessional against browser chrome and bookmark bars. Use PNG or SVG with a transparent background.
• Not testing in dark mode. A dark-colored favicon may become invisible against a dark browser tab bar. Use an SVG favicon with CSS media queries to provide light and dark variants, or choose a color that contrasts with both backgrounds.
• Ignoring caching. Browsers cache favicons aggressively. After updating a favicon, append a version string to the URL or update the filename to force browsers to fetch the new version.