How do I force a favicon refresh?

Browsers cache favicons independently of a normal hard refresh. Append a version query string to every icon URL (for example /favicon.ico?v=20261103), redeploy, then check in a private window. Clearing site data also works for your own QA.

What size should a favicon be?

Ship a favicon.ico containing 16, 32 and 48 px images, a 180 x 180 apple-touch-icon.png, and 192 and 512 px PNGs listed in a web manifest.

Do I still need favicon.ico?

Yes. Browsers and many tools still request /favicon.ico automatically, and it's the most compatible format. Keep it alongside PNG or SVG icons.

Why is my favicon not showing?

Usually it's the browser cache (test in a private window), a relative path (start the href with /), or a missing link tag on a site that isn't at the domain root.

What favicon size does Google Search use?

Google asks for a square favicon whose size is a multiple of 48 px, for example 48 x 48 or 96 x 96, at a crawlable URL.

← Favikit

Favicon sizes in 2026

Four files and three <link> tags cover browser tabs, iOS/Android home screens, and Google Search in 2026. Use the checklist below before you ship; if the tab still shows an old icon, jump to force refresh.

Last verified 3 November 2026 against Google Search favicon guidelines and current Safari / Chrome behaviour. Step-by-step cache fixes: DEV Community.

Quick reference (2026)

File	Size	Used by
`favicon.ico`	16, 32 and 48 px inside one file	Browser tabs and bookmarks. Browsers still request `/favicon.ico` by default.
`apple-touch-icon.png`	180 × 180	iPhone and iPad home screen. Use a solid background: iOS fills transparent areas with black.
`icon-192.png`, `icon-512.png`	192 × 192, 512 × 512	Android home screen and "install app", listed in `site.webmanifest`
`site.webmanifest`	JSON	Name, colours and the icon list for Android/PWA
`favicon for Google Search`	48 × 48 or 96 × 96 (square, multiple of 48)	SERP snippet icon — can be the 48 px layer inside `favicon.ico` or a dedicated PNG at a crawlable URL

What you must ship vs optional (2026)

Asset	Status	Skip if…
`favicon.ico` (16/32/48) + root `<link rel="icon">`	Required	Never — even SVG-only sites get `/favicon.ico` probes
`apple-touch-icon.png` 180×180	Required for iOS users	Desktop-only internal tools with no mobile audience
Manifest icons 192 + 512	Required for installable PWA	Static marketing site with no “Add to Home Screen” goal
`icon.svg` + `type="image/svg+xml"`	Optional	Nice for crisp tabs; keep ICO anyway for compatibility
`msapplication-TileImage`	Optional	Legacy Windows Start tiles only — see TileImage

Paste-ready link tags

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Test your favicon before you ship

Run through this once per deploy (private window = no stale favicon cache):

Open your site in a private/incognito window — if the icon is wrong here, it is not "just your cache".
Visit /favicon.ico directly in a tab; you should see the new icon (not an old file or 404).
Confirm every icon href starts with / (root-relative), especially on nested routes.
Check site.webmanifest lists 192 and 512 PNG paths that return HTTP 200.
Add to iPhone home screen once: missing or tiny icons mean you need apple-touch-icon at 180×180 with a solid background.
After any icon change, bump ?v= on every icon URL and in the manifest — see force refresh.

Detailed fixes (by problem)

Jump to: cache / force refresh · tab sizes · /favicon.ico requests · PWA manifest icons · apple-touch-icon

How to prevent `favicon.ico` requests?

You generally should not try to block them. Browsers, crawlers, and many tools still request /favicon.ico at the site root even when you declare PNG or SVG icons with <link rel="icon">. Returning 404 only adds failed requests in DevTools.

Practical fix: ship a real multi-size favicon.ico (16, 32, 48 px inside one file) at the root and declare modern icons explicitly:

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

Redirecting or returning 204 for /favicon.ico is possible but hurts bookmarks and search snippets. Size details: 16×16 vs 32×32.

Which favicon sizes show in the browser tab?

The tab icon comes from your <link rel="icon"> tags and/or a root /favicon.ico. For a static site, this minimum set covers Chrome, Firefox, Safari, and Edge in 2026:

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

Put a multi-size favicon.ico (16×16 and 32×32) at the site root even when you use PNG/SVG — many clients still request /favicon.ico directly. If the tab shows an old icon, bump ?v=2 on each href and test in a private window (see force refresh).

Adding a favicon to a static HTML page

Paste these tags inside <head> on every HTML page (paths are from the site root):

The link tags

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Optional: an SVG icon (<link rel="icon" href="/icon.svg" type="image/svg+xml">) gives modern browsers a sharp icon at any size and can switch colours in dark mode.

How to force a favicon refresh (when hard refresh fails)

Browsers cache favicons separately from page assets. A normal hard refresh (Cmd/Ctrl+Shift+R) often keeps the old tab icon. To force a favicon refresh for everyone:

Version the URL. Change every icon href to include a query string you bump on each ship: /favicon.ico?v=20261103, same for PNG/SVG and the paths inside site.webmanifest.
Redeploy, then private-window check. Incognito / a fresh browser profile proves the new file is live without fighting your own cache.
Your machine only: DevTools → Application → Clear storage (include cached images), or delete the site's cookies/cache for that origin.

If the new file still never appears, it is usually path or tags — not cache:

Path. Start the href with /. Relative paths break on nested routes.
No tag. Without a link tag, browsers only look for /favicon.ico at the site root. Sub-folder sites need an explicit tag.
Google Search. Google wants a square icon whose size is a multiple of 48 px (48, 96, 144…), at a crawlable URL. SERP updates can take days to weeks.
iPhone shows a page screenshot. Missing apple-touch-icon (180 × 180 PNG with a solid background).

Firefox bookmark icon stuck on the old favicon

Firefox caches bookmark favicons in its profile database, not just the HTTP cache. Updating favicon.ico on the server often does not refresh icons already saved in the Bookmarks menu. For your own QA: remove the bookmark, clear the site’s cache (Settings → Privacy → Cookies and Site Data → Manage Data), then re-add the bookmark after you ship a versioned URL (/favicon.ico?v=2). You cannot force other users’ bookmarks to update — only bump the URL on your site so new bookmarks pick up the icon.

Does a favicon have to be 16×16 or 32×32?

Neither alone. Modern practice is a multi-resolution favicon.ico that embeds 16×16, 32×32 and 48×48 (and often 24×24). Browsers pick the nearest size for the UI chrome; Google Search prefers a square whose side is a multiple of 48 px (so include 48 in the ICO or a separate PNG).

16×16 — classic tab favicon on non-retina.
32×32 — crisp tabs on HiDPI; still the most common single size people export.
48×48+ — bookmarks / Google SERP favicon guidelines.
SVG (type="image/svg+xml") — optional; sharp at any size in Chromium/Firefox/Safari recent.

There is no single “required” pixel size in the HTML spec. What breaks is shipping only a tiny 16×16 ICO on retina, or forgetting apple-touch-icon / manifest icons for home-screen installs.

What size should apple-touch-icon.png be?

For current iPhone/iPad home screens, ship 180 × 180 PNG as <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Use a solid background (iOS paints transparent pixels black). Older devices used 57 / 72 / 114 / 120 / 144 / 152; you can omit those if you only target modern iOS — Safari will downscale 180.

Also list 192×192 and 512×512 in site.webmanifest for Android / PWA “Add to Home Screen”.

“apple-touch-icon-precomposed.png” 404 / error in the console

Older iOS requested /apple-touch-icon-precomposed.png (and size-suffixed variants) automatically when no <link rel="apple-touch-icon"> was present. The “precomposed” name meant “don’t add the gloss overlay” — that overlay is long gone, and modern Safari prefers an explicit link tag.

Fix:

Add <link rel="apple-touch-icon" href="/apple-touch-icon.png"> pointing at a real 180×180 PNG.
Optionally also place apple-touch-icon.png at the site root so root probes succeed.
Ignore or redirect legacy *-precomposed.png probes; they are not required in 2026 if the link tag is correct.

What is `msapplication-TileImage` for? (Windows pinned tiles)

Legacy Microsoft browsers (especially IE / old Edge) used <meta name="msapplication-TileImage" content="…"> for the large square tile when a site was pinned to the Windows Start screen. Modern Chromium Edge and current Windows mostly ignore it in favour of normal favicons and PWA manifest icons.

If you still want coverage for old bookmarks or enterprise lockscreens, point the meta tag at a 270×270 PNG (or reuse a 256/512 PNG — browsers downscale). Pair it with msapplication-TileColor for the tile background:

<meta name="msapplication-TileColor" content="#0d0e14">
<meta name="msapplication-TileImage" content="/mstile-270.png">

For new sites in 2026, prioritise favicon.ico, apple-touch-icon, and manifest 192/512 icons first; add TileImage only if analytics still show IE/legacy Edge traffic.

PWA / webmanifest icons (192 & 512) — fix “Manifest does not contain a suitable icon”

Chrome’s Application panel warns “Manifest does not contain a suitable icon” or “No supplied icon is at least 144px square” when site.webmanifest lists missing files, wrong paths, or only tiny icons. For installability, include at least:

192 × 192 PNG — Android home screen / install UI
512 × 512 PNG — splash / store-like surfaces; purpose "any" or "maskable"

{
  "name": "My App",
  "short_name": "App",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" }
  ],
  "display": "standalone",
  "start_url": "/"
}

Serve the JSON as application/manifest+json (or .webmanifest). Paths must resolve (leading /). After changing icons, bump ?v= on the src URLs and re-test in a private window — the same cache rules as favicons apply. Favikit exports 192/512 PNGs plus a starter manifest.

Do it in your browser, free: Favikit builds a multi-size .ico, PNGs, manifest and paste-ready tags on-device — nothing uploaded.
Open Favikit →

Optional backgrounds for store shots & OG images: MESHGRAIN ($6) · GRAIN overlays ($3).

On DEV: App Store screenshot sizes · Favicon cache fixes · AppShot tool