Hur du lägger till en favicon på din Framer-webbplats

För att lägga till en favicon i Framer: Öppna Webbplatsinställningar (⌘ + ,), scrolla ned till "Site Images" → "Favicon", ladda upp en 64x64 PNG-fil och publicera din webbplats. Klart.

Låt oss nu gå igenom detaljerna och felsöka eventuella problem du kan stöta på.

Favicon-specifikationer för Framer

Framer kräver specifika favicon-specifikationer:

• Storlek: 64 x 64 pixlar
• Format: PNG (rekommenderat)
• Bakgrund: Transparent

Steg 1: Öppna webbplatsinställningar

Två sätt att komma åt inställningarna:

• Tangentbord: Tryck ⌘ + , (Mac) eller Ctrl + , (Windows)
• Meny: Klicka på Framer-ikonen → Site Settings → Open Settings

Steg 2: Hitta favicon-sektionen

• Scrolla ned till "Site Images"
• Hitta uppladdningsområdet för "Favicon"

Steg 3: Ladda upp din favicon

Framer erbjuder två uppladdningsplatser:

• Light Theme Favicon: Visas i webbläsare med ljust läge
• Dark Theme Favicon: Visas i webbläsare med mörkt läge

Ladda upp samma bild till båda platserna om du bara har en version.

Steg 4: Publicera din webbplats

• Klicka på Publish-knappen
• Faviconen visas bara på den publicerade webbplatsen, inte i förhandsgranskningen

Stöd för ljust och mörkt läge

Varför använda två versioner?

• Mörka logotyper försvinner på mörka webbläsarflikar
• Ljusa logotyper försvinner på ljusa webbläsarflikar
• Separata versioner säkerställer synlighet i alla lägen

Hur du skapar versioner

1. Börja med din vanliga favicon
2. Invertera färgerna för den alternativa versionen
3. Behåll samma form och design
4. Använd transparenta bakgrunder för båda

Inställning av Apple Touch Icon

Sedan september 2024 stöder Framer Apple touch-ikoner:

• Plats: Samma Site Images-sektion
• Storlek: 180 x 180 pixlar
• Syfte: Hemskärmsikon på iOS-enheter

Felsökning: Faviconen visas inte

Kontrollera grunderna

• Har du publicerat webbplatsen?
• Tvinga omladdning: Cmd+Shift+R eller Ctrl+Shift+R
• Prova inkognitofönster

Verifiera uppladdningsplatsen

• Måste vara i Site Settings, inte sidinställningar
• Filen måste vara i giltigt PNG-format

Felsökning: Google visar gammal favicon

Google uppdaterar favicons långsamt (dagar till veckor).

Steg för att påskynda

1. Se till att faviconen är live på din webbplats
2. Öppna Google Search Console
3. Använd URL Inspection-verktyget på startsidan
4. Begär indexering

Felsökning: Safari-problem

Safari cachar favicons aggressivt.

Lösningssteg

1. Rensa Safari-cachen helt
2. Ta bort favicon-cachen: ~/Library/Safari/Favicon Cache/
3. Stäng och öppna Safari igen

Felsökning: Framers logotyp visas fortfarande

Vanliga orsaker:

• Webbplatsen inte publicerad efter favicon-uppladdning
• Webbläsarcache-problem
• Du tittar på förhandsgranskningen istället för den publicerade webbplatsen

Lösning: Publicera webbplatsen och rensa webbläsarens cache.

Bästa praxis

• Säkerhetskopiera filer: Spara originalfilerna för din favicon
• Testa överallt: Kontrollera på Mac, Windows, iOS, Android
• Använd testverktyg: Favicon.im validerar din konfiguration
• Dokumentera färger: Spara exakta hexkoder för varumärkeskonsekvens

Vanliga frågor

Hur lägger jag till en favicon i Framer?

Öppna Webbplatsinställningar med ⌘ + ,, scrolla ned till "Site Images", klicka på "Favicon", ladda upp en 64x64 PNG-fil och publicera din webbplats.

Vilken storlek ska en Framer-favicon vara?

Framer rekommenderar 64 x 64 pixlar i PNG-format med transparent bakgrund.

Varför visas inte min Framer-favicon?

Vanligaste orsakerna: webbplatsen inte publicerad, webbläsarcache eller fel uppladdningsplats. Publicera din webbplats, tvinga omladdning av sidan eller prova ett inkognitofönster.

Hur lång tid tar det för Google att uppdatera en favicon?

Google uppdaterar favicons långsamt — vanligtvis dagar till veckor. Begär omindexering via Google Search Console för att påskynda processen.

Stöder Framer favicons för mörkt läge?

Ja. Sedan september 2024 låter Framer dig ladda upp separata favicons för ljusa och mörka teman i Site Images-inställningarna.

Referenser

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 - Verktyg för att testa och validera favicons