Slik legger du til et favicon på Framer-nettstedet ditt

For å legge til et favicon i Framer: Åpne Site Settings (⌘ + ,), bla ned til «Site Images» → «Favicon», last opp en 64x64 PNG-fil, og publiser nettstedet ditt. Det er alt.

La oss nå gå gjennom detaljene og feilsøke eventuelle problemer du kan støte på.

Favicon-spesifikasjoner for Framer

Framer krever spesifikke favicon-spesifikasjoner:

• Størrelse: 64 x 64 piksler
• Format: PNG (anbefalt)
• Bakgrunn: Gjennomsiktig

Steg 1: Åpne Site Settings

To måter å få tilgang til innstillingene:

• Tastatur: Trykk ⌘ + , (Mac) eller Ctrl + , (Windows)
• Meny: Klikk Framer-ikonet → Site Settings → Open Settings

Steg 2: Finn favicon-seksjonen

• Bla ned til «Site Images»
• Finn «Favicon»-opplastingsområdet

Steg 3: Last opp faviconet ditt

Framer gir deg to opplastingsplasser:

• Light Theme Favicon: Vises i nettlesere med lys modus
• Dark Theme Favicon: Vises i nettlesere med mørk modus

Last opp det samme bildet til begge plassene hvis du bare har én versjon.

Steg 4: Publiser nettstedet ditt

• Klikk Publish-knappen
• Faviconet vises kun på det publiserte nettstedet, ikke i forhåndsvisningen

Støtte for lys og mørk modus

Hvorfor bruke to versjoner?

• Mørke logoer forsvinner på mørke nettleserfaner
• Lyse logoer forsvinner på lyse nettleserfaner
• Separate versjoner sikrer synlighet i alle moduser

Slik lager du versjoner

1. Start med det vanlige faviconet ditt
2. Inverter fargene for den alternative versjonen
3. Behold samme form og design
4. Bruk gjennomsiktig bakgrunn for begge

Oppsett av Apple Touch-ikon

Siden september 2024 støtter Framer Apple touch-ikoner:

• Plassering: Samme Site Images-seksjon
• Størrelse: 180 x 180 piksler
• Formål: Hjemmeskjerm-ikon på iOS-enheter

Feilsøking: Favicon vises ikke

Sjekk det grunnleggende

• Har du publisert nettstedet?
• Hard refresh: Cmd+Shift+R eller Ctrl+Shift+R
• Prøv inkognitovindu

Verifiser opplastingsplassering

• Må være i Site Settings, ikke sideinnstillinger
• Filen må være gyldig PNG-format

Feilsøking: Google viser gammelt favicon

Google oppdaterer favicons langsomt (dager til uker).

Steg for å få det raskere

1. Sørg for at faviconet er aktivt på nettstedet ditt
2. Åpne Google Search Console
3. Bruk URL Inspection-verktøyet på forsiden
4. Be om indeksering

Feilsøking: Safari-problemer

Safari mellomlagrer favicons aggressivt.

Løsningssteg

1. Tøm Safari-bufferen fullstendig
2. Slett favicon-buffer: ~/Library/Safari/Favicon Cache/
3. Avslutt og åpne Safari på nytt

Feilsøking: Framer-logoen vises fortsatt

Vanlige årsaker:

• Nettstedet er ikke publisert etter favicon-opplasting
• Nettleserbuffer-problem
• Du ser på forhåndsvisningen i stedet for det publiserte nettstedet

Løsning: Publiser nettstedet og tøm nettleserbufferen.

Beste praksis

• Sikkerhetskopier filer: Behold de originale favicon-filene lagret
• Test overalt: Sjekk Mac, Windows, iOS, Android
• Bruk testverktøy: Favicon.im validerer oppsettet ditt
• Dokumenter farger: Hold oversikt over eksakte heksadesimale fargekoder for merkevare-konsistens

Ofte stilte spørsmål

Hvordan legger jeg til et favicon i Framer?

Åpne Site Settings med ⌘ + ,, bla ned til «Site Images», klikk på «Favicon», last opp en 64x64 PNG-fil, og publiser nettstedet ditt.

Hvilken størrelse bør et Framer-favicon ha?

Framer anbefaler 64 x 64 piksler i PNG-format med gjennomsiktig bakgrunn.

Hvorfor vises ikke Framer-faviconet mitt?

Vanligste årsaker: nettstedet er ikke publisert, nettleserbuffer, eller feil opplastingssted. Publiser nettstedet, gjør en hard refresh av siden, eller prøv et inkognitovindu.

Hvor lang tid tar det før Google oppdaterer et favicon?

Google oppdaterer favicons langsomt — vanligvis dager til uker. Be om reindeksering gjennom Google Search Console for å fremskynde prosessen.

Støtter Framer favicons for mørk modus?

Ja. Siden september 2024 lar Framer deg laste opp separate favicons for lyst og mørkt tema i Site Images-innstillingene.

Referanser

1. How to set up a favicon in Framer - Framer offisiell hjelp
2. September 2024 Update: Apple Touch Icon and Favicons - Framer-oppdateringer
3. Why isn't Safari displaying the favicon? - Framer feilsøking
4. Favicon.im - Favicon-testing og valideringsverktøy