Sådan tilføjer du et favicon til din Framer-hjemmeside
For at tilføje et favicon i Framer: Åbn Site Settings (⌘ + ,), rul ned til "Site Images" → "Favicon", upload en 64x64 PNG-fil, og publicer derefter din side. Det er det hele.
Lad os nu gennemgå detaljerne og fejlfinde eventuelle problemer, du måtte støde på.
Favicon-specifikationer for Framer
Framer kræver specifikke favicon-specifikationer:
- Størrelse: 64 x 64 pixels
- Format: PNG (anbefalet)
- Baggrund: Gennemsigtig
Trin 1: Åbn Site Settings
To måder at tilgå indstillingerne:
- Tastaturgenvej: Tryk
⌘ + ,(Mac) ellerCtrl + ,(Windows) - Menu: Klik på Framer-ikonet → Site Settings → Open Settings
Trin 2: Find favicon-sektionen
- Rul ned til "Site Images"
- Find uploadområdet "Favicon"
Trin 3: Upload dit favicon
Framer giver to upload-pladser:
- Light Theme Favicon: Vises i browsere med lys tilstand
- Dark Theme Favicon: Vises i browsere med mørk tilstand
Upload det samme billede til begge pladser, hvis du kun har én version.
Trin 4: Publicer din side
- Klik på Publish-knappen
- Faviconen vises kun på den live side, ikke i forhåndsvisningen
Understøttelse af lys og mørk tilstand
Hvorfor bruge to versioner?
- Mørke logoer forsvinder på mørke browserfaner
- Lyse logoer forsvinder på lyse browserfaner
- Separate versioner sikrer synlighed i alle tilstande
Sådan opretter du versioner
- Start med dit almindelige favicon
- Invertér farverne til den alternative version
- Behold samme form og design
- Brug gennemsigtig baggrund til begge
Opsætning af Apple Touch-ikon
Siden september 2024 understøtter Framer Apple touch-ikoner:
- Placering: Samme Site Images-sektion
- Størrelse: 180 x 180 pixels
- Formål: Startskærmsikon på iOS-enheder
Fejlfinding: Favicon vises ikke
Tjek det grundlæggende
- Har du publiceret siden?
- Hård genindlæsning:
Cmd+Shift+RellerCtrl+Shift+R - Prøv inkognitovindue
Bekræft uploadplacering
- Skal være i Site Settings, ikke sideindstillinger
- Filen skal være i gyldigt PNG-format
Fejlfinding: Google viser gammelt favicon
Google opdaterer favicons langsomt (dage til uger).
Trin til at fremskynde processen
- Sørg for at faviconen er live på din side
- Åbn Google Search Console
- Brug URL-inspektionsværktøjet på forsiden
- Anmod om indeksering
Fejlfinding: Safari-problemer
Safari cacher favicons aggressivt.
Løsningstrin
- Ryd Safari-cachen fuldstændigt
- Slet favicon-cache:
~/Library/Safari/Favicon Cache/ - Luk og genåbn Safari
Fejlfinding: Framer-logoet vises stadig
Almindelige årsager:
- Siden er ikke publiceret efter favicon-upload
- Problem med browsercache
- Du ser forhåndsvisningen i stedet for den live side
Løsning: Publicer siden og ryd browsercachen.
Bedste praksis
- Sikkerhedskopiér filer: Gem de originale favicon-filer
- Test overalt: Tjek Mac, Windows, iOS, Android
- Brug tjekværktøjer: Favicon.im validerer din opsætning
- Dokumentér farver: Hold styr på de præcise hex-koder for brandkonsistens
FAQ
Hvordan tilføjer jeg et favicon i Framer?
Åbn Site Settings med ⌘ + ,, rul ned til "Site Images", klik på "Favicon", upload en 64x64 PNG-fil, og publicer derefter din side.
Hvilken størrelse skal et Framer-favicon have?
Framer anbefaler 64 x 64 pixels i PNG-format med gennemsigtig baggrund.
Hvorfor vises mit Framer-favicon ikke?
De mest almindelige årsager: siden er ikke publiceret, browsercache eller forkert uploadplacering. Publicer din side, lav en hård genindlæsning af siden, eller prøv et inkognitovindue.
Hvor lang tid tager det Google at opdatere et favicon?
Google opdaterer favicons langsomt — normalt dage til uger. Anmod om genindeksering via Google Search Console for at fremskynde processen.
Understøtter Framer mørk tilstand-favicons?
Ja. Siden september 2024 lader Framer dig uploade separate favicons til lys og mørk tema i Site Images-indstillingerne.
Referencer
- How to set up a favicon in Framer - Framer Official Help
- September 2024 Update: Apple Touch Icon and Favicons - Framer Updates
- Why isn't Safari displaying the favicon? - Framer Troubleshooting
- Favicon.im - Favicon-test- og valideringsværktøj
Use favicon.im to quickly check if your favicon is configured correctly. Our free tool ensures your website's favicon displays properly across all browsers and devices.
Free Public Service
Favicon.im is a completely free public service trusted by developers worldwide.