How to add a favicon in Webflow (and the webclip icon)
Webflow has two icon fields: the favicon for browser tabs and the webclip for phone home screens.
Sizes Webflow expects
| Field | Recommended file |
|---|---|
| Favicon | 32×32 PNG (or ICO) |
| Webclip | 256×256 PNG, not transparent |
Make both from your logo with the favicon generator: use favicon-32x32.png for the favicon, and for the webclip use the ICO generator’s 256×256 size or the 180×180 apple-touch-icon.png.
Steps
- Open your project and go to Site settings.
- In the General tab, find the Favicon and Webclip upload fields. (Webflow occasionally renames or moves settings; look for "Icons" if you don’t see them.)
- Upload each file.
- Save changes, then Publish your site. The icon only changes on the live site after publishing.
Webflow favicon not updating?
- Open the published site in a private window; browsers cache favicons.
- Make sure you published to the domain you’re checking (both the webflow.io address and your custom domain).
- Run the favicon checker on your live domain.
More fixes: favicon not showing.