How do I add a favicon in Webflow?

Upload one square image

The mark in a browser tab is a favicon. The icon someone sees after saving your site to a phone home screen is a webclip, also called a touch icon. Webflow builds both from one upload.

Open Site settings, then General, then Icons. Click Upload icon and choose a single square image. Webflow generates the sizes it uses: a 32 by 32 favicon for tabs and bookmarks, a 48 by 48 favicon used in Google search results, a 256 by 256 webclip, a 180 by 180 Apple touch icon, and a 192 by 192 Android home screen icon.

If the logo is an SVG, Webflow converts that upload to PNG so more browsers can show it. A wide wordmark cropped into a square often becomes an unreadable blob at 32 pixels. Start from a simple mark that is still recognizable when it is tiny. For example: a square file named mark.png, with the symbol centered and a little padding, not a full horizontal logo.

Choose which icons to replace

After the upload, select which icons should use that image, then click Apply. You do not have to guess separate files for every pixel size. If an older icon should stay on one of those slots, leave that slot unselected.

A dark mode favicon is optional. The control appears only after a light favicon is set. Upload a version that stays visible on a dark browser tab. Webflow serves it when the visitor's browser or operating system asks for a dark color scheme. Skip it if the light icon already reads clearly on both light and dark tabs.

Publish, then look at the live tab

Apply stores the choice in site settings. The live site changes when you publish. Open the published domain, not only the Designer, and refresh. Browser tabs keep old favicons for a long time, so a normal reload can lie. Use a hard refresh or a private window before you decide the upload failed.

Check three places: the browser tab, a bookmark, and a phone home screen if you set the webclip. The tab icon and the home screen icon are different sizes. A mark that looks fine at 32 pixels can still look soft at 180 if the source file was tiny. Upload a square image large enough for Webflow to generate the bigger icons, rather than a 16 pixel file stretched up.

Keep the file name boring

Webflow puts the asset file name in the HTML. Do not name the file with a private client, a campaign code you do not want public, or a joke. mark.png or favicon.png is enough.

This setting is site-wide. You do not add a different favicon on each page in the Pages panel. If you duplicate the site later, the favicon can copy with it, but a new site still needs its own publish before visitors see the icon.

Icons are not a substitute for alt text on images in the page body, and they are not the Open Graph image people see when a link is pasted into a social post. Set those separately. After the favicon is published, glance at the tab whenever you do a monthly pass on the live site so a blank or outdated mark does not sit there for months.