Sådan tilføjer du et favicon til din Framer-hjemmeside

Favicon.im

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) eller Ctrl + , (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

  1. Start med dit almindelige favicon
  2. Invertér farverne til den alternative version
  3. Behold samme form og design
  4. 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+R eller Ctrl+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

  1. Sørg for at faviconen er live på din side
  2. Åbn Google Search Console
  3. Brug URL-inspektionsværktøjet på forsiden
  4. Anmod om indeksering

Fejlfinding: Safari-problemer

Safari cacher favicons aggressivt.

Løsningstrin

  1. Ryd Safari-cachen fuldstændigt
  2. Slet favicon-cache: ~/Library/Safari/Favicon Cache/
  3. 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

  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- og valideringsværktøj
Check Your Favicon

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.

15M+
Monthly Favicon Requests
100%
Free Forever