---
title: Framer Favicon Install Guide
description: Set a custom favicon on a Framer site: upload it in site settings, publish to every domain, and add head code for Apple touch and manifest icons.
canonical: https://favicontools.com/framer/favicon-install
---

# Framer Favicon Install Guide

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.

## Why it matters

- **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.

## Playbook

1. **Export 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.
2. **Upload 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.
3. **Publish 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

- 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.

## 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.