How to change your Webflow favicon
Upload in Site Settings, publish, then check the live domain.
How to change your favicon in Webflow
- Open your Webflow site's Site Settings > General > Icons.
- Choose Upload icon and select a square image. Webflow generates the required icon sizes.
- Select the icons to update, then click Apply. A dark-mode favicon can be added after the light version.
- Publish the site, including the domain your visitors use.
- Open the live site and refresh it to check the result.
These steps follow Webflow's current favicon and webclip documentation. You do not need to manually add a favicon link tag for the built-in Icons workflow.
Webflow favicon not showing? Check the live site
A saved setting is not the same thing as a verified public page. Open your published domain, not only the Designer preview. Compare the tab icon with your source image. Then run that URL through the favicon checker to inspect which icon references the public page exposes.
If the icon still looks wrong, identify the symptom before changing the file again:
| What you see | What to check next |
|---|---|
| Old icon on the live domain | Confirm that you published to that domain. Try a fresh browser profile to distinguish an old local cache from old deployed markup. |
| New icon in one browser, old icon in another | Compare the live icon URLs before re-uploading. Browser caching can make the same deployment look different. |
| Missing or unreadable artwork on a dark tab | Compare your light and dark variants. A dark mark without a contrasting background may disappear. |
| New browser icon, old Google result | Treat Google separately. Check the public references first, then use the Google Search favicon guide. |
| Extra or conflicting icon references | Review any custom head code you previously added. Do not delete unrelated metadata while removing an obsolete favicon declaration. |
Which favicon image should you upload to Webflow?
Use a clean square source with the important shape centered. Start with at least 256 x 256 pixels so a small source is not stretched for larger uses. Keep a little breathing room around the mark and avoid a complete wordmark that becomes unreadable in a tab. The examples gallery compares several approaches at 16, 32 and 48 pixels.
Webflow's current documentation lists 32 and 48 px light favicons, an optional 32 px dark favicon, a 256 px webclip, and 180/192 px touch icons. SVG uploads are rasterized to PNG. Let Webflow generate its supported variants rather than renaming one downloaded file for every size.
Do I need an ICO converter for Webflow?
Not for the built-in image upload described above. Keep your original high-quality image for Webflow. An ICO converter is useful when you specifically need a favicon.ico for another deployment, not an extra required step here.
No original image yet? Make a simple initial with the favicon generator, or choose a licensed design from the emoji favicon generator. If you use an emoji pack, retain its artwork attribution and choose a suitably sized PNG as your source.
Webflow favicon setup checklist
- Record the public domain and the date you published the change.
- Keep both source variants clearly named if you use light and dark artwork.
- Open the public page in each appearance mode you support.
- Check another browser before assuming an upload failed.
- Send the live URL, not only a screenshot of the settings, to the person approving the change.
Source checked September 14, 2026: Webflow Help: Favicons and webclips. This is an independent guide; FaviconMaker is not affiliated with Webflow. Interface labels can change.
