Framer favicon install runbook
There is no repo and no /public folder in Framer — the favicon is a field in the site settings panel, and it reaches visitors only when you publish. That makes the basic job a two-minute one, with two catches: the image must be a clean square, and anything beyond the tab icon needs a custom code snippet.
A setting, not a file
Framer hosts the icon for you once it is uploaded in the site settings panel, next to the site name and social sharing image.
Nothing ships until you publish
Editor state and the published site are separate. A settings change sits there doing nothing until the next publish goes out.
URL finder for Framer
Paste your Framer preview link or production domain. We'll grab every favicon, let you choose one, and push it back to the generator.
Paste a domain and tap Scan to see every icon we can harvest.
We will open the generator with your selected favicon pre-loaded as the base image.
Playbook
Follow these beats whenever your builder regenerates UI so favicon coverage stays ahead of AI edits.
1Export a clean square
Generate the set and keep the largest square PNG to hand. Framer downscales what you give it, so detail added at 512px is what survives at 16px.
2Upload it in site settings
Set the favicon in the site settings panel for that project. Non-square images get cropped or padded, which is where most wonky Framer icons come from.
3Publish and check the live URL
Publish, then hard-refresh both the framer.website staging address and your custom domain — they update independently in your browser's cache.
Checklist
Drop this straight into your deployment doc.
Look at the icon at actual tab size before shipping; fine lines and full wordmarks turn to mush.
If you want an Apple touch icon or manifest, add the link tags through the site's custom head code and host the files somewhere publicly reachable.
Re-publish after every settings change, and verify on the custom domain rather than the editor preview.
Framer favicon FAQ
Why does my Framer site show the Framer logo as its favicon?
That is the fallback when no favicon has been set for the site, or when the site has not been republished since you set one. Upload a square image in the site settings panel and publish again — the default disappears as soon as a real icon is served.
How do I add an Apple touch icon in Framer?
Framer's favicon field covers the browser tab, so extra icon types go in through the site's custom code section for the head. Add the link tags there pointing at publicly hosted image URLs, then publish.
What size should a Framer favicon be?
Upload a square PNG at 512px or larger and let Framer handle the downscaling. Anything non-square gets cropped or letterboxed, and anything small looks soft on high-density displays.
Framer install guide
Add /framer/favicon-install to project README files, onboarding docs, and launch checklists so nobody skips the favicon step.