Slik lager du et favikon
Størrelsene, formatene og koden du trenger for et favikon som vises overalt.
Favikonet er det lille ikonet i en nettleserfane, i bokmerker og ved siden av nettstedet ditt i Googles søkeresultater på mobil. Et manglende favikon får et nettsted til å se uferdig ut, og et uskarpt et ser enda verre ut. Det tar bare noen minutter å lage et godt et.
Start med riktig grafikk
Et favikon vises så lite som 16 ganger 16 piksler, så en hel logo med ordmerke blir uleselig. Bruk et enkelt merke: symbolet fra logoen din, én forbokstav eller en kraftig form i merkevarefargen din. Test det ved å krympe det til en firedel av størrelsen på skjermen. Ser du fortsatt hva det er, vil det fungere.
Start med et kvadratisk bilde på minst 512 ganger 512 piksler, helst en PNG med gjennomsiktig bakgrunn. Er logoen din ikke kvadratisk, beskjærer du den til et kvadrat med sideforholdet låst til 1:1.
Filene du trenger
| Fil | Størrelse | Brukes av |
|---|---|---|
| favicon.ico | Inneholder versjoner på 16, 32 og 48 piksler | Nettlesere, eldre systemer, standardforespørselen etter /favicon.ico |
| Et PNG-ikon | 32 ganger 32 og 192 ganger 192 | Moderne nettlesere, startskjermer på Android |
| apple-touch-icon.png | 180 ganger 180 | Bokmerker på startskjermen på iPhone og iPad |
Google Søk bruker også favikonet ditt i resultatene. Det må være kvadratisk, minst 48 ganger 48 piksler, og må kunne gjennomsøkes på nettstedet ditt.
Lage ICO-filen
Slipp den kvadratiske PNG-filen inn i PNG til ICO-konvertereren. Den lager en ekte .ico-fil som inneholder de små størrelsene nettlesere ber om. For PNG-versjonene endrer du størrelsen på det samme kvadratiske bildet til 180, 192 og 32 piksler.
Legge det til på nettstedet
Last opp favicon.ico til rotmappen på nettstedet ditt, slik at den kan nås på dittnettsted.no/favicon.ico, og legg til disse linjene inne i head på sidene dine:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/no/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/no/apple-touch-icon.png">
I WordPress går du til Utseende, Tilpass, Nettstedsidentitet og laster opp et kvadratisk bilde som nettstedsikon. WordPress lager størrelsene for deg. Shopify, Wix og Squarespace har alle en innstilling for favikon i innstillingene for nettstedet eller temaet.
Når det nye favikonet ikke vises
Nettlesere holder hardnakket på favikoner i hurtigbufferen. Åpne nettstedet i et privat vindu, eller gå direkte til dittnettsted.no/favicon.ico og last inn siden på nytt. Det kan ta dager eller uker før Google oppdaterer ikonet i søkeresultatene, etter at forsiden din er gjennomsøkt på nytt.
Vanlige feil
- Å bruke hele logoen med liten tekst, som blir til en flekk på 16 piksler.
- Et hvitt ikon på gjennomsiktig bakgrunn, som forsvinner på lyse nettleserfaner.
- Å bare levere en bitteliten fil på 16 piksler, som ser uskarp ut på skjermer med høy oppløsning.
- Å glemme filen på /favicon.ico, som enkelte nettlesere og søkeroboter ber om uansett hva siden sier.