How to Add a Favicon to Your Framer Website

To add a favicon in Framer: Open Site Settings (⌘ + ,), scroll to "Site Images" → "Favicon", upload a 64x64 PNG file, then publish your site. That's it.

Now let's cover the details and troubleshoot any issues you might run into.

Favicon Specs for Framer

Framer requires specific favicon specifications:

• Size: 64 x 64 pixels
• Format: PNG (recommended)
• Background: Transparent

Step 1: Open Site Settings

Two ways to access settings:

• Keyboard: Press ⌘ + , (Mac) or Ctrl + , (Windows)
• Menu: Click Framer icon → Site Settings → Open Settings

Step 2: Find Favicon Section

• Scroll down to "Site Images"
• Locate the "Favicon" upload area

Step 3: Upload Your Favicon

Framer provides two upload slots:

• Light Theme Favicon: Displays in light mode browsers
• Dark Theme Favicon: Displays in dark mode browsers

Upload the same image to both slots if you only have one version.

Step 4: Publish Your Site

• Click the Publish button
• Favicon only appears on the live site, not in preview

Light and Dark Mode Support

Why Use Two Versions?

• Dark logos disappear on dark browser tabs
• Light logos disappear on light browser tabs
• Separate versions ensure visibility in all modes

How to Create Versions

1. Start with your regular favicon
2. Invert colors for the alternate version
3. Keep the same shape and design
4. Use transparent backgrounds for both

Apple Touch Icon Setup

Since September 2024, Framer supports Apple touch icons:

• Location: Same Site Images section
• Size: 180 x 180 pixels
• Purpose: Home screen icon on iOS devices

Troubleshooting: Favicon Not Showing

Check the Basics

• Did you publish the site?
• Hard refresh: Cmd+Shift+R or Ctrl+Shift+R
• Try incognito window

Verify Upload Location

• Must be in Site Settings, not page settings
• File must be valid PNG format

Troubleshooting: Google Shows Old Favicon

Google updates favicons slowly (days to weeks).

Steps to Speed Up

1. Ensure favicon is live on your site
2. Open Google Search Console
3. Use URL Inspection tool on homepage
4. Request indexing

Troubleshooting: Safari Issues

Safari caches favicons aggressively.

Fix Steps

1. Clear Safari cache completely
2. Delete favicon cache: ~/Library/Safari/Favicon Cache/
3. Quit and reopen Safari

Troubleshooting: Framer Logo Still Appears

Common causes:

• Site not published after favicon upload
• Browser cache issue
• Viewing preview instead of live site

Solution: Publish site and clear browser cache.

Best Practices

• Backup files: Keep original favicon files saved
• Test everywhere: Check Mac, Windows, iOS, Android
• Use checkers: Favicon.im validates your setup
• Document colors: Track exact hex codes for brand consistency

FAQ

How do I add a favicon in Framer?

Open Site Settings with ⌘ + ,, scroll to "Site Images", click on "Favicon", upload a 64x64 PNG file, then publish your site.

What size should a Framer favicon be?

Framer recommends 64 x 64 pixels in PNG format with a transparent background.

Why isn't my Framer favicon showing up?

Most common reasons: site not published, browser cache, or wrong upload location. Publish your site, hard refresh the page, or try an incognito window.

How long does Google take to update a favicon?

Google updates favicons slowly—usually days to weeks. Request reindexing through Google Search Console to speed up the process.

Does Framer support dark mode favicons?

Yes. Since September 2024, Framer lets you upload separate favicons for light and dark themes in the Site Images settings.

References

1. How to set up a favicon in Framer - Framer Official Help
2. September 2024 Update: Apple Touch Icon and Favicons - Framer Updates
3. Why isn't Safari displaying the favicon? - Framer Troubleshooting
4. Favicon.im - Favicon testing and validation tool