Hoe voeg je een favicon toe aan je Framer-website

Om een favicon toe te voegen in Framer: Open Site Settings (⌘ + ,), scroll naar "Site Images" → "Favicon", upload een 64x64 PNG-bestand en publiceer je site. Dat is alles.

Laten we nu de details doornemen en eventuele problemen oplossen die je kunt tegenkomen.

Favicon-specificaties voor Framer

Framer vereist specifieke favicon-specificaties:

• Formaat: 64 x 64 pixels
• Bestandstype: PNG (aanbevolen)
• Achtergrond: Transparant

Stap 1: Open Site Settings

Twee manieren om de instellingen te openen:

• Sneltoets: Druk op ⌘ + , (Mac) of Ctrl + , (Windows)
• Menu: Klik op het Framer-icoon → Site Settings → Open Settings

Stap 2: Zoek de Favicon-sectie

• Scroll naar beneden naar "Site Images"
• Zoek het "Favicon"-uploadgebied

Stap 3: Upload je favicon

Framer biedt twee uploadslots:

• Light Theme Favicon: Wordt weergegeven in browsers met lichte modus
• Dark Theme Favicon: Wordt weergegeven in browsers met donkere modus

Upload dezelfde afbeelding in beide slots als je maar één versie hebt.

Stap 4: Publiceer je site

• Klik op de Publish-knop
• De favicon verschijnt alleen op de live site, niet in de preview

Ondersteuning voor lichte en donkere modus

Waarom twee versies gebruiken?

• Donkere logo's verdwijnen op donkere browsertabs
• Lichte logo's verdwijnen op lichte browsertabs
• Aparte versies zorgen voor zichtbaarheid in alle modi

Versies aanmaken

1. Begin met je gewone favicon
2. Keer de kleuren om voor de alternatieve versie
3. Behoud dezelfde vorm en ontwerp
4. Gebruik transparante achtergronden voor beide

Apple Touch Icon instellen

Sinds september 2024 ondersteunt Framer Apple touch icons:

• Locatie: Dezelfde Site Images-sectie
• Formaat: 180 x 180 pixels
• Doel: Startscherm-icoon op iOS-apparaten

Probleemoplossing: Favicon wordt niet weergegeven

Controleer de basis

• Heb je de site gepubliceerd?
• Forceer verversing: Cmd+Shift+R of Ctrl+Shift+R
• Probeer een incognitovenster

Controleer de uploadlocatie

• Moet in Site Settings staan, niet in pagina-instellingen
• Bestand moet een geldig PNG-formaat zijn

Probleemoplossing: Google toont een oud favicon

Google werkt favicons langzaam bij (dagen tot weken).

Stappen om het te versnellen

1. Zorg ervoor dat de favicon live staat op je site
2. Open Google Search Console
3. Gebruik de URL-inspectietool op je homepage
4. Vraag indexering aan

Probleemoplossing: Safari-problemen

Safari cachet favicons agressief.

Oplossingsstappen

1. Wis de Safari-cache volledig
2. Verwijder de favicon-cache: ~/Library/Safari/Favicon Cache/
3. Sluit Safari af en open het opnieuw

Probleemoplossing: Framer-logo verschijnt nog steeds

Veelvoorkomende oorzaken:

• Site niet gepubliceerd na favicon-upload
• Browsercache-probleem
• Je bekijkt de preview in plaats van de live site

Oplossing: Publiceer de site en wis de browsercache.

Best practices

• Maak back-ups: Bewaar de originele favicon-bestanden
• Test overal: Controleer op Mac, Windows, iOS, Android
• Gebruik checkers: Favicon.im valideert je setup
• Documenteer kleuren: Houd exacte hex-codes bij voor merkconsistentie

Veelgestelde vragen

Hoe voeg ik een favicon toe in Framer?

Open Site Settings met ⌘ + ,, scroll naar "Site Images", klik op "Favicon", upload een 64x64 PNG-bestand en publiceer je site.

Welk formaat moet een Framer-favicon zijn?

Framer raadt 64 x 64 pixels aan in PNG-formaat met een transparante achtergrond.

Waarom wordt mijn Framer-favicon niet weergegeven?

Meest voorkomende redenen: site niet gepubliceerd, browsercache of verkeerde uploadlocatie. Publiceer je site, forceer een verversing van de pagina of probeer een incognitovenster.

Hoe lang duurt het voordat Google een favicon bijwerkt?

Google werkt favicons langzaam bij — meestal dagen tot weken. Vraag herindexering aan via Google Search Console om het proces te versnellen.

Ondersteunt Framer donkere modus-favicons?

Ja. Sinds september 2024 kun je in Framer aparte favicons uploaden voor lichte en donkere thema's in de Site Images-instellingen.

Referenties

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 test- en validatietool