SVG till ICO-konverterare

Att utgå från en SVG är det bästa sättet att skapa en favicon: varje ikonstorlek ritas på nytt från vektorn i stället för att förminskas från en stor bitmappsbild, så 16 px-versionen blir så skarp som pixelrutnätet tillåter.

eller släpp JPG, JPEG, JPE …-filer här ·

Max 95 MB per fil· Upp till 20 filer· Raderas efter 30 minuter

Utdata

Konvertera till

Filerna bearbetas på våra servrar och raderas efter 30 minuter.

Så använder du verktyget

1
Ladda upp SVG-loggan
Använd symbolen eller monogrammet, inte hela logotypen med text. En kvadratisk viewBox ger det renaste resultatet.
2
Behåll alla ikonstorlekar
Ikonstorlekar står från början på Alla storlekar (16–256), vilket packar alla upplösningar i en enda .ico. Välj en enskild storlek bara när ett program ber om exakt en.
3
Klicka på Konvertera till ICO
Spara filen som favicon.ico i webbplatsens rotmapp, eller låt en Windows-genväg peka på den.

Svar

Hur konverterar jag SVG till ICO för en favicon?

Ladda upp SVG:n, låt Ikonstorlekar stå kvar på Alla storlekar (16–256) och tryck på Konvertera till ICO. Du får en .ico med alla upplösningar ritade från vektorn, med bevarad transparens.

Konvertera SVG till ICO: därför är vektor rätt källa

Formatet .ico härstammar från tidiga versioner av Windows, och konventionen favicon.ico från Internet Explorer 5 år 1999, som letade efter en fil med det namnet i roten av varje webbplats du bokmärkte. En ICO är en liten behållare: en katalog med poster, var och en en separat kvadratisk bitmapp, så att en fil kan rymma en flikikon på 16 px och en skrivbordsikon på 256 px sida vid sida. Windows Vista höjde maxstorleken till 256 × 256 och tillät att de stora posterna lagras som PNG.

Eftersom varje post är sin egen bitmapp beror ikonens kvalitet på hur varje storlek har skapats. Från en PNG är varje storlek en nedskalning av samma pixlar. Från en SVG är varje storlek en ny rendering av banorna, med kantutjämning beräknad för exakt det rutnätet. Vid 16 × 16 px, där en logotyp har 256 pixlar att arbeta med, syns skillnaden.

1:1

16 × 16 px

16 × 16

Webbläsarflikar, bokmärken och historiklistor.

1:1

32 × 32 px

32 × 32

Flikar på skärmar med hög pixeltäthet, genvägar i Windows aktivitetsfält.

1:1

64 × 64 px

64 × 64

Skalade skrivbordsvyer och fästa objekt.

1:1

128 × 128 px

128 × 128

Stora förhandsvisningar i filhanterare.

1:1

256 × 256 px

256 × 256

Den största ICO-posten; extra stora ikoner i Utforskaren.

SVG

Scalable Vector Graphics

SVG är ett XML-baserat vektorformat som W3C standardiserade 2001. I stället för pixlar beskriver det former, banor och text, så det förblir skarpt i alla storlekar och är oftast mycket litet för logotyper och ikoner. Det stöder transparens, CSS-formatering, skript och animation, och alla webbläsare återger det direkt. SVG lämpar sig inte för foton, och komplexa illustrationer kan bli långsamma att rendera. Illustrator, Inkscape, Figma och webbläsare kan öppna och redigera det.

Komprimering: –
Transparens: Ja
Animation: Ja
Introducerades: 2001 · W3C

SVG-omvandlare

ICO

Windows-ikon

ICO är Microsofts ikonformat som används för programikoner i Windows och favicons på webbplatser. En .ico-fil kan innehålla flera bilder i olika storlekar, till exempel 16×16, 32×32, 48×48 och 256×256 pixlar, så att systemet kan välja den som passar bäst. Varje bild kan lagras som bitmapp eller som PNG-data och stöder full alfatransparens. ICO är inte avsett för foton eller stora illustrationer. Webbläsare, Windows och de flesta ikonredigerare kan läsa det.

Komprimering: Förlustfri
Transparens: Ja
Animation: Nej
Introducerades: Microsoft

ICO-omvandlare

Man konverterar SVG till ICO eftersom logotypen finns som vektor, medan webbplatsens rot, en Windows-genväg eller en skrivbordsapp fortfarande förväntar sig en .ico-fil med flera bitmappsstorlekar.

Förbered SVG-filen innan du konverterar SVG till ICO

Gör så här	Undvik
Sätt viewBox till en kvadrat, till exempel `0 0 512 512`.	Lita på hårfina linjer som försvinner under 32 px.
Lämna en liten marginal så att symbolen inte rör ikonens kant.	Behålla en bred logotyp med text som blir en tunn fläck.
Konvertera text till konturer så att typsnittet inte ändras.	Referera till externa bilder eller webbtypsnitt i SVG:n.
Använd symbolen eller initialerna, inte hela namnet.	Lägga en vit rektangel bakom logotypen om du inte vill ha den även på mörka flikar.

Konverteraren renderar det SVG:n beskriver och inget annat, så länkade resurser och typsnitt som inte är inbäddade kan inte hämtas. Designverktyg som Figma, Illustrator och Inkscape kan exportera text som banor; gör det så stämmer bokstäverna med ditt varumärke överallt.

När .ico-filen är klar lägger du till en PNG på 180 px för Apple touch-ikoner och själva SVG:n för webbläsare som stöder vektorfavicons; SVG till PNG skapar PNG:n i valfri storlek. Om din källa i stället är en bitmappslogotyp gör PNG till ICO samma jobb utifrån pixlar.

Konvertera SVG till ICO: frågor och svar

Varför konvertera SVG till ICO i stället för att utgå från en PNG?

En PNG måste skalas ner för varje ikonstorlek, och nedskalning gör kanterna suddiga. En SVG renderas direkt i 16, 32, 64, 128 och 256 px, så varje storlek får skarpa kanter för sitt eget pixelrutnät.

Behöver webbläsare fortfarande favicon.ico om webbplatsen har en SVG-ikon?

Chrome och Firefox läser en SVG-favicon som deklareras med en link-tagg, men många webbläsare, flödesläsare och sökrobotar begär fortfarande /favicon.ico från webbplatsens rot som standard. Om du levererar båda täcks allt.

Vad händer om min SVG inte är kvadratisk?

Ikonytor är kvadratiska, så en bred logotyp får antingen tomma marginaler eller blir liten. Ändra först viewBox så att bredd och höjd är lika, eller beskär en kvadratisk version med verktyget beskär bild efter att du exporterat en PNG.

Behålls den transparenta bakgrunden i ICO-filen?

Ja. ICO lagrar en alfakanal, så områden utan fyllning i SVG:n förblir transparenta och ikonen ser bra ut både på ljusa och mörka webbläsarflikar.

Kan jag konvertera SVG till ICO för en programikon eller mappikon i Windows?

Ja, samma fil fungerar. Windows läser bilden på 256 px för stora och extra stora vyer i Utforskaren och de mindre posterna för listor och aktivitetsfältet.

Varför ser min ikon tom ut i 16 px?

Tunna linjer och liten text försvinner vid den storleken. En linje på 2 enheter i en rityta på 512 enheter renderas till långt under en pixel i en ikon på 16 px. Gör linjerna tjockare eller använd en enklare symbol för favicon.

SVG till ICO-konverterare

Bildkonverterare