CodeKitHubHvad er dette værktøj?
En favicon.ico er ikke bare et lille billede — det er et containerformat, der kan indeholde flere størrelser af det samme ikon i én fil, så browseren, proceslinjen eller bogmærkelinjen kan vælge den opløsning, der ser skarpest ud til det sted, den vises. At omdøbe en PNG til favicon.ico gør ikke det: det er blot ét billede med den forkerte filendelse, og mens nogle browsere accepterer det, forventer mange værktøjer, crawlere og ældre browsere, der læser de rå bytes, den rigtige ICO-containerstruktur og vil fejle eller falde tilbage til et tomt ikon.
Dette værktøj bygger en reel ICO-container: det gengiver din SVG ved 16×16, 32×32 og 48×48, koder hver som en PNG internt og pakker alle tre ind i én gyldig favicon.ico ved hjælp af det samme PNG-i-ICO-format, som alle browsere og operativsystemer har understøttet siden Windows Vista. Sammen med den får du separate PNG-filer ved 180×180 (den størrelse iOS bruger til ikonet, når nogen føjer dit site til deres hjemmeskærm) og 192×192 / 512×512 (de størrelser Android og PWA-installationsprompter henter fra din webapp-manifest).
Hvorfor bruge det?
- Producerer en reelt gyldig multi-opløsnings favicon.ico, ikke en omdøbt PNG.
- Dækker hver ikonstørrelse, en reel deployment har brug for, i én omgang: 16, 32, 180, 192, 512px.
- Klar-til-indsætning <head>-HTML — ingen gætteri om rel/sizes/type-attributter.
- Ikke-kvadratiske SVG'er centreres på en gennemsigtig firkant i stedet for at blive strakt.
- Alt gengives lokalt i din browser; SVG'en uploades aldrig.
Sådan bruger du det
- Klik på boksen, eller slip din SVG-logofil på den.
- Værktøjet gengiver den i hver favicon-størrelse automatisk — ingen indstillinger at konfigurere.
- Download favicon.ico til dit sites rod, plus de individuelle PNG-ikoner.
- Kopiér HTML-uddraget og indsæt det i din sides <head>.
Eksempel
Input
logo.svg — et virksomhedsmærke, 3 KB vektorOutput
favicon.ico (16/32/48px kombineret), plus favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngÉn SVG ind, hver ikonfil en reel deployment har brug for, ud.
Hvilken ikonstørrelse bruges hvor
| Fil | Størrelse | Bruges til |
|---|---|---|
| favicon.ico | 16/32/48px (kombineret) | Browserfane, bogmærkelinje, proceslinje |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Fallback til browsere, der foretrækker PNG-favicons |
| apple-touch-icon.png | 180×180 | iOS-hjemmeskærmikon, når sitet føjes til Hjemmeskærm |
| icon-192.png | 192×192 | Android-hjemmeskærmikon, webapp-manifest |
| icon-512.png | 512×512 | PWA-installationsprompt, Android-splashscreenikon |
Hvorfor SVG-kilden betyder noget
Fordi SVG gemmer former som matematik snarere end pixels, starter en frisk gengivelse ved 16px og ved 512px begge fra præcis de samme stidata — der er ingen opskaleringsartefakt i den store ende, og intet tvunget pixel-snapping-gætteri, værktøjet skal gå på kompromis med i den lille ende. Hvis du kun har et PNG-logo, kan dette samme værktøj ikke hjælpe; konvertér eller genskab logoet som SVG først, da opskalering af en lille PNG til 512px blot ville give et sløret resultat.
Ofte stillede spørgsmål
Hvorfor ikke bare omdøbe en PNG til favicon.ico?
En .ico-fil har sit eget binære containerformat (en ICONDIR-header, der beskriver hvor mange billeder den indeholder, efterfulgt af en katalogpost per billede) — en PNG-fil omdøbt til .ico er stadig bare en PNG med den forkerte endelse indeni. De fleste moderne browsere er tilgivende og vil gengive den alligevel, men dette værktøj bygger en reel ICO-container med tre faktiske opløsninger, hvilket er det, formatet blev designet til, og hvad strengere læsere forventer.
Hvorfor har jeg brug for PNG-ikoner, hvis jeg allerede har favicon.ico?
favicon.ico dækker kun det klassiske browserfane/bogmærke-brug. 180×180-PNG'en er den, iOS bruger, når en bruger føjer dit site til sin hjemmeskærm (apple-touch-icon), og 192×192 / 512×512-PNG'erne er dem, Android og PWA-installationsprompter henter fra din webapp-manifest. Uden dem falder dit ikon på en telefons hjemmeskærm tilbage til et generisk skærmbillede eller en tom firkant.
Mit logo er ikke kvadratisk — hvad sker der med det?
Det centreres på en gennemsigtig firkant ved hver målstørrelse i stedet for at blive strakt, så et bredt eller højt logo bevarer sine korrekte proportioner i stedet for at blive klemt ind i en firkant.
Hvor placerer jeg de downloadede filer?
Placér favicon.ico, apple-touch-icon.png, icon-192.png og icon-512.png i dit sites rodmappe (ved siden af index.html), og indsæt derefter de genererede <link>-tags i din sides <head>.
Bliver min SVG uploadet nogen steder?
Nej. SVG'en gengives på lokale <canvas>-elementer, og ICO/PNG-filerne samles i din browser. Intet sendes til en server.