Webflow Favicon: How to Add a Favicon and Webclip

By Umair Ali Sadaqat · Updated November 6, 2026 · Editorial policy

Add a favicon and webclip in Webflow: where the Icons setting lives, the sizes Webflow generates, how to publish it, and what to do when it won't update.

Short answer: In Webflow, open Site settings > General > Icons, upload one square image, choose which icons to update (light favicon, optional dark-mode favicon, webclip), apply the change, and publish the site. Webflow lists a 32x32 favicon and a 256x256 webclip, and it generates the other sizes from your upload. Nothing changes on the live site until you publish. (Checked November 2026 against Webflow's help center and update notes.)

What Webflow asks for

Older tutorials describe two separate upload fields, one for a 32x32 favicon and one for a 256x256 webclip. Webflow's current help article describes a simpler flow: upload a single square image and Webflow handles the sizing. Here is what each icon is for.

Icon	Size Webflow lists	Where it shows
Favicon (light)	32x32	Browser tabs and bookmarks
Favicon (dark mode, optional)	32x32	Browser tabs when the browser is in dark mode
Webclip	256x256	Home screen shortcuts and similar saved links
Auto-generated extras	48x48 favicon, 180x180 and 192x192 touch icons	Generated by Webflow from your upload

Accepted upload formats per Webflow's update notes: PNG, JPG, GIF, ICO, and SVG. SVG uploads are rasterized to PNG for cross-browser compatibility.

For a deeper look at sizes across platforms, see our favicon sizes guide.

Prepare your image first

A favicon renders around 16 to 32 pixels wide in a tab, so the source image matters more than the settings.

Start square. Export a square canvas, 256x256 or larger, so the webclip is not upscaled.
Simplify. Use a logomark or a single letter, not a full wordmark. Fine detail turns to mush at tab size.
Mind the background. A transparent PNG looks good on light tabs and can vanish on dark ones. If you use a dark-mode favicon, make a version with a light mark.
Use a neutral filename. Uploaded asset names can end up in your published HTML, so avoid "final_v3_REAL.png".

How to add a favicon and webclip in Webflow

Open your project in the Webflow Designer or dashboard and go to Site settings.
Select the General tab and scroll to Icons.
Click Upload icon and choose your square image.
Pick which icons the image should update: the favicon, the optional dark-mode favicon, and the webclip.
If you want a different dark-mode icon, add it in the dark-mode slot. This one is optional.
Click Apply. The UI wording may shift slightly as Webflow updates it, so match the labels you see.
Publish the site to your domains. Saving alone does not push icons to the live site.
Open the live site in a private window and check the tab.

Copyable checklist

`` [ ] Square source image, 256x256 or larger [ ] Mark is simple enough to read at tab size [ ] Tested on a light and a dark browser theme [ ] Uploaded under Site settings > General > Icons [ ] Applied the change [ ] Published to the live domain (not just the webflow.io staging domain) [ ] Checked in a private window [ ] Hard refreshed or cleared cache if the old icon persists ``

Troubleshooting

The favicon still shows the old icon or the Webflow logo

Work through these in order:

Publish again. Icons only go live with a publish. If you publish to several domains, include all of them.
Test in a private window. Browsers cache favicons aggressively, and a normal tab can show the old one for a long time.
Hard refresh the page, or close and reopen the browser.
Open the file directly. Check that the icon URL in the page source loads in its own tab.

The upload is rejected or looks distorted

Some community threads report size errors with older flows that required exact dimensions. If you hit one, use a square image and try again, and if the problem continues, try another browser or a private window. That advice comes from forum reports, not from Webflow's documentation, so treat it as a workaround.

Google search results show the wrong icon

The icon in search results is controlled by Google, not by Webflow. Community threads describe updates taking days, weeks, or longer. Confirm the icon loads on your live site, then wait. Keeping a stable, square icon at a consistent URL helps.

The icon looks blurry in tabs

This usually means the source has too much detail or was low resolution to begin with. Redraw a simpler mark at a larger size and re-upload.

Which format should you upload?

Format	Good for	Watch out for
PNG	Most sites; reliable and supports transparency	Needs enough resolution for the webclip
SVG	Clean source art	Webflow rasterizes it to PNG, so preview the result
ICO	Legacy workflows	Often unnecessary when Webflow generates sizes for you
JPG	Rarely a good choice	No transparency; leaves a background box

If you are not sure, a square PNG at 256x256 or larger is the safest pick.

Where this fits in launch prep

A favicon is a small part of a launch checklist, alongside titles, descriptions, and social images. If you are weighing platforms before you commit, our Webflow comparison and Webflow alternatives pages cover the trade-offs, and the general guide to changing a favicon applies if you manage sites on more than one platform.

If you would rather start from a ready-made layout, We.Inc's free plan lets you publish up to three sites from ready-made templates; the AI builder that drafts a site from a prompt starts on the Starter plan at $20 a month. You can sign up here.

Frequently asked questions

What size should a Webflow favicon be?

Webflow's help center lists a 32x32 favicon and a 256x256 webclip. In its current flow you upload one square image and Webflow generates the other sizes for you, so start from a square file that is at least 256x256 pixels and stays readable when shrunk.

Where do I upload a favicon in Webflow?

Open Site settings, go to General, and find the Icons section. Upload your square image, choose which icons to update, apply the change, then publish the site. Older guides call this Project settings, but it is the same place.

What is a webclip in Webflow?

A webclip is the larger icon used when someone saves your site to a phone home screen or similar shortcut. Webflow lists it at 256x256 pixels. It is separate from the small icon shown in the browser tab.

Why is my Webflow favicon not showing after I uploaded it?

The most common cause is that the site was not published after the upload, since icons only change on the published site. The second is browser caching. Publish, then check in a private window or another browser before assuming the upload failed.

Does Webflow support SVG or dark mode favicons?

Webflow's update notes say you can upload PNG, JPG, GIF, ICO, or SVG, and the help article lists an optional dark-mode browser tab icon. Webflow also converts SVG uploads to PNG for cross-browser compatibility, so test the result in the browsers you care about.

How long until Google shows my new Webflow favicon?

There is no fixed timeline. Google decides when to re-crawl and refresh the icon in search results, and community reports describe it taking days to weeks or longer. Making sure the icon is live on your published site is the part you control.

Alternatives mentioned in this article

Webflow alternatives

Related guides and tools

favicon generator

Start building

How we research, test and update this page: our editorial policy. We.Inc is our own product.