Webflow
How to Add a Favicon and Webclip in Webflow
Short answer
Go to Site settings → General → Icons and upload a square image; a 512×512 PNG works well. Webflow makes the favicon (32 and 48), the webclip (256) and touch icons (180, 192). You can add a separate dark mode favicon. Publish the site for it to go live.
Checked against Webflow Help: Favicons and webclips and Google: Favicon in Search in October 2026.
What Webflow generates
| Icon | Size | Used for |
|---|---|---|
| Favicon (light) | 32×32 | Browser tabs and bookmarks |
| Favicon (light) | 48×48 | Google search results |
| Favicon (dark) | 32×32 | Tabs in dark mode (optional) |
| Webclip | 256×256 | Safari bookmarks and home screens |
| Touch icon | 180×180 / 192×192 | Apple / Android home screens |
Steps
- 01Open Site settings → General.
- 02In Icons, upload a square image (512×512 PNG recommended).
- 03Optionally upload a dark mode favicon.
- 04Save, then Publish the site.
Older Webflow projects show two separate fields: a 32×32 Favicon and a 256×256 Webclip. Upload one image to each.
Webflow favicon not showing: fixes
| You see | Why | Fix |
|---|---|---|
| Still the Webflow icon | Settings saved but not published | Publish the site |
| Old icon in the tab | Browser cache | Private window |
| Shows in the tab, not in Google | Google recrawls on its schedule | Wait; check it's at least 48×48 |
| Blurry home screen icon | Small source image | Upload 512×512 |
FAQ
What size is the Webflow favicon?
Upload a square image (512×512 works well). Webflow makes the 32×32 and 48×48 favicons.
What is the Webflow webclip?
The 256×256 icon for Safari bookmarks and phone home screens.
Why doesn't my new favicon show in Google yet?
Google picks it up when it recrawls your home page, which can take several days to several weeks. It isn't guaranteed to show.