1. Last opp bilde
Dra og slipp filen i det markerte området, eller velg den fra enheten din. Et kvadratisk bilde fungerer best.
Lag favicon.ico for nettsiden din fra ett enkelt bilde
Last opp et bilde, og verktøyet genererer favicon.ico og et komplett sett med PNG-ikoner for nettlesere, mobile enheter og Lighthouse.
ANNONSE
ANNONSE
Loading tool editor...
Dette verktøyet fungerer på en større skjerm
For å bruke dette verktøyet komfortabelt, åpne det på en bærbar datamaskin, stasjonær datamaskin eller nettbrett i liggende modus.
Tips
Hvis du bruker et nettbrett, bytt til liggende modus - når vindusbredden er tilstrekkelig, lastes verktøyet automatisk.
Hva er et favicon, og hvorfor er det viktig?
Et favicon er et lite ikon som vises i nettleserfanen, i bokmerkelisten og på telefonens startskjerm. Det er et av de første elementene brukeren ser – allerede før siden er helt lastet inn.
Et profesjonelt favicon bygger merkevaregjenkjenning og gjør det lettere for brukeren å finne siden din blant mange åpne faner. Mangel på favicon kan gi et uprofesjonelt inntrykk og redusere besøkendes tillit.
Slik bruker du favicon-generatoren
Å generere favicon tar bare noen minutter:
2. Beskjær og juster
Juster beskjæringsområdet for å velge den passende delen av bildet. Se hvordan det ser ut i forskjellige størrelser.3. Last ned ikoner
Last ned favicon.ico og det komplette settet med PNG-ikoner i en ZIP-fil. Alle ikoner er klare til bruk.
Hvilke ikoner lager generatoren?
Hver størrelse har sitt bruksområde:
favicon.ico (32×32)
Klassisk format som gjenkjennes av alle nettlesere. Vises i nettleserfanen.
16×16 og 32×32 PNG
Standardstørrelser for moderne nettlesere. Vises i faner og bokmerker.
180×180 PNG (apple-touch-icon)
Ikon for Apple-enheter (iPhone, iPad). Vises når noen legger til siden på startskjermen.
192×192 og 512×512 PNG
Ikoner for webapper (PWA). Kreves av manifestet og brukes i appbutikker.
Hvis du ikke bygger en PWA, holder det med: favicon.ico, 32×32 PNG og 180×180 PNG. Disse tre filene dekker de fleste brukstilfeller.
Hva gjør denne favicon-generatoren spesiell?
Lokal behandling i nettleseren
Bildet lastes ikke opp til noen server. All behandling skjer på enheten din.Oppfyller Lighthouse-krav
Genererte ikoner oppfyller Google Lighthouse-kravene til størrelse og format.Ikoner for alle enheter
Ett sett med filer dekker alle nettlesere, iOS, Android og Windows.Uten begrensninger, uten registrering
Generer så mange faviconer du trenger. Uten registrering, uten gebyrer.
Hvordan bruke favicon-generatoren?
Generatoren guider deg gjennom hele prosessen steg for steg:
1. Legg til kildebilde
Dra en fil til det markerte feltet, eller velg et bilde fra datamaskinen.
Støttede formater: PNG, JPG, SVG. En enkel logo eller et ikon på minst 512×512 piksler fungerer best.
2. Velg ikonstørrelser
Kryss av for ikonstørrelsene du trenger.
Du kan velge alle eller bare noen. For en vanlig nettside holder det med: favicon.ico, 32×32 og 180×180.
3. Still inn genereringsalternativer
Still inn tilleggsalternativer:
- Bakgrunn – gjennomsiktig eller valgt farge
- Manifest – konfigurasjonsfil for PWA
- Automatisk nedlasting – filer lastes ned umiddelbart etter generering
4. Generer og last ned filer
Etter generering behandler verktøyet bildet lokalt – ingenting sendes til en server.
Last ned alle filer som ZIP-arkiv, eller last ned enkeltikoner separat.
PNG-størrelser
16x1632x32180x180
Gjennomsiktig bakgrunn (PNG/ICO)
Bakgrunnsfarge:
Genereringsalternativer – hva gjør hvert av dem?
Bakgrunn (gjennomsiktig eller farge)
Som standard bevarer generatoren gjennomsiktighet. Du kan også velge en bestemt bakgrunnsfarge.
Generer manifest (site.webmanifest)
En JSON-konfigurasjonsfil for webapper (PWA). Hvis du ikke lager en PWA, er dette alternativet ikke nødvendig.
ANNONSE
Hvordan laste ned de genererte filene?
Etter generering av ikoner har du flere nedlastingsalternativer:
Last ned alt som ZIP
Knappen Last ned alt pakker alle genererte filer i ett ZIP-arkiv. Det er det mest praktiske alternativet når du trenger det komplette ikonsettet.Last ned enkeltfiler
Hvert generert ikon har sin egen nedlastingsknapp – du kan laste ned en enkelt fil uten å laste ned hele settet. Nyttig ved oppdatering av kun én størrelse.
Hvor og hvordan laste opp favicon?
WordPress
De fleste WordPress-temaer har en innebygd mulighet for å angi nettstedsikonet. Du finner det i administrasjonspanelet:
Utseende → Tilpass → Nettstedsidentitet → Nettstedsikon
Last opp 512×512-filen – WordPress genererer automatisk mindre størrelser. For full kontroll kan du også laste opp filene direkte til rotmappen via FTP.
Hvilket kildebilde fungerer best?
Favicon er en veldig liten grafikk – ned til 16×16 piksler. Derfor er ikke alle bilder egnet som kilde:
Enkle former og lesbare symboler
Enkle logoer, enkeltbokstaver eller symboler fungerer best. Unngå kompleks grafikk med mange detaljer.Kvadratisk format
Favicon er kvadratisk. Hvis kildebildet har andre proporsjoner enn 1:1, vil det bli beskåret eller strukket.Tilstrekkelig størrelse
Vi anbefaler et kildebilde på minst 512×512 piksler. Mindre bilder vil bli oppskalert.SVG som ideell kilde
SVG skalerer uten kvalitetstap, slik at ikoner blir skarpe i alle størrelser.
Favicon i Googles søkeresultater
Google viser favicons ved siden av nettstedets URL i søkeresultatene. Mobile søkeresultater har vist favicons siden 2019. Skrivebordsresultater fulgte i januar 2020. Favicon er dermed et synlig merkevarelement i hvert Google-søk.
Google stiller spesifikke krav til visning av favicons. Ikonet må være minst 48×48 piksler. Det må være kvadratisk. Bildet må være tydelig synlig på hvit bakgrunn. Google avviser ikoner med upassende eller tomt innhold.
Googlebot crawler og indekserer favicons uavhengig av sideinnholdet. Oppdatering av favicon i søkeresultatene kan ta flere dager til uker. Favicon-filen må ikke være blokkert i robots.txt - ellers kan Google ikke hente den nye versjonen.
Bing viser også favicons i sine søkeresultater. DuckDuckGo viser nettstedikoner ved siden av hver resultatlenke. Et komplett sett med favicons sikrer et enhetlig merkevareutseende i alle store søkemotorer. Brukere gjenkjenner kjente favicons raskere, noe som bidrar til høyere klikkfrekvens.
Favicon og merkevareidentitet i Norge
Norsk designtradisjon verdsetter renhet og funksjonalitet. Et rent og enkelt favicon gjenspeiler disse verdiene og styrker gjenkjennelsen i nettleserfaner, bokmerker og på mobilens startskjerm. Når en bruker har ti eller flere faner åpne, forblir favicon det eneste synlige elementet som identifiserer nettstedet.
Visuell konsistens mellom favicon og logo forbedrer merkevaregjenkjennelsen. En forenklet versjon av logoen eller den første bokstaven fungerer best ved små pikselstørrelser. Fargene i favicon bør samsvare med bedriftens grafiske profil.
Norske netthandelsplattformer som Mystore og WooCommerce støtter favicon-konfigurasjon i temainnstillingene. Nettbutikker med et profesjonelt favicon signaliserer troverdighet og skiller seg ut på prissammenligningssider.
Universell utforming er lovpålagt i Norge gjennom likestillings- og diskrimineringsloven. Alle visuelle elementer på offentlige nettsteder må ha tilstrekkelig kontrast. Favicon må være lesbart i både lys og mørk modus. Kontrastrike farger og enkle former oppfyller dette kravet på en pålitelig måte.
Favicon for PWA og mobile enheter
Progressive Web Apps krever ytterligere ikoner utover standard favicon. Filen manifest.json må inneholde et ikonarray med størrelsene 192×192 og 512×512 piksler i PNG-format.
Maskable icons er en spesiell ikontype for Android-enheter. Operativsystemet beskjærer maskable icons til ulike former - sirkler, avrundede firkanter eller dråper. Den sikre sonen dekker de indre 80 prosentene av bildeflaten. Alle vesentlige grafiske elementer må ligge innenfor denne sonen for å unngå beskjæring.
Apple krever en separat apple-touch-icon-fil på 180×180 piksler. Denne filen må deklareres i HTML-hodet - iOS leser den ikke fra manifestfilen.
Norge har svært høy smarttelefonpenetrasjon. Norske banker som DNB og SpareBank 1 tilbyr app-lignende opplevelser via nettleseren. PWA-teknologien muliggjør rask tilgang fra telefonens startskjerm uten installasjon via en appbutikk.
Lighthouse-revisjon i Chrome DevTools kontrollerer tilstedeværelsen og gyldigheten av favicon og PWA-ikoner. Et manglende eller ugyldig favicon genererer en advarsel i PWA-kategorien i revisjonen.
ANNONSE
Ofte stilte spørsmål om favicon-generatoren
Hvilket bilde er best for favicon?
Et kvadratisk bilde (minst 512×512 px) med enkel bakgrunn er best. Logoer, initialer eller enkle ikoner gir de beste resultatene. Bilder med mange detaljer kan se dårlige ut i liten størrelse (16×16 px).
Hva er forskjellen mellom favicon.ico og PNG?
ICO-filen kan inneholde flere størrelser i en fil og støttes av alle nettlesere, inkludert eldre. PNG-filer har høyere kvalitet, men krever en separat HTML-tag for hver størrelse. Det anbefales å bruke begge.
Sendes bildet til en server?
Nei. All behandling skjer i nettleseren din. Bildet lagres ikke og sendes ingen steder.
Hvordan legger man til favicon på nettsiden?
Plasser ikonfilene i nettsidens rotmappe og legg til de passende HTML-taggene i sidens <head>-seksjon. Den nedlastede ZIP-filen inneholder implementeringsinstruksjoner.
Hjelp oss å forbedre verktøyene våre
Har du en idé til en ny funksjon, funnet en feil eller vil foreslå et annet verktøy som ville gjøre arbeidet ditt enklere? Skriv til oss – vi svarer innen 24 timer.