Why Your Favicon Isn’t Updating in the Browser Tab

How to build a set from a source image is How to generate favicons for every browser. This page is why the tab lies after you did that.

Where browsers look

Legacy: /favicon.ico on the origin, even with no tags. Then <link rel="icon">, apple-touch-icon, and manifest.json icons. If any of those still point at the old URL, you will see a mix: desktop tab new, iOS bookmark old.

Meta Tag Extractor shows link tags on a public URL you own. It sends a request - do not point it at other people’s apps.

Cache is the usual villain

Favicons are cached harder than a CSS file. Overwriting favicon.ico at the same URL is how you lose a Friday. Fixes:

• New filename: favicon-2026-08.ico
• Query string if your server does not ignore it: favicon.ico?v=3
• Update every link tag and the manifest
• Hard reload is not enough; try a new Chrome profile or another browser
• Service workers can cache /favicon.ico - update the worker

Google’s SERP favicon is a separate cache. You wait.

HTML mistakes

Two rel="icon" tags, one leftover in the layout from a template. The first or last wins depending on the browser. One tag points at http:// on an HTTPS site. Mixed content, icon dropped.

SVG in type="image/svg+xml" but the file is actually ICO. Or ICO that is secretly a PNG with the wrong extension.

Design that “updates” but looks broken

A detailed illustration at 16×16 becomes noise. People think the favicon “didn’t change.” It did; it is unreadable. Favicon Generator from a simple shape. Dark tab bars: add a light border or a dark-mode SVG.

A 2 MB PNG as the only icon delays the tab. Compress: Online Image Compressor. Convert from SVG if needed: SVG to PNG then generate sizes.

PWA and Apple

apple-touch-icon is 180×180-ish. Manifest icons array. If you update only favicon.ico, add-to-home-screen stays old. iOS is stubborn; new filename helps.

A worked example: Next.js App Router

app/icon.png still the default. You put a file in public/favicon.ico and wondered why. App Router prefers the metadata file convention. Replace app/icon.png / favicon.ico as the docs for your Next version say. Redeploy. Change the filename if CDN cached /icon.png. Then extractor on production - not localhost.

Checklist

• Unique URL for new pixels
• All link tags and manifest
• ICO + PNG + SVG as needed
• Readable at 16px, OK on dark chrome
• New browser profile test
• Apple/manifest if you care about home screen

The launch pass includes this: Pre-launch checklist. CSS tool roundup: Best CSS and frontend design tools.

Favicons fail in the cache and in the markup, not in the paint program. Favicon Generator makes the files. You still have to ship a new URL and wait for the stubborn clients.

CDNs that ignore query strings

Some CDNs are configured to ignore ?v=3 on static files. Query-string cache busting does nothing. Change the path. Version in the filename.

rel="shortcut icon"

Old IE syntax. Modern browsers want rel="icon". Having only shortcut icon can make Chrome use /favicon.ico from 2019 on the origin. Include rel="icon".

Dark mode SVG

prefers-color-scheme in SVG favicons is supported in some browsers. If your mark vanishes on a dark tab, add a contrast-safe variant. Test in both themes. Favicon Generator from a source that already has a light edge.

Bookmarks vs tabs

A bookmark can keep the old icon after the tab updates. User-side. You cannot fix their bookmark cache. You can fix Google’s eventually by waiting.

Maskable icons for Android

PWA maskable icons get cropped to a circle/squircle. A logo that goes to the edge gets chopped. Provide a maskable PNG with padding. That is why “we updated the favicon” still looks wrong on Android home screens.

You still have to ship a new URL and wait for the stubborn clients. Favicon Generator is the file step. Cache-busting is the ops step.

WordPress, Shopify, and “we set it in the theme”

The theme customizer has a site icon. You also dropped a file in /favicon.ico. Two sources. The theme wins on some pages, the root ICO on others. Pick one pipeline. Extractor on the URL you actually share.

Shopify CDNs version assets; your favicon.ico in the theme assets might already have a hash in the URL. Re-upload in the admin so the hash changes. Do not only FTP an ICO the theme never references.

Safari is special

Safari can ignore sizes and stick to an Apple touch icon you forgot. Update apple-touch-icon. iCloud tabs may show a snapshot of the old icon. Wait.

Real favicon.ico structure

A true ICO can contain multiple bitmaps. A renamed PNG served as .ico works in Chrome and fails in an old environment. Generate a real multi-size ICO with Favicon Generator if you must support that environment.

32-bit vs 8-bit ICO

Rare, but indexed-color ICOs look posterized. If “the new icon looks worse,” you may have crushed it. Export PNG 32-bit, then generate.

Chrome site settings and “I hard-refreshed”

Chrome can pin a favicon in the profile’s Favicons SQLite store. A hard refresh of the tab is not a wipe of that store. New profile, another browser, or chrome://settings/clearBrowserData cached images - then retest. Do not keep shipping favicon.ico at the same URL while you debug your own laptop.

Windows jump lists and pinned taskbar shortcuts keep their own icon copy. That is the OS, not your <link> tag. You cannot remote-wipe a user’s pin.

Service workers and /favicon.ico

A worker that caches GET /favicon.ico with a long max-age will serve 2019 forever. Bump the worker version when you bump the icon. If you only change HTML, the worker still wins.

Manifest icons vs the tab

PWA install uses the manifest. The tab uses rel="icon". Updating one does not update the other. After a rebrand, change both and the Apple touch icon. Favicon Generator can emit the sizes; you still list them in manifest.json.

How to prove production is serving the new file

1. Meta Tag Extractor on the public URL: rel="icon" href is the new path.
2. Open that href in a private window. Bytes should match what you generated (file size is a cheap check).
3. curl -I the icon URL: 200, content-type that matches SVG/PNG/ICO, cache headers you intended.
4. New Chrome profile, not your daily profile.
5. Google Search Console favicon is a later cache - do not use it as the deploy check.

If step 1 still points at /favicon.ico from the theme and you uploaded a hashed Shopify asset, you have two pipelines. Pick one.

Google’s SERP icon is not your tab

Search Console and the SERP favicon update on Google’s schedule. You cannot flush it from DevOkk. Confirm live HTML with Meta Tag Extractor, then wait. Tweeting “Google is broken” on day one of a rebrand is usually a cache, not a conspiracy.

Guidelines also want a crawlable icon at a stable URL. If you rotate favicon-2026-08-27.ico every hour while debugging, crawlers will lag farther behind. One new URL, ship, wait.

icon.tsx generated at request time

Next.js can generate icons from code. A cache at the CDN in front of /icon will keep the old generated PNG. Change the file, change a query the framework honors, or purge that path. Extractor on HTML plus a private-window GET of the icon href is still the proof.

Subdomains and the “wrong brand”

app.example.com and www.example.com do not share a favicon cache. A marketing rebrand on www leaves the app on last year’s ICO until you deploy there too. Extractor on the hostname people actually pin.

localhost favicons also cache aggressively. Debugging a new icon on :3000 then shipping to production is two caches. Prove production.

Emoji and “we used a character as the favicon”

An SVG that is just an emoji can render as a tofu box on a machine without that font. Generate PNG sizes from a real mark with Favicon Generator. Do not rely on the OS emoji font for a 16×16 tab.

Firefox and Safari keep their own icon caches. A Chrome-only retest is how you ship a “fixed” favicon that still looks old in the browser your CEO uses. Check two engines after you change the URL.

Cache-busting is the ops step. The generator is Favicon Generator. The HTML is your repo.