Favicon-generator: Lag .ico fra PNG
Konverter PNG- og JPEG-bilder til standard multi-oppløselig .ico favicon lokalt i nettleseren.
Favicon-generator
Konverter PNG eller JPEG til et standard multi-størrelse .ico favicon lokalt i nettleseren.
Dra og slipp et bilde her, eller klikk for å velge
PNG, JPEG
Slik fungerer det
En .ico-fil er en container som kan inneholde flere bilder med forskjellige dimensjoner (som 16x16, 32x32 og 48x48) i samme fil. Dette lar nettlesere og operativsystemer velge den best egnede oppløsningen automatisk.
Dette verktøyet kjører 100% lokalt i nettleseren din. Bildet ditt skaleres ned til de valgte oppløsningene på skjulte lerreter (canvases), konverteres til PNG-array-buffere, og settes sammen til en binær ICO-filstruktur med korrekte headere og katalog-pekere.
Hvorfor bruke .ico for favicon?
Selv om moderne nettlesere støtter PNG- og SVG-favicons, er en standard "favicon.ico" i rotmappen til nettstedet ditt fremdeles den mest kompatible løsningen for eldre nettlesere, bokmerkesystemer og enkelte crawlere.
Om dette verktøyet
Favicon-generatoren lager en standard multi-størrelses .ico-fil fra et PNG- eller JPEG-bilde, hundre prosent lokalt i nettleseren. En .ico-fil er en container som kan holde flere bilder i ulike oppløsninger (16x16, 32x32, 48x48, 64x64, 128x128, 256x256) i samme fil, slik at nettleser og operativsystem automatisk kan velge riktig størrelse for hver plass ikonet skal vises (fane, bokmerke, snarvei, oppgavelinje). Kildebildet skaleres til hver valgt størrelse på skjulte HTML5-canvas-elementer og pakkes til korrekt binær ICO-struktur med header og katalog-pekere.
Slik bruker du det
- Slipp et kvadratisk PNG- eller JPEG-bilde på filsonen (helst 256x256 eller større).
- Huk av hvilke størrelser du vil ha med (16, 32 og 48 er standard for favicon).
- Se forhåndsvisningen av det største ikonet i preview-boksen.
- Trykk «Last ned» og lagre `favicon.ico` i rotkatalogen på nettstedet ditt.
Eksempler
Logo PNG 512x512 med transparent bakgrunn. Huker av 16, 32 og 48.favicon.ico ca. 15 KB. Alle tre størrelser i én fil, lagres på `/favicon.ico`.Vanlige bruksområder
- Nytt nettsted der du trenger favicon i alle standard-størrelser.
- Rebranding av eksisterende side med ny logo.
- Interne verktøy og admin-panel som skal skille seg fra andre faner i nettleser.
- Progressive Web Apps (PWA) som vises på hjemskjerm på mobil.
- Windows-skrivebordsapper eller Electron-apper som trenger .ico-format for taskbar-ikon.
Ofte stilte spørsmål
- Hvilke størrelser trenger jeg egentlig?
- 16x16 er absolutt minimum og brukes i nettleserfaner. 32x32 brukes til bokmerker og high-DPI-faner. 48x48 er Windows nettverksmappe- og snarveisstørrelse. 256x256 er Windows shell-visning (files eksplorer, oppgavelinjen ved store ikoner). En robust standard er å ta med 16, 32, 48. For maksimal kompatibilitet legger du til 64, 128 og 256 også, filen vokser da bare noen KB.
- Er ikke PNG-favicon mer moderne enn ICO?
- Ja, tekniske sett er PNG et bedre bildeformat, og du kan referere til flere PNG-filer i `<link rel="icon" type="image/png" sizes="32x32" href="...">`. Men et ICO-fil på `/favicon.ico` er fortsatt standarden nettlesere leter etter automatisk uten `<link>`-tagg. Beste praksis er faktisk å ha begge: `favicon.ico` med 16/32/48 for baklengs kompatibilitet, og en `favicon.svg` eller `favicon-192.png` for moderne enheter.
- Hva om bildet mitt ikke er kvadratisk?
- Verktøyet advarer og strekker bildet til kvadratisk, noe som ser dårlig ut. Best er å kroppe eller pade kildebildet til kvadratisk før du laster opp. For logoer med mye hvitrom, prøv å skjære vekk unødvendige marger så designet fyller hele ikonet. 512x512 med litt marg fungerer bra.
- Hvorfor viser ikke nettleseren min det nye faviconet?
- Nettlesere cacher favicon aggressivt, ofte i flere dager, uavhengig av HTTP-headers. Prøv å hard-refreshe (Ctrl+F5 / Cmd+Shift+R), åpne siden i inkognito-modus eller besøk `/favicon.ico?v=2` direkte i URL-linja for å tvinge oppdatering. Etter cache-utløp henter alle brukerne det nye ikonet automatisk. For deploy: sørg for at HTTP-header `Cache-Control: public, max-age=86400` er satt, ikke lengre enn 1 dag.
Teknisk bakgrunn
Prosess: PNG/JPEG dekodes av nettleseren til `HTMLImageElement`. For hver valgt størrelse opprettes en `<canvas>` med `width = height = size`, og bildet tegnes med `ctx.drawImage(img, 0, 0, size, size)` for høykvalitets bikubisk skalering. Canvasen konverteres til PNG blob via `canvas.toBlob(cb, "image/png")`. Deretter bygges ICO-headerstrukturen manuelt: 6-byte ICONDIR-header (`00 00 01 00 count`), etterfulgt av 16-byte ICONDIRENTRY per bilde (bredde, høyde, fargeantall, plane, bpp, størrelse i bytes, offset), til slutt selve PNG-dataene ryddig konkatenert med korrekte offsets. Resultat er `Blob` med MIME `image/x-icon` som lastes ned med `<a download="favicon.ico">`.