Where is the favicon setting in Webflow?

In Project Settings, on the General tab, in the Favicon & Webclip section. Upload a 32x32 favicon and a 256x256 webclip, then publish.

What is the difference between Favicon and Webclip in Webflow?

The Favicon (32x32) is the browser tab icon. The Webclip (256x256) is the Apple touch icon used when someone adds your site to an iOS home screen.

What size should the Webflow webclip be?

256x256px with an opaque background and no rounded corners. iOS applies its own rounded mask, so a full-bleed square looks best.

Do I need to republish after changing the favicon in Webflow?

Yes. Saving in Project Settings does not push changes live. Click Publish so Webflow regenerates the pages with the new icon link tags.

All platforms

Favicon for Webflow

How to add a favicon in Webflow

To add a favicon in Webflow, open Project Settings, then General, scroll to Favicon & Webclip, upload a 32x32px favicon and a 256x256px webclip (Apple touch) icon, then publish your site. Webflow injects the correct link tags for you.

What you need

A 32x32px favicon image (Webflow accepts larger and downscales).
A 256x256px webclip image for the Apple touch icon / home-screen shortcut.
Webflow injects the link tags automatically; you just upload and publish.

Step-by-step: add a favicon in Webflow

Open Project Settings. In the Webflow Designer, click the project name, then Settings (or go to your dashboard, then the project, then Settings), and open the General tab.
Upload Favicon and Webclip. Scroll to the Favicon & Webclip section. Upload a 32x32px image for Favicon and a 256x256px image for Webclip.
Save and publish. Click Save Changes, then Publish your site. Webflow adds the favicon and apple-touch-icon link tags to every page.

Common mistakes to avoid

Uploading the same tiny 32x32 for the webclip - it looks pixelated on iOS home screens. Use 256x256.
Adding transparency to the webclip; iOS fills transparent pixels with black, so use an opaque background.
Forgetting to publish - settings saved in the dashboard do not go live until you republish.
Relying on Favicon & Webclip alone if you need Android maskable PWA icons (add those via custom code).

Free forever, no sign-up

Generate a complete icon set for Webflow

One logo in, every file out: favicon.ico, the PNG sizes, the Apple touch icon, Android and PWA icons, a maskable icon, the web manifest, and a copy-paste snippet ready for Webflow. Free, private, and generated in your browser.

Open the generator

Frequently asked questions

Where is the favicon setting in Webflow?: In Project Settings, on the General tab, in the Favicon & Webclip section. Upload a 32x32 favicon and a 256x256 webclip, then publish.
What is the difference between Favicon and Webclip in Webflow?: The Favicon (32x32) is the browser tab icon. The Webclip (256x256) is the Apple touch icon used when someone adds your site to an iOS home screen.
What size should the Webflow webclip be?: 256x256px with an opaque background and no rounded corners. iOS applies its own rounded mask, so a full-bleed square looks best.
Do I need to republish after changing the favicon in Webflow?: Yes. Saving in Project Settings does not push changes live. Click Publish so Webflow regenerates the pages with the new icon link tags.

Favicon guides for other platforms

New to favicons? Read the complete favicon guide and the icon size cheatsheet, or jump straight to the favicon generator.