CodeKitHubVad är detta verktyg?
En favicon.ico är inte bara en liten bild — det är ett behållarformat som kan innehålla flera storlekar av samma ikon i en fil, så att webbläsaren, aktivitetsfältet eller bokmärkesfältet kan välja den upplösning som ser skarpast ut för platsen den visas på. Att döpa om en PNG till favicon.ico ger inte det: det är en enda bild med fel filändelse, och även om vissa webbläsare tolererar det förväntar sig många verktyg, crawlare och äldre webbläsare som läser de råa byten den riktiga ICO-behållarstrukturen och kommer att misslyckas eller falla tillbaka till en tom ikon.
Det här verktyget bygger en riktig ICO-behållare: det renderar din SVG vid 16×16, 32×32 och 48×48, kodar var och en som PNG internt, och packar alla tre i en giltig favicon.ico med hjälp av samma PNG-i-ICO-format som varje webbläsare och operativsystem har stött sedan Windows Vista. Tillsammans med den får du separata PNG-filer vid 180×180 (storleken iOS använder för ikonen när någon lägger till din webbplats på sin hemskärm) och 192×192 / 512×512 (storlekarna som Android och PWA-installationsuppmaningar hämtar från din webbappmanifest).
Varför använda det?
- Producerar en genuint giltig favicon.ico i flera upplösningar, inte en omdöpt PNG.
- Täcker varje ikonstorlek en riktig driftsättning behöver i en omgång: 16, 32, 180, 192, 512px.
- Färdig HTML för <head> — ingen gissning kring rel/sizes/type-attribut.
- Icke-kvadratiska SVG:er centreras på en transparent kvadrat istället för att sträckas ut.
- Allt renderas lokalt i din webbläsare; SVG:n laddas aldrig upp.
Så använder du det
- Klicka på rutan eller släpp din SVG-logotypfil på den.
- Verktyget renderar den i varje faviconstorlek automatiskt — inga inställningar att konfigurera.
- Ladda ner favicon.ico för din webbplats rot, plus de enskilda PNG-ikonerna.
- Kopiera HTML-utdraget och klistra in det i din sidas <head>.
Exempel
Inmatning
logo.svg — ett företagsmärke, 3 KB vektorResultat
favicon.ico (16/32/48px kombinerat), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngEn SVG in, varje ikonfil en riktig driftsättning behöver, ut.
Vilken ikonstorlek används var
| Fil | Storlek | Används för |
|---|---|---|
| favicon.ico | 16/32/48px (kombinerat) | Webbläsarflik, bokmärkesfält, aktivitetsfält |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Reserv för webbläsare som föredrar PNG-favicons |
| apple-touch-icon.png | 180×180 | iOS hemskärmsikon när webbplatsen läggs till på Hemskärmen |
| icon-192.png | 192×192 | Android hemskärmsikon, webbappmanifest |
| icon-512.png | 512×512 | PWA-installationsuppmaning, Android startskärmsikon |
Varför SVG-källan spelar roll
Eftersom SVG lagrar former som matematik snarare än pixlar, börjar rendering av den färskt vid 16px och vid 512px båda från exakt samma sökvägsdata — det finns inga uppskalningsartefakter i den stora änden och ingen tvingad pixel-snapping-gissning verktyget måste kompromissa med i den lilla änden. Om du bara har en PNG-logotyp kan det här verktyget inte hjälpa; omvandla eller återskapa logotypen som SVG först, eftersom att skala upp en liten PNG till 512px bara skulle ge ett suddigt resultat.
Vanliga frågor
Varför inte bara döpa om en PNG till favicon.ico?
En .ico-fil har sitt eget binära behållarformat (en ICONDIR-header som beskriver hur många bilder den innehåller, följt av en katalogpost per bild) — en PNG-fil omdöpt till .ico är fortfarande bara en PNG med fel filändelse invändigt. De flesta moderna webbläsare är överseende och renderar den ändå, men det här verktyget bygger en riktig ICO-behållare som innehåller tre faktiska upplösningar, vilket är vad formatet designades för och vad strängare läsare förväntar sig.
Varför behöver jag PNG-ikoner om jag redan har favicon.ico?
favicon.ico täcker bara det klassiska webbläsarflik-/bokmärkesanvändningsfallet. 180×180-PNG:n är vad iOS använder när en användare lägger till din webbplats på sin hemskärm (apple-touch-icon), och 192×192 / 512×512-PNG:erna är vad Android och PWA-installationsuppmaningar hämtar från din webbappmanifest. Utan dem faller din ikon på en telefons hemskärm tillbaka till en generisk skärmdump eller tom kvadrat.
Min logotyp är inte kvadratisk — vad händer med den?
Den centreras på en transparent kvadrat vid varje målstorlek istället för att sträckas ut, så en bred eller hög logotyp behåller sina korrekta proportioner istället för att klämmas in i en kvadrat.
Var placerar jag de nedladdade filerna?
Placera favicon.ico, apple-touch-icon.png, icon-192.png och icon-512.png i din webbplats rotmapp (bredvid index.html), klistra sedan in de genererade <link>-taggarna i din sidas <head>.
Laddas min SVG upp någonstans?
Nej. SVG:n renderas på lokala <canvas>-element och ICO/PNG-filerna sätts samman i din webbläsare. Ingenting skickas till en server.