Favicon

A favicon (short for “favorites icon”) is the small symbol browsers display in the tab, in the bookmark list, in the history, in search results and on the mobile home screen to visually identify a website. It’s a tiny piece of branding that, paradoxically, has a big effect: a website without a favicon looks unfinished or untrustworthy, while one with a clearly recognisable favicon looks professional and memorable. What began in 1999 with Internet Explorer as a 16×16-pixel .ico file is today a small suite of images in various sizes and formats, including touch icons for iOS and PWA icons for Android.

History, from `.ico` to an icon suite

Originally, Internet Explorer required a file called favicon.ico directly in the web root. Today’s requirements are considerably broader: every browser, every operating system and every resolution has its own wishes. A modern website therefore usually delivers:

favicon.ico with 16×16, 32×32 and 48×48 px – the fallback for older browsers
favicon.svg: vector-based, infinitely scalable, dark-mode variant possible
PNG sets in 192×192, 512×512 px – for PWAs and Android home screens
apple-touch-icon.png in 180×180 px – for iOS home screens
A manifest file (manifest.webmanifest) – for PWA installation

The modern `<head>` block

A contemporary favicon configuration looks like this:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

The browser picks the fitting icon automatically by order and format. SVG has the big advantage of staying sharp at every resolution and being flexible for dark-mode adjustments.

Dark mode in the favicon

With media queries directly in the SVG, the favicon can display differently on light and dark browser backgrounds:

<style>
  path { fill: #111016; }
  @media (prefers-color-scheme: dark) { path { fill: #f5f5f5; } }
</style>

That keeps the favicon legible in every system theme – a small detail that immediately stands out positively in the tab.

Apple touch icons and iOS specials

iOS and Safari demand a dedicated apple-touch-icon.png at 180×180 pixels. Without the tag, iOS automatically crops a screenshot of the page, usually ugly. Bonus: an optional apple-touch-startup-image shows a splash screen when the page is launched from the home screen, which noticeably strengthens the app-like effect of a PWA.

PWA icons in the web app manifest

If the site should additionally be installable as a progressive web app, the icons belong in the manifest:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
}

The maskable variant matters: Android crops PWA icons into different shapes (circle, squircle, rounded rectangle). An icon with purpose: maskable reserves enough safety padding so nothing gets cut off.

Tools for creating favicons

RealFaviconGenerator: the quasi-standard; takes a PNG/SVG and delivers a complete package including the HTML snippet
Favicon.io: fast, also with text/emoji as source
Maskable.app: preview and editor specifically for Android maskable icons
Adobe Illustrator / Figma: when a vector source document already exists

Best practices

SVG as the main format: designed once, sharp at every resolution
A simple design: a favicon is 16×16 or 32×32 px; anything more complex than one central symbol gets lost at that size
Strong contrast: the icon must be legible on both light and dark browser backgrounds (a dark-mode SVG helps)
Use the brand colour: a coloured favicon is far more recognisable in the tab than a plain silhouette
Mind the cache: browsers cache favicons aggressively. When switching, force it with a version query (?v=2) or a new file name
Don’t forget the Apple touch icon, without it, the iOS home screen looks bad

Frequently asked questions about the favicon

Where must the favicon live? Ideally directly in the web root (/favicon.ico), additionally referenced explicitly via <link> tag so alternative paths work too. Requesting /favicon.ico is the historical default; some tools (e.g. browser crawlers) check exclusively there.

Is a single favicon.ico enough? Functionally yes – modern browsers display it. But for iOS home screens, Android PWA installation, razor-sharp retina tabs and dark-mode adjustment, the complete set is needed.

Does a favicon help SEO? Directly: minimally. But Google has shown favicons alongside mobile search results since 2019 – a recognisable favicon can visibly increase the click-through rate (CTR). Indirectly, investing in a good favicon thus pays off.

Why doesn’t my new favicon look updated in the browser? Browsers cache favicons particularly aggressively. Cache busting via ?v=2, an incognito tab or explicitly clearing the browser cache helps. On the server, additionally set Cache-Control: max-age=0, must-revalidate for the favicon file if redeployments are needed more frequently.

Conclusion

A favicon is one of the cheapest branding assets there is – half an hour of work at most, a lifetime of effect in every tab, every bookmark and every search result. Anyone running a modern website should deliver a complete favicon set including Apple touch and PWA variants instead of leaving just an old .ico in the web root. We set that up as a matter of course in every one of our website development projects – feel free to reach out for a no-obligation consultation.

History, from .ico to an icon suite

The modern <head> block