Where is the favicon setting in Framer?

In Site Settings, on the General tab, in the Favicon section. Upload a square image and then publish your site for it to appear.

What favicon size is best for Framer?

A square image at 512x512px. Framer downscales it for the browser tab, so a larger, simple, high-contrast mark stays sharp at small sizes.

Do I need to publish after adding a favicon in Framer?

Yes. Uploading in the editor does not push the favicon live. Click Publish so Framer regenerates the site with the new icon.

Why is my Framer favicon not updating?

Confirm you published the site, then hard-refresh or open a private window. Browser favicon caching commonly keeps the old icon visible for a while.

All platforms

Favicon for Framer

How to add a favicon in Framer

To add a favicon in Framer, open Site Settings (the gear or your project name), go to the General tab, find the Favicon field, and upload a square image - 512x512px works best. Click Publish to push it live across your site.

What you need

A square image, ideally 512x512px (PNG with transparent or solid background).
Framer generates the tab icon and link tags for you.
Publishing is required for the change to go live.

Step-by-step: add a favicon in Framer

Open Site Settings. In the Framer editor, open Site Settings (click the project name or the settings gear), then go to the General tab.
Upload the favicon. Find the Favicon section and upload a square image. Use 512x512px for the sharpest result.
Publish. Click Publish. Framer regenerates the live site with your favicon in the browser tab.

Common mistakes to avoid

Uploading a rectangular logo that gets cropped or squished into the square tab icon.
Skipping Publish - changes in the editor are not live until you publish.
Using a complex logo that is illegible at 16x16; simplify to a symbol.
Not hard-refreshing after publishing, so the cached old icon appears.

Free forever, no sign-up

Generate a complete icon set for Framer

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 Framer. Free, private, and generated in your browser.

Open the generator

Frequently asked questions

Where is the favicon setting in Framer?: In Site Settings, on the General tab, in the Favicon section. Upload a square image and then publish your site for it to appear.
What favicon size is best for Framer?: A square image at 512x512px. Framer downscales it for the browser tab, so a larger, simple, high-contrast mark stays sharp at small sizes.
Do I need to publish after adding a favicon in Framer?: Yes. Uploading in the editor does not push the favicon live. Click Publish so Framer regenerates the site with the new icon.
Why is my Framer favicon not updating?: Confirm you published the site, then hard-refresh or open a private window. Browser favicon caching commonly keeps the old icon visible for a while.

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.