How to Add a Favicon in Webflow (Favicon & Webclip)

In Webflow you set the favicon in Project Settings → General, under the Favicon & Webclip section. There are two separate fields: upload a square Favicon (Webflow displays it at 32×32 in browser tabs) and a separate Webclip image (256×256, used as the Apple touch / home-screen icon). Then republish the site — the change won’t go live until you do.

In one line: Webflow favicons live in Project Settings → General → Favicon & Webclip, two fields, then republish.

That two-field setup is the part most guides miss. Webflow doesn’t ask for one favicon — it asks for a tab icon and a home-screen icon, and they do different jobs. Below are the exact steps, the right sizes, the one limitation to know about, and how to fix a favicon that won’t update.

How to add a favicon in Webflow

The favicon setting is in your project’s settings, not the Designer canvas:

1. Open your project, then click the gear icon in the left sidebar (or the project name) to open Project Settings.
2. Go to the General tab.
3. Scroll down to the Favicon & Webclip section.
4. Under Favicon, click to upload your square favicon image — this is the icon shown in browser tabs. Webflow renders it at 32×32.
5. Under Webclip, upload a 256×256 image — this is the Apple touch icon used when someone saves your site to a phone home screen.
6. Click Save Changes.
7. Publish your site (top-right Publish button → select your domains → Publish to Selected Domains).

The favicon will not appear until step 7. Saving in Project Settings stores the images; publishing is what pushes them to your live site. This trips up a lot of people — they upload, see nothing change, and assume it failed.

Favicon vs Webclip: the two fields explained

Webflow’s two fields map to two different surfaces, and you want both filled:

Field	What it is	Recommended size	Where it shows
Favicon	The classic browser-tab icon	Square, shown at 32×32 (upload larger)	Browser tabs, bookmarks, history
Webclip	Webflow’s name for the Apple touch icon	256×256 square	iOS home screen when a visitor saves your site

The Webclip is effectively your apple-touch-icon. Two rules apply to it specifically:

• Make it opaque. iOS composites the icon onto the home screen and applies its own rounded-corner mask. A transparent background can render as black. Fill it with a solid colour.
• Keep the artwork off the edges. iOS rounds the corners, so leave a little padding so nothing important gets clipped.

For the Favicon field, a clean square version of your logo works. Don’t upload a tiny 32×32 file and stop there — give Webflow a larger square (256×256 is a safe choice for both fields) so the icon stays crisp on high-DPI displays. A detailed logo turns to mush at tab size, so lean on one bold shape and strong contrast. See favicon sizes & dimensions for the full chart and how to create a favicon from an image or logo for prepping the square source.

Recommended sizes for Webflow

The same square image can feed both fields. A practical setup:

• Favicon: a square PNG, at least 32×32 but ideally 256×256 or larger so it downscales cleanly.
• Webclip: a 256×256 opaque square (no transparency).
• Format: PNG is the safe pick. It keeps transparency for the favicon where you want it and avoids JPG compression fuzz at small sizes.

If you generate a 512×512 PNG with a favicon tool, you can use that single file for both fields — Webflow handles the resizing.

The Webflow limitation most guides skip

Here’s the trade-off the Favicon & Webclip screen doesn’t tell you: those two fields accept exactly two raster images, and that’s all the favicon UI does. What it does not let you add:

• A modern favicon.svg — the sharp, scalable, dark-mode-capable primary icon
• A full PWA manifest (site.webmanifest) with 192, 512, and maskable icons
• A properly padded maskable icon for Android adaptive shapes

For most brochure sites and portfolios, the two-field setup is genuinely fine — browser tabs, bookmarks, and iOS home screens will all show your icon. But if you want the complete modern package, you have a clean workaround.

Adding extra icon tags via Custom Code

Webflow lets you inject markup into the page <head>. To add an SVG favicon and a manifest, host the files (Webflow’s Assets or any static host / CDN), then go to Project Settings → Custom Code → Head Code and paste the standard tags:

<link rel="icon" href="https://yourcdn.com/favicon.svg" type="image/svg+xml">
<link rel="manifest" href="https://yourcdn.com/site.webmanifest">

Webflow’s built-in Favicon field already emits a <link rel="icon"> for the .ico/PNG and the Webclip handles apple-touch-icon, so you’re adding the SVG and manifest on top. Note the rel="icon" relation — never rel="shortcut icon", which has never been a valid relation. (Full tag-by-tag breakdown →) For most sites you can skip this entirely and just use the two fields.

Generate the full set from one upload

Whether you’re filling the two Webflow fields or going the Custom Code route for the full modern set, the icons have to be the right shape and the right sizes first. FaviconBuilder takes one logo (SVG preferred, or a PNG/JPG at 512×512 or larger) and produces the complete verified set — multi-size favicon.ico, scalable favicon.svg, an opaque 180×180 Apple touch icon, the PWA icons, and site.webmanifest — plus a ZIP and copy-paste HTML. Free, no account, and the image never leaves your browser.

For a basic Webflow site, just use the 256×256 PNG it produces for both the Favicon and Webclip fields. For the full set, host the generated favicon.svg and manifest and paste the two extra tags into Head Code.

Webflow favicon not showing? Troubleshooting

If the new icon doesn’t appear, work through these in order — it’s almost always one of the first two:

1. Did you republish? This is the number-one cause on Webflow. Saving Project Settings is not enough; click Publish and confirm it published to your live domain.
2. Clear the cache. Browsers cache favicons aggressively. Hard-refresh with Ctrl/Cmd + Shift + R, then check in a private/incognito window where nothing is cached.
3. Check the right domain. A favicon set on your live custom domain won’t change a tab you still have open pointing at the old .webflow.io staging URL — and vice versa. Make sure you published to, and are viewing, the same domain.
4. Confirm both fields. A missing home-screen icon usually means the Webclip field is empty, not the Favicon.
5. Custom domain just connected? Give DNS and Webflow’s CDN a few minutes to serve the new file.

Still stuck across browsers and devices? Work through the general checklist in favicon not showing? how to check & fix it.

Summary

Adding a favicon in Webflow is three steps: open Project Settings → General → Favicon & Webclip, upload a square Favicon (shown at 32×32) and a 256×256 Webclip (the Apple touch icon, opaque), then republish.

• Two fields, not one — Favicon for tabs, Webclip for iOS home screens.
• Republish to apply — saving alone does nothing on the live site.
• The favicon UI won’t add SVG or a PWA manifest — for those, host the files and add <link> tags via Project Settings → Custom Code → Head Code.
• Most sites are fine with just the two fields.

Continue reading:

• How to Add a Favicon in Shopify & Website Builders
• Favicon Sizes & Dimensions: Every Size You Need
• How to Create a Favicon From an Image or Logo
• Favicon Not Showing? How to Check & Fix It