How to Change Favicon in Framer: 1-Min Guide

How to Change Favicon in Framer

Updated on:

June 5, 2026

By:

Use this interactive demo to learn how to update your favicon inside Framer project settings.

Quick summary

Changing a favicon in Framer takes just a few clicks inside your project settings. Navigate to Site Images, upload your custom favicon file, and it will be ready for integration immediately.

Steps

Open your Framer project from the dashboard.
Click 'Open Settings' to access your project's design settings.
Scroll down to 'Site Images' and locate the Favicon section.
Click 'Upload' to import your custom favicon image file.
Preview your updated design in the canvas workspace.
Confirm the image upload is complete — your favicon is now ready for integration.

📌 Why this matters

Setting a custom favicon in Framer is a small but critical step for establishing professional brand identity on the web. A site-specific favicon improves recognition in browser tabs, bookmarks, and search results, directly supporting SEO and user trust. Framer's built-in Site Images settings make it easy to upload and apply a favicon without leaving the design environment, streamlining the workflow for designers and developers alike. For anyone building or launching a website in Framer, correctly configuring the favicon ensures a polished, cohesive brand presence from day one.

Your product deserves an interactive demo

Start free

How to Add Adobe Fonts to Framer

Framer CRM Integration

How to Link to Section in Framer