Webflow

How to Add a Favicon to Webflow

Webflow creates browser favicons and mobile touch icons from one square source image. Upload the image in Site Settings, choose the icon surfaces you want to update, apply the change, and publish the site.

Step 1: Prepare a Square Favicon Image

Start with a simple square logo that remains recognizable at small sizes. A high-resolution PNG such as 512x512 gives Webflow a clean source image for every generated size. Use our favicon converter to prepare an existing logo, or the text favicon generator to create an icon from letters or initials.

If you downloaded a favicon.io package, the android-chrome-512x512.png file is a strong source image for Webflow. Webflow also accepts SVG uploads and converts them to PNG for cross-browser compatibility.

Step 2: Open Webflow Site Settings

Open the Webflow Dashboard, find your site, and enter Site Settings. Select the General tab, then scroll to the Icons section.

Step 3: Upload Your Icon

Click Upload icon and choose your square image. Webflow uses that image to generate the favicon, webclip, and touch icon sizes used across browsers and mobile devices.

Choose a clean filename before uploading. Webflow notes that the asset filename can appear in your site's HTML, so avoid private information or internal project names.

Step 4: Select the Icons to Update

Select the favicon and touch icon surfaces that should use the uploaded image. Webflow generates these sizes automatically:

Optional: Add a Dark Mode Favicon

After setting the light favicon, Webflow lets you upload a separate 32x32 favicon for dark browser or operating-system themes. Use an icon with enough contrast against dark tab backgrounds. Webflow serves it with the browser's prefers-color-scheme setting.

Step 5: Apply and Publish

Click Apply, then publish the site to your Webflow staging domain and custom domain as appropriate. The new favicon is not live until the site is published.

Open the published site in a private window to check the browser tab. Then enter the production URL in our favicon checker to verify that the generated icons are reachable.

Troubleshooting Webflow Favicons

• The new favicon is not visible: Confirm that you clicked Apply and published the latest site changes.
• The old icon still appears: Test in a private window or clear the browser cache. Browsers often retain old favicons after other site assets have updated.
• The favicon looks blurry: Upload a larger, simpler square source image. Fine text and thin details do not survive well at 32x32 pixels.
• The dark icon option is missing: Upload and apply the light-theme favicon first. Webflow displays the dark favicon option afterward.
• Google shows the old favicon: Verify the published 48x48 icon, then request homepage indexing in Google Search Console. Search-result updates can take longer than browser-tab updates.

Webflow Favicon FAQ

What size should a Webflow favicon be?

Webflow asks for one square source image and automatically generates 32x32 and 48x48 favicons plus 180x180, 192x192, and 256x256 touch icons. A 512x512 PNG is a practical source image.

Does Webflow generate favicon sizes automatically?

Yes. One square upload can generate all Webflow favicon, webclip, and touch icon sizes. SVG source files are rasterized to PNG for compatibility.

Can Webflow use a different favicon for dark mode?

Yes. After uploading the light favicon, you can provide an optional dark-theme favicon. Webflow serves it when the browser or operating system prefers a dark color scheme.

Why is my Webflow favicon not updating?

The most common causes are an unpublished change or browser caching. Apply the icon, publish the site, and test the live URL in a private window.

See Webflow's official favicons and webclips documentation for the current platform controls.