CodeKitHubHva er dette verktøyet?
En favicon.ico er ikke bare et lite bilde — det er et beholderformat som kan holde flere størrelser av samme ikon i én fil, slik at nettleseren, oppgavelinjen eller bokmerkelinjen kan velge hvilken oppløsning som ser skarpest ut der den vises. Å gi nytt navn til en PNG som favicon.ico gjør ikke det: det er ett enkelt bilde med feil filendelse, og selv om noen nettlesere tolererer det, forventer mange verktøy, søkeroboter og eldre nettlesere som leser rådataene den ekte ICO-beholderstrukturen, og vil feile eller falle tilbake til et blankt ikon.
Dette verktøyet bygger en faktisk ICO-beholder: det rendrer SVG-en din ved 16×16, 32×32 og 48×48, koder hver som PNG internt, og pakker alle tre inn i én gyldig favicon.ico ved bruk av det samme PNG-i-ICO-formatet alle nettlesere og operativsystemer har støttet siden Windows Vista. I tillegg får du separate PNG-filer ved 180×180 (størrelsen iOS bruker for ikonet når noen legger nettstedet ditt til hjemmeskjermen) og 192×192 / 512×512 (størrelsene Android og PWA-installasjonsforespørsler henter fra webapp-manifestet ditt).
Hvorfor bruke det?
- Produserer en genuint gyldig favicon.ico med flere oppløsninger, ikke en omdøpt PNG.
- Dekker alle ikonstørrelser en reell utrulling trenger i én omgang: 16, 32, 180, 192, 512 px.
- Ferdig HTML for <head> — ingen gjetting rundt rel/sizes/type-attributter.
- SVG-er som ikke er kvadratiske, sentreres på et gjennomsiktig kvadrat i stedet for å strekkes.
- Alt rendres lokalt i nettleseren din; SVG-en lastes aldri opp.
Slik bruker du det
- Klikk boksen eller slipp SVG-logofilen din på den.
- Verktøyet rendrer den i alle favicon-størrelser automatisk — ingen innstillinger å konfigurere.
- Last ned favicon.ico for nettstedets rot, pluss de enkelte PNG-ikonene.
- Kopier HTML-utdraget og lim det inn i sidens <head>.
Eksempel
Inndata
logo.svg — et firmamerke, 3 KB vektorResultat
favicon.ico (16/32/48 px kombinert), pluss favicon-16.png, favicon-32.png, apple-touch-icon.png (180 px), icon-192.png, icon-512.pngÉn SVG inn, hver ikonfil en reell utrulling trenger, ut.
Hvilken ikonstørrelse brukes hvor
| Fil | Størrelse | Brukes til |
|---|---|---|
| favicon.ico | 16/32/48 px (kombinert) | Nettleserfane, bokmerkelinje, oppgavelinje |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Reserveløsning for nettlesere som foretrekker PNG-favikoner |
| apple-touch-icon.png | 180×180 | iOS-hjemmeskjermikon når nettstedet legges til hjemmeskjermen |
| icon-192.png | 192×192 | Android-hjemmeskjermikon, webapp-manifest |
| icon-512.png | 512×512 | PWA-installasjonsforespørsel, Android-splashskjermikon |
Hvorfor SVG-kilden betyr noe
Fordi SVG lagrer former som matematikk i stedet for piksler, starter fersk rendring ved 16 px og ved 512 px fra samme eksakte stidata — det finnes ingen oppskaleringsartefakt i den store enden, og ingen tvungen pikselavrundingsgjetting verktøyet må kompromisse på i den lille enden. Hvis du bare har en PNG-logo, kan ikke det samme verktøyet hjelpe deg; konverter eller lag logoen på nytt som SVG først, siden å skalere en liten PNG opp til 512 px bare ville gitt et uskarpt resultat.
Ofte stilte spørsmål
Hvorfor ikke bare gi nytt navn til en PNG til favicon.ico?
En .ico-fil har sitt eget binære beholderformat (en ICONDIR-header som beskriver hvor mange bilder den inneholder, etterfulgt av en katalogoppføring per bilde) — en PNG-fil med endret navn til .ico er fortsatt bare en PNG med feil filendelse innvendig. De fleste moderne nettlesere er tolerante og rendrer den likevel, men dette verktøyet bygger en ekte ICO-beholder med tre faktiske oppløsninger, som er det formatet ble laget for og det strengere lesere forventer.
Hvorfor trenger jeg PNG-ikoner hvis jeg allerede har favicon.ico?
favicon.ico dekker bare det klassiske bruksområdet med nettleserfane/bokmerker. 180×180 PNG-en er det iOS bruker når en bruker legger nettstedet ditt til hjemmeskjermen (apple-touch-icon), og 192×192- / 512×512-PNG-ene er det Android og PWA-installasjonsforespørsler henter fra webapp-manifestet. Uten dem faller ikonet ditt på en telefons hjemmeskjerm tilbake til et generisk skjermbilde eller et blankt kvadrat.
Logoen min er ikke kvadratisk — hva skjer med den?
Den sentreres på et gjennomsiktig kvadrat i hver målstørrelse i stedet for å strekkes, slik at en bred eller høy logo beholder riktige proporsjoner i stedet for å bli klemt inn i et kvadrat.
Hvor legger jeg de nedlastede filene?
Legg favicon.ico, apple-touch-icon.png, icon-192.png og icon-512.png i nettstedets rotmappe (ved siden av index.html), og lim deretter de genererte <link>-taggene inn i sidens <head>.
Blir SVG-en min lastet opp noe sted?
Nei. SVG-en rendres på lokale <canvas>-elementer, og ICO-/PNG-filene settes sammen i nettleseren din. Ingenting sendes til en server.