Framer Favicon: How to Add and Replace It Correctly

If your published Framer site shows a generic globe in the browser tab, check three layers: the project’s favicon field, the published domain, and the HTML response. A project-level Framer favicon can be replaced without a page redesign.

Use Framer’s native uploader first. It keeps the icon attached to the project and avoids a separate HTML snippet. Use custom code only for an SVG, a specific size, or a controlled asset URL.

Before you start

• Access to the Framer project and its Settings panel.
• A square source image. Export a 512×512 PNG, plus ICO or SVG if needed, with Mzu favicondl.
• The exact domain visitors use, including any custom domain.

For broader upload guidance, see our no-code favicon guide. Below, we focus on Framer settings, publishing, and verification.

How to add a Framer favicon

1. Open the project settings.

   Open the project in Framer, select Settings from the top project menu, and open the site settings. Find the Favicon or Site Icon field under general site details; if it is absent, check the SEO or site-metadata section of the same panel. Do not configure it on one page.

2. Upload a square icon.

   Choose Upload, select the PNG, and check the crop. Center the mark and remove tiny text that disappears at tab size. Save the change. If the field accepts SVG or ICO, use that export; otherwise, use the PNG.

3. Publish the project.

   Select Publish, then open the published URL in a new tab. The editor canvas is not what visitors receive.

4. Verify the live response.

   In the DevTools Elements panel, search for rel='icon'. Confirm that the URL points to your uploaded asset. In the Network panel, request it and check the status; a failed request cannot update the tab icon.

5. Use custom code only for a deliberate override.

   If Custom Code is available in the project settings, open its Head section and add this, replacing both URLs with public HTTPS asset URLs:

   <link rel='icon' type='image/svg+xml' href='https://your-domain.com/favicon.svg'>
   <link rel='icon' type='image/png' sizes='512x512' href='https://your-domain.com/favicon-512.png'>

   The HTML Standard defines external icon links with rel='icon'. Disable the native upload or any older snippet so one source owns the icon.

Common pitfalls

• It works in the editor only. Publish again and test the live domain, not a preview URL.
• Duplicate icon links. Remove stale custom code when Framer’s uploader already sets the icon.
• The old icon persists. Confirm the asset response first, then follow the favicon troubleshooting checklist for cache-specific checks.
• The asset works but looks wrong. Recrop the source square and simplify fine details before converting it again.

Conclusion

The cleanest setup has one owner: the project setting. Upload a square PNG, publish, inspect the live HTML, and reserve custom code for a deliberate override. The next replacement stays predictable.