Hva er et Favicon
Favoritter gjør det lettere for brukere å identifisere nettstedet ditt når de har mange faner åpne i nettleseren. Favorittikoner vises vanligvis rett før URL-en i en nettleser. Du kan også se favorittikoner på bokmerker, Google autofullføringsresultater og søkehistorikk. Her er steder der favorittikoner kan vises på forskjellige nettlesere.
Favoritter kan defineres som ikoner som brukes som en del av et nettsteds merkevarebygging. Et favorittikon kan være en merkevarelogo, en karakter eller et sett med tegn, en del av logoen, eller til og med et generisk bilde som representerer typen virksomhet eller bransje et merke befinner seg i.
I denne artikkelen undersøker vi hva som gjør at favorittikoner ikke vises, og hvordan du løser disse problemene.
Slik installerer du favorittikoner riktig
Du må installere favorittikonet ditt riktig hvis du vil at det skal gjengis riktig. Først lager du et favorittikon. Det er mange favicon generatorer som du kan bruke til dette. Deretter legger du den til på nettstedet ditt. Slik installerer du det på hovedsidene på nettstedet ditt:
- Last opp favicon.ico-filen til ønsket katalog på nettstedet ditt.
- Sett inn denne koden i -delen:
- ‘bilder’ må erstattes med katalogen der favorittikonet ditt er lagret.
- ‘favicon.ico’ må erstattes med det du har kalt ikonet ditt.
- Merk at rel-verdien også kan være ‘ikon’, ‘eple-touch-icon’ eller ‘apple-touch-icon-precomposed’
- href-verdien kan være en relativ bane (hvor du bruker filbanen der faviconet er lagret) eller en absolutt URL (hvor du bruker domenet ditt og legger til favicon-filen til URL-en som i https://abc.com/favicon .ico)
Lær mer om hvordan du legger til favorittikoner i denne artikkelen. Du kan også lese om Googles retningslinjer for favorittikoner her.
Vanlige årsaker til at favorittikonet ditt ikke vises
Du kan sjekke om favorittikonet ditt vises som det skal ved å bruke vårt revisjonsverktøy for nettstedet. Her er vanlige årsaker til at favorittikonet ditt ikke vises, og hvordan du løser problemene:
Syntaksfeil
En enkel syntaksfeil i koden du bruker til å implementere favorittikonene dine kan føre til at favorittikonet ditt ikke vises. Her er et eksempel:
Koden ovenfor har 1 enkel syntaksfeil:
- href-lenken mangler avsluttende sitater
Nettleseren din har bufret nettstedet ditt som en uten favorittikon
Når du legger til et favorittikon på nettstedet ditt, kan det hende at det ikke vises siden nettleseren din har “lagret” nettstedet ditt som et uten favorittikon. Du må tømme hurtigbufferen i nettleseren din eller bruke en annen nettleser.
Alternativt kan du legge til /favicon.ico til ditt domenenavn som på www.abc.com/favicon.ico
Feil filbane
Du må sørge for at faviconets filbane er riktig. Hvis du har ikonet ditt i bildemappen, så sørg for at filbanen din har /images/favicon.ico avhengig av hva du kalte ikonet ditt.
Hvis CSS og ikonet er søsken, ved at de er på ‘samme nivå’, så sørg for at du ikke har en skråstrek før favorittikonets filnavn, som i href skal være som følger:
href=“favicon.ico”
Nettleseren viser ikke favoritter hvis de er lokale
Nettlesere som Chrome og Safari viser ikke favorittikoner hvis de er lokale (de har ikke blitt lastet opp til en server). Chrome, for eksempel, kan bare vise favorittikonet hvis det ligger i nedlastingsmappen.
Lenken for å lage favorittikonet er ikke på rett plassering
Det er viktig å plassere lenken for å legge til favorittikonet ditt på riktig sted. Den må plasseres i overskriften på nettsiden din og ikke andre steder. Selv om den er plassert i kroppen, kan den fungere i enkelte nettlesere, men andre nettlesere som Chrome vil ikke laste den.
Favorittikonets filnavn er fortsatt standard filnavn
Noen ganger er grunnen til at favorittikonet ditt ikke vises som et resultat av at du ikke har endret filnavnet. Den enkle løsningen for dette er å gi nytt navn til favicon-filen fra standarden ‘favicon.ico’
La oss nå fokusere på hvorfor favorittikoner ikke vises på Chrome, WordPress, Shopify, Wix og Squarespace:
Årsaker til at favorittikonet ikke vises spesifikt i Chrome
Her er årsakene til at favorittikonet ditt kanskje ikke vises i Chrome:
Favicon-størrelsen er feil
Vi nevnte at Google har spesifikke retningslinjer som må følges når du legger til favorittikoner på nettstedet ditt. En av dem er at ikonstørrelsen må være i multipler av 48, og den kan ikke være 16×16. Hvis ikonstørrelsen din er 16 x 16, vil den ikke vises.
Content Management Systems (CMS) har også spesifikke størrelser som de anbefaler. WordPress anbefaler 512 x 512 og Squarespace 300 x 300. Disse CMS-ene kan endre størrelsen på favorittikonet for å passe til forskjellige scenarier. En større størrelse er nødvendig for for eksempel bokmerker, mens en mindre størrelse kan være nødvendig for mobil.
Denne artikkelen utforsker de forskjellige favicon-størrelsene, hvor de passer best, og til og med de utdaterte størrelsene.
Å ha Favicon-filen i rotkatalogen, men ikke legge til koblingen som ‘importerer’ den
Bare fordi favicon-filen er i rotkatalogen din, betyr det ikke at den automatisk lastes opp når nettstedet ditt lastes inn. Sørg for at du har disse koblingene i overskriften:
Dette er hva som vil importere favorittikonet til nettstedet ditt.
Grunner til at favorittikonet ikke vises spesifikt i Shopify
Her er årsakene til at favorittikonet ditt kanskje ikke vises i Shopify:
Linken for å importere favorittikonet er på feil plassering
Hvor du plasserer linken er viktig. Pass på at den er i
-delen, og ikke.
Se hvordan du lager et favorittikon til din online Shopify-butikk
Grunner til at favorittikonet ikke vises spesifikt i WordPress
Her er grunnene til at favorittikonet ditt kanskje ikke vises i WordPress:
I Customizer er nettstedsikonet ment for AMP-faviconet
Hvis du bruker Customizer til å laste opp et egendefinert favorittikon, kan det hende at det ikke fungerer da dette er ment for sider som bruker AMP. For å fikse dette problemet, må du først fjerne favorittikonet du lastet opp ved hjelp av Customizer. Du må da installere en plugin kalt ‘Favicon av RealFavicon Generator‘. Dette pluginet lar deg laste opp bildet du foretrekker å bruke som favorittikonet ditt. Det må være i png- eller jpg-format. Programtillegget vil hjelpe deg med å konvertere det til .ico.
Det kan være en plugin som legger til kroppselementer i hodet/hodet ditt
Du må sørge for at du ikke har en plugin som lager kroppselementer i
-delen. Gå gjennom hodeseksjonen din, og hvis du ser kode som tilhører kroppsdelen, sjekk etter pluginene du hadde installert da du la til favorittikonet ditt på WordPress-nettstedet ditt. Gå videre og deaktiver eller til og med avinstaller den.Du har ikke spesifisert bildetype hvis det ikke er .ico
Hvis ikonet ditt er i .png-format, må du redigere lenken du bruker for å laste opp favorittikonet for å inkludere typen som følger:
Du må også legge til .ico-filen til nettstedets rot.
Lær hvordan du legger til favicon på et WordPress-nettsted.
Grunner til at Favicon ikke vises spesifikt på Squarespace
Her er grunnene til at favorittikonet ditt kanskje ikke vises i Squarespace:
Den hurtigbufrede versjonen er ennå ikke ugyldig
Malkoden i
-delen bruker alltid ‘favicon.ico’ som filnavn. Dette er den hurtigbufrede versjonen. For å ugyldiggjøre den, endre filnavnet.Du er fortsatt logget på CMS
Hvis du fortsatt er logget på CMS, kan det fortsatt vises Squarespaces standardikon. Du må logge ut av CMS for å se ditt egendefinerte favorittikon.
Konklusjon
Favoritter er nyttige for å hjelpe med merkevarekonsistens. De gjør nettstedet ditt lett identifiserbart der brukeren må identifisere flere nettsteder på et øyeblikk, for eksempel når mange faner er åpne. De er flotte for tilbakevendende besøkende og kunder. Når brukeren bokmerker nettstedet ditt, gjør favorittikoner det lett identifiserbart.
Implementering av favorittikoner går kanskje ikke alltid problemfritt, og vi har sett på vanlige årsaker til at favorittikoner ikke dukker opp. Vi har til og med utforsket problemer som kan oppstå ved bruk av bestemte innholdsstyringssystemer – CMS-er – som WordPress, Shopify eller SquareSpace. Som du kanskje har lagt merke til, er de fleste problemene enkle nok, og du kan fikse dem. Ikke nøl med å be om profesjonell hjelp der det er nødvendig.
