Skip to content
FaviconForgePro

How to add a favicon in Webflow

Webflow has two icon fields in Site settings: the favicon (32×32) and the webclip (256×256), which is used for home-screen shortcuts on phones.

Steps

  1. Open your project’s Site settings → General tab, and scroll to Favicon & Webclip.
  2. Upload favicon-32x32.png as the favicon.
  3. Upload a square, opaque image as the webclip (Webflow asks for 256×256 px).
  4. Save and republish the site.

File to use: favicon-32x32.png for the favicon, and a 256×256 PNG for the webclip (use the 1024 px PNG download, or android-chrome-512x512.png). Make it with the favicon generator (free, no signup).

Check it worked

Run the favicon checker on your live URL to confirm every icon loads and Google has a usable size. If the old icon keeps showing, see favicon not showing. The full tag-by-tag explanation is in how to add a favicon.

Other platforms: WordPress · Next.js · Shopify · Squarespace · Wix · React · Astro · Django

Questions people ask

What size is the Webflow favicon?

Webflow asks for a 32×32 px favicon and a 256×256 px webclip.

What is a webclip in Webflow?

The icon shown when someone saves your site to a phone’s home screen; it maps to the apple-touch-icon.