Webflow Favicon Not Updating? Fast Fix & Prevention Guide

If you’ve just uploaded a fresh favicon in Webflow and the browser still displays the old square, you’re not alone. The symptom is a stale icon in the tab bar, even after publishing.

Quick fix (do this first)

Apply the following three‑step workaround, then refresh the page.

1. Open the page in Chrome (or any browser you prefer).
2. Append a query string to the favicon URL, for example /favicon.ico?v=2. You can do this by editing the link tag in the Custom Code section of your Webflow project.
3. Publish the site again. The new URL forces the browser to bypass its cached copy.

After the publish finishes, hit Ctrl+F5 (hard reload). The updated icon should appear instantly.

Root causes explained

Understanding why the icon stayed stale helps you avoid the same glitch later.

Browser cache

Favicons are cached aggressively because they’re tiny and requested on every navigation. Most browsers store the file for days, ignoring a new link tag unless the URL changes.

Webflow’s publish pipeline

When you click Publish, Webflow pushes files to its CDN. The CDN may still serve the previous version until it expires. Adding a version query string tells the CDN that the resource is new.

Incorrect rel attribute

Webflow’s UI inserts <link rel='shortcut icon' href='...'/> by default. Modern browsers prefer rel='icon' as defined in the HTML spec HTML spec. Using the legacy value can cause some browsers to ignore the new file.

Missing or mismatched file type

If the uploaded file is an SVG but the type attribute is omitted, older browsers may fall back to a cached .ico file. Explicitly declaring type='image/svg+xml' removes the ambiguity.

CDN edge caching

Even after a hard reload, a CDN edge node might still hold the old file. Purging the edge cache from the Webflow dashboard (Site Settings → Hosting → Clear cache) resolves this, but the query‑string trick is faster for most developers.

Prevention tips

• Always use rel='icon' and include type for SVG or PNG files.
• Version your favicon URLs (e.g., /favicon.svg?v=202308) whenever you replace the asset.
• After publishing, clear Webflow’s CDN cache via the Site Settings page.
• Test the change in an incognito window to verify that no local cache interferes.
• Consider adding a fallback .ico in the root directory for legacy browsers.

These steps keep the icon pipeline clean and make future updates painless.

Implementation example

Below is a minimal, standards‑compliant snippet you can paste into Webflow’s Custom Code → Head area. It follows the HTML spec and includes a version query string.

<link rel='icon' type='image/svg+xml' href='https://example.com/favicon.svg?v=202308'>
<link rel='icon' type='image/png' href='https://example.com/favicon-32.png?v=202308' sizes='32x32'>

Replace https://example.com/ with your own domain. The version token can be any string that changes when the file changes.

Further reading

For a full walkthrough of uploading a favicon in Webflow, see the official guide Add a favicon or webclip. If you encounter stubborn CDN issues after a deployment, the article Favicon Not Updating After Deployment? The 2‑Minute Fix covers edge‑cache purging in depth.

By applying the quick fix first, then addressing the underlying causes, you’ll keep your Webflow site’s tab icon fresh and consistent across browsers.