Favicon-generatorHver størrelse, og head-blokken som hører til.
Slipp inn en logo og få en ekte favicon.ico med flere oppløsninger, PNG-størrelsene nettleserne ber om, et apple touch icon, Androids maskable ikon og en utfylt site.webmanifest. Alt blir laget i denne fanen, bildet ditt blir aldri lastet opp.
Slipp logoen din her
Eller trykk for å velge en fil. Et kvadratisk bilde på 512 px eller mer fungerer best.
PNG, JPG, WebP, SVG, ICO eller GIF
Bildet ditt blir lest, skalert og pakket inne i denne fanen. Det blir aldri lastet opp, og ingen server er involvert på noe tidspunkt.
Hvilke faviconstørrelser trenger du egentlig i 2026?
Langt færre enn pakkene på tjue filer som de fleste generatorer fortsatt deler ut. Fem flater dekker hver nettleser og hvert operativsystem som betyr noe, og alt utover det er vekt i <head> uten gevinst.
favicon.ico, 16 og 32 og 48
Fortsatt filen en nettleser leter etter i roten av domenet ditt før den har lest en eneste linje HTML. Én beholder rommer alle tre størrelsene, og derfor bygger denne faviconkonverteren en ekte .ico i stedet for å døpe om en PNG. 16 px er fanen, 32 px er retinafanen og bokmerkelinjen, 48 px er snarveier i Windows.
favicon.svg, når du har en vektor
En vektorfavicon er skarp i alle størrelser og kan til og med svare på systemets mørke modus med en media query inne i filen. Nettlesere som forstår den, foretrekker den framfor .ico. Laster du opp en SVG her, forblir den vektor, den blir aldri rastrert og levert tilbake som en kopi.
apple-touch-icon.png, 180×180
Ikonet iOS bruker når noen legger nettstedet ditt på hjemskjermen. Én fil holder: iOS har skalert ned et enkelt ikon på 180 px siden iOS 8, så den gamle stabelen fra apple-touch-icon-57x57 til 152x152 er dødvekt. Denne apple touch icon-generatoren skriver ett, og gjør det ugjennomsiktig.
android-chrome 192 og 512, pluss maskable
Refereres fra site.webmanifest og ikke fra en link-tagg. 192 px er hjemskjermen, 512 px er startskjermen og installasjonsdialogen. Den maskable varianten er den Android beskjærer til den formen launcheren bruker, så motivet der trenger ekte marg.
mstile-150x150.png, billig å beholde
Festede nettsteder i Windows leser den fortsatt. Den koster én liten PNG og to metatagger, så den er med, men ingenting knekker om du sletter den. Det er det ærlige svaret, og derfor står den sist på listen i stedet for å bli presentert som nødvendig.
Hvorfor inneholder en .ico-fil flere bilder?
Fordi .ico er et beholderformat, ikke et bildeformat. Å forstå det er forskjellen på en favicon som vises overalt og en som stille svikter i Windows og i feedlesere.
Først en katalog, så bildene
Filen åpner med et hode på seks byte som sier hvor mange bilder som følger, deretter én oppføring på seksten byte per bilde med bredde, høyde, lengde i byte og plassering i filen, og først da selve bildedataene. Alt er little-endian. Den strukturen er grunnen til at en PNG du døper om til .ico ikke er en .ico.
Den som leser velger størrelsen
En nettleser som tegner en fane på 16 px leser katalogen, finner oppføringen på 16 px og dekoder bare den. Gir du den ett bilde på 512 px, skalerer den ned under tegningen, med billig sampling og et uskarpt resultat. Gir du den en 16 px laget for formålet, bruker den den.
Innholdet kan være PNG
Det opprinnelige formatet la inn BMP med omvendt pikselrekkefølge og en egen transparensmaske på én bit. Alle nettlesere og alle Windows siden Vista godtar også PNG inne i beholderen, og det er det denne ico-konverteren skriver: mindre filer, ekte alfa, ingen gammel encoder.
Ved 16 px viser kvaliteten seg
Å skalere en logo på 1024 px rett ned til 16 px sampler for få kildepiksler og gir en grå flekk. Dette verktøyet halverer bildet på mellomliggende canvas, 1024 til 512 til 256 og så videre, slik at hver piksel bidrar. Det er hele grunnen til at en liten favicon holder seg lesbar.
Trenger jeg fortsatt et apple-touch-icon?
Ja, og det er den ene filen der reglene er annerledes enn for alle andre ikoner i pakken. To ting å vite, begge allerede ordnet for deg over.
iOS kaster gjennomsiktigheten din
Safari legger hjemskjermikonet mot svart i stedet for mot bakgrunnsbildet, så en logo du nøye har eksportert med gjennomsiktig bakgrunn, kommer fram som en form som svever på en svart flis. Derfor skriver dette verktøyet alltid apple-touch-icon med ugjennomsiktig bakgrunn, hvit som standard, selv når du har valgt gjennomsiktig for alt annet. iOS legger heller ikke på sin egen glans lenger siden iOS 7, så det du leverer er det folk ser.
Android beskjærer, det fyller ikke ut
En Android-launcher tar et maskable ikon og klipper det til sin egen form, en sirkel, en squircle eller et avrundet kvadrat avhengig av telefonen. Bare de midterste 80 % er garantert å overleve, så en logo som fyller flaten fra kant til kant, mister ytterpunktene sine. Her holder den maskable filen 20 % marg uansett hva du setter skyveknappen til, og den runde forhåndsvisningen viser nøyaktig hva launcheren beholder.
Hvordan legger jeg en favicon på nettstedet mitt?
To steg, og det er i det andre de fleste feilene skjer. Kopier blokken verktøyet lager i stedet for å skrive den fra hukommelsen.
Legg filene i roten
Plasser favicon.ico og resten ved siden av index.html, slik at de svarer på nettstedetditt.no/favicon.ico. Nettlesere ber om akkurat den stien av seg selv, uten at noen sier det til dem, og derfor betyr plasseringen mer enn link-taggen.
Lim head-blokken inn på hver side
Ikke bare på forsiden. Den som lander på en dyp side og bokmerker den, skal få riktig ikon. Kjører nettstedet ditt på en mal eller et rammeverk, hører blokken hjemme i det felles oppsettet.
Deklarer .ico uten størrelse
Bruk rel="icon" href="/favicon.ico" sizes="any". Størrelsene ligger allerede i beholderen, og å hardkode én i markupen hindrer nettleseren i å hente de andre. SVG-linjen kommer først, slik at nettlesere som forstår vektor tar den.
Og så hard oppdatering, to ganger
Favikoner blir mellomlagret aggressivt og adskilt fra siden, så det gamle ikonet ditt kan overleve en vanlig oppdatering i dagevis. Åpne filen direkte på nettstedetditt.no/favicon.ico for å bekrefte at den nye faktisk blir servert, før du konkluderer med at noe er ødelagt.
Vil du sjekke hvor en eksisterende QR-kode eller kortlenke faktisk fører? Dekod den med QR-kode-resolveren
Trenger du en kort lenke til det nye nettstedet? Lag en med den gratis lenkeforkorteren
Ikonet er den lille halvdelen av et førsteinntrykk.
En favicon er det folk ser når de allerede er på nettstedet ditt. Den tyngre jobben gjør lenken som førte dem dit, og det er som regel den delen ingen måler. Om det er nyttig for deg, er LinkScale det vi bygger.
Se hvor besøket kom fra
Klikk, land, enheter og hva som skjedde etterpå, for hver lenke du deler ut, i stedet for et tall i noen andres dashbord.
Bytt destinasjon senere
Send en trykt eller publisert lenke et annet sted i etterkant, uten å be noen om å oppdatere det de har lagret.
Én side for alt
En link in bio-side som rommer butikken, bookingskjemaet og de sosiale profilene, slik at den ene lenken du får plass til rekker lenger.
Spørsmål om favicon-generatoren
Har du flere spørsmål?
OnlineEkte mennesker, svarer som regel innen få minutter.
Den er gratis, uten konto, uten vannmerke og uten grense for hvor mange filer du lager. Bildet ditt blir aldri lastet opp: det blir lest med nettleserens egen FileReader, tegnet på et canvas og pakket i Blobs, alt inne i siden. Det finnes ingen endepunkt bak verktøyet, så det er ingenting å sende det til. Du kan bekrefte det ved å åpne nettverksfanen i nettleseren mens du bruker det, eller ved å koble fra internett etter at siden er lastet.
Kom videre med LinkScale
Faviconen er på plass. Lenken som henter folk inn er den andre halvdelen.
LinkScale er en plattform for lenkehåndtering for deg som vil vite hva som skjer etter klikket, og bytte destinasjon uten å trykke opp noe på nytt.
Free 14-day trial on every plan