The favicon has a surprisingly rich history dating back to 1999 when Microsoft introduced the concept in Internet Explorer 5. The original implementation was simple: browsers would automatically request a file named favicon.ico from the website's root directory and display it in the address bar and bookmarks. The ICO format, a Microsoft container format, could hold multiple image sizes within a single file, typically 16x16 and 32x32 pixels. This convention became a de facto web standard long before any formal specification existed, and the favicon.ico file at the root directory remains supported by all browsers today for backward compatibility.

Modern favicon requirements have expanded dramatically beyond the original single ICO file. Browsers use 16x16 icons in tabs and 32x32 in bookmark bars. Apple's iOS requires Apple Touch Icons at 180x180 pixels for home screen shortcuts, specifying them through a link tag with rel="apple-touch-icon." Android devices and Progressive Web Applications need icons at 192x192 and 512x512 pixels, defined in a web app manifest (manifest.json). Windows tiles may request sizes up to 310x310. The link tag with rel="icon" and the sizes attribute allows specifying multiple favicon resources at different dimensions, enabling browsers to select the most appropriate size for each display context.

The evolution toward SVG favicons represents a significant advancement. Defined using the link tag with type="image/svg+xml," SVG favicons are vector graphics that scale perfectly to any size without pixelation. They can include CSS media queries, enabling features like automatic dark mode adaptation where the favicon changes color based on the user's system theme preference. SVG favicons are supported in Chrome, Firefox, and Edge, though Safari currently requires the traditional PNG/ICO approach. A robust favicon strategy typically includes an SVG for modern browsers, PNG files at standard sizes, and a legacy favicon.ico as fallback.

The technical considerations for favicon creation involve careful attention to pixel-level rendering at small sizes. At 16x16 pixels, every single pixel matters and complex logos become unrecognizable. Effective small favicons prioritize a single distinctive element, such as a letter, symbol, or simplified logo mark, rather than attempting to shrink a full logo. Color contrast must be strong enough to remain visible against various browser chrome backgrounds. The use of transparent backgrounds allows favicons to adapt to different browser themes, while solid backgrounds provide consistent brand color identification regardless of context.