Reference guide · images · Published 2026-08-15 · 3 min read
The favicon: small but not trivial
Optimise the favicon: PNG for modern browsers, ICO for legacy, apple-touch-icon sizes, cache and update semantics, with a file table.
- ·The file set
- ·Sizes and formats
- ·Cache and updates
Why a small file still deserves care
A favicon is maybe 1 to 30 KB, but it is requested on almost every page load and inside the browser UI. Three effects matter:
- It is part of the first paint resources; an oversized PNG served for the tab icon adds measurable weight on mobile.
- It is requested repeatedly and cached permanently, so a bad file sticks.
- It represents the brand anywhere the site appears: tabs, bookmarks, home screen.
The set also must match what browsers request, which varies by platform.
The recommended file set
| File | Purpose | Notes |
|---|---|---|
favicon.ico | legacy browsers and Safari fallback | keep an ICO at 16x16 and 32x32; desktop Safari also requests it as a fallback |
favicon-32x32.png | modern desktop browsers | referenced from <link rel="icon"> |
favicon-16x16.png | small contexts | some browsers prefer a 16px PNG over the ICO |
apple-touch-icon.png (180x180) | iOS home screen | no transparency, solid background |
site.webmanifest | PWA metadata | lists icons and theme colour |
Sizes and formats
A PNG favicon is the modern default. The ICO exists because very old browsers (IE 8 and lower) cannot render any other format for the address bar, and it stays useful beyond them: modern desktop Safari requests /favicon.ico as a fallback when it finds no matching <link rel="icon">. Serve both: rel="icon" links to the PNGs, and rel="shortcut icon" (or the browser default /favicon.ico lookup) returns the ICO.
Recommended markup in the <head>:
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Keep every file small. The 32 pixel PNG should be a few kilobytes and the 180 pixel apple icon well under 30 KB. The image compression guide applies the same sizing and lossy balance to these tiny assets.
Cache and updates
Favicon caching is aggressive: browsers remember the URL. When you replace a logo:
- Bump the version in the URL (
/favicon-2026.pngrather than overwriting in place), or add a query parameter. Plain/favicon-32x32.pngis cached for a long time. - Test in a private window, where the old file is not cached.
- If you use a favicon plugin or build step, keep the version bump in the generated markup.
Because favicon requests are permanent in the tab, an old mark you cannot see is the classic "updated but not loaded" scenario: the HTML points to the new file, but the browser UI kept the old URL cache. A versioned URL fixes that reliably.
Prevention
- Decide the set once (ICO + PNG + apple icon) and generate from a single source to keep colours identical.
- Put the reference in the shared header/partial, not per page.
- Keep
site.webmanifesticon entries matching the served files.
The full technical-side weighting of a small graphic can seem low, but brand consistency and a few bytes matter enough to check. For the rest of the image delivery chain (format, sizes, caching), the image optimisation guide covers it, and the image SEO guide notes alt equivalents for search appearances.