How to Add a Favicon in Framer
Published June 9, 2026
Add a favicon in Framer by uploading a square image (512×512 ideal) in Site Settings → General, then publish your site to make it live.
Framer keeps the favicon where most no-code builders do: in your project’s Site Settings, on the General tab. You upload one square image, save it, and publish the site — that’s what makes the icon live. There’s no folder of files to upload and no HTML to touch. Use a 512×512 square so Framer has plenty to scale down from; it displays the favicon small (around 32×32 in a browser tab), but a larger source stays sharp on high-DPI screens. The setting is site-wide, so you set it once and every page uses it.
In one line: in Framer, upload a square favicon in Site Settings → General, then publish.
The step everyone misses is the last one. A saved favicon that hasn’t been published won’t appear on the live site. Below are the exact steps, the right source size, where this fits against Framer’s per-page settings, and what Framer’s single-image approach can’t do on its own.
How to add a favicon in Framer
The favicon lives in your project’s site-level settings, not on any individual page:
- Open your project in the Framer editor.
- Open Site Settings (the project/settings panel — usually reached from the top toolbar or the project menu).
- Go to the General tab.
- Find the favicon (sometimes labelled site icon or icon) field and upload your image.
- Save the setting.
- Publish the site to push the change live.
That’s the whole flow. The favicon you set here applies to the entire project, so you don’t repeat it per page. If you don’t see the exact “favicon” wording, look in the same General/branding area of Site Settings — Framer groups the site name, icon, and SEO defaults together.
What size and format to upload
Framer scales your one upload down to tab size, so give it a clean, large square:
| Setting | Where it lives | Displayed size | Upload this |
|---|---|---|---|
| Favicon / site icon | Site Settings → General | ~32×32 in a browser tab | 512×512 square PNG |
A few rules that hold every time:
- Go large. A 512×512 source downscales cleanly to the small tab icon and to any home-screen tile. A 32×32 upload looks soft the moment it’s enlarged.
- Go square. A rectangular logo gets cropped or squished. Crop to a square or add even padding first. See favicon sizes & dimensions for the full chart.
- PNG is the safe choice. PNG avoids the compression fuzz JPG shows at small sizes, and it keeps transparency where it’s wanted. You don’t need to hand-make an ICO — Framer handles the conversion for the tab icon.
- Simplify the mark. At 32×32 a detailed logo turns to mush. Lean on one bold shape and strong contrast. (How to create a favicon from an image or logo →)
Site-wide, not per page
Framer separates site settings from per-page settings, and the favicon belongs to the first group. Per-page settings in Framer control things like each page’s title and meta description — useful for SEO, but they don’t change the icon. The favicon is set once in Site Settings → General and shared by every page in the project. So you can’t, for example, show one icon on the homepage and another on a blog post; the site has a single favicon.
That’s normal and almost always what you want — a favicon is a brand mark, and a consistent icon across every tab is the point.
What Framer’s single image can’t do on its own
Here’s the trade-off the upload field doesn’t mention: Framer takes one image for the favicon. That covers browser tabs and bookmarks, which is enough for most sites. What a single image upload doesn’t give you by default:
- A modern
favicon.svg— the scalable, dark-mode-capable primary icon - A properly opaque, padded
apple-touch-icon(180×180) for iOS home-screen saves - A separate maskable PWA icon with its art inside a central 409×409 safe zone for Android adaptive shapes
For a brochure site or portfolio, the tab icon alone is genuinely fine. If you want the full modern package, you’d generate it first and then add the extra pieces via custom code injected into the page <head>. Be careful here: Framer’s custom-code and head-injection options vary by plan, and not every project can add arbitrary <head> markup. If your plan does allow custom head code, you can add the modern <link> tags yourself; if it doesn’t, the uploaded favicon is what you’ve got. Don’t assume the option exists — check your project’s settings before planning around it.
When custom head code is available, the clean markup to add looks like this (host the files where Framer lets you serve assets, or on your own CDN):
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Note there’s no rel="shortcut icon" — that relation was never valid and modern guides drop it. (Full tag-by-tag breakdown →)
Generate the full set from one upload
Whether you’re just filling Framer’s favicon field or going further with custom head code, start from a properly built set rather than a single hand-resized PNG. FaviconBuilder takes one logo — SVG preferred, or a PNG/JPG at 512×512 or larger — and outputs the complete verified set: a multi-size favicon.ico, a scalable favicon.svg, an opaque 180×180 Apple touch icon, the 192 and 512 PWA icons, a padded maskable icon, plus a ready ZIP and copy-paste HTML and manifest. It’s free, needs no account, and the image never leaves your browser.
For the basic Framer setup, upload the 512×512 PNG it produces into Site Settings → General. If your plan supports custom head code, host the rest of the files and paste in the <link> tags above for SVG, Apple touch, and PWA coverage.
Favicon not updating after you publish?
If the old icon hangs around, it’s almost always one of three things — and rarely a failed upload:
- Did you publish? This is the big one. Saving the favicon in Site Settings isn’t enough — Framer changes go live only when you publish the site.
- Cache. Hard-refresh the page (Ctrl/Cmd + Shift + R) and check in a private/incognito window. Browsers cache favicons aggressively.
- Custom domain delay. On a connected domain, give the CDN a few minutes to serve the new file before assuming something’s wrong.
Still stuck after publishing and a hard refresh? Walk through the full checklist in favicon not showing? how to check & fix it.
Summary
Adding a favicon in Framer is three steps: open Site Settings → General, upload one square image (512×512 ideal, not a tiny 32×32), and publish the site. The favicon is site-wide, so you set it once for the whole project.
- Where: Site Settings → General → favicon (site icon) field
- Source size: 512×512 square PNG, displayed small in tabs
- To go live: publish — saving alone won’t do it
- Limitation: one image only; SVG, opaque Apple touch, and maskable PWA icons need custom head code, which is plan-dependent
For everything beyond the basic tab icon, generate the full modern set first, then upload the image — and add the extra <link> tags if your Framer plan allows custom head code.
Continue reading:
Frequently asked questions
Where do I add a favicon in Framer?
Open your project's Site Settings and go to the General tab. There's a favicon (site icon) field — upload a square image and save. The favicon is site-wide, so you set it once for the whole project rather than per page.
What size favicon should I upload to Framer?
Use a square image at 512×512 pixels. Framer displays the favicon small (around 32×32 in a browser tab), but it scales your upload down, so a larger square source stays crisp on high-DPI tabs and home-screen saves. A tiny 32×32 upload will look soft.
Why isn't my Framer favicon showing after I uploaded it?
The most common reason is that you saved the favicon but didn't publish the site — Framer changes only go live on publish. After publishing, hard-refresh (Ctrl/Cmd + Shift + R) and check in a private window, since the old icon is usually cached. On a custom domain, allow a few minutes for the CDN to update.
Can I set a different favicon for each page in Framer?
No. The favicon in Framer is a site-wide setting in Site Settings → General, so it applies to every page in the project. Per-page settings in Framer cover things like the page title and meta description, not the favicon.
Does Framer generate a full modern favicon set with SVG and PWA icons?
Framer takes one image for the favicon, so by default you don't get a separate SVG, an opaque Apple touch icon, or a maskable PWA icon. For the complete modern set, generate it first with a favicon generator and upload the produced image — adding the rest depends on whether your Framer plan allows custom head code.