UltKit

SVG til ICO-konverter

Et favicon fra SVG er det bedste udgangspunkt: hver ikonstørrelse tegnes på ny fra vektoren i stedet for at blive skaleret ned fra et stort bitmap, så 16 px-versionen bliver så skarp, som pixelgitteret tillader.

Billedkonverter

eller slip JPG, JPEG, JPE …-filer her ·

Maks. 95 MB pr. fil· Op til 20 filer· Slettes efter 30 minutter

Output

Filer behandles på vores servere og slettes efter 30 minutter.

Sådan bruger du værktøjet

  1. 1

    Upload SVG-logoet

    Brug logosymbolet eller monogrammet, ikke hele ordmærket. En kvadratisk viewBox giver det reneste resultat.

  2. 2

    Behold alle ikonstørrelser

    Ikonstørrelser starter på Alle størrelser (16–256), som pakker alle opløsninger ind i én .ico. Vælg kun én enkelt størrelse, hvis et program kræver præcis én.

  3. 3

    Tryk på Konvertér til ICO

    Gem filen som favicon.ico i dit websteds rodmappe, eller peg en Windows-genvej på den.

Svar

Hvordan konverterer jeg SVG til ICO til et favicon?

Upload SVG'en, lad Ikonstørrelser stå på Alle størrelser (16–256), og tryk på Konvertér til ICO. Du får én .ico med alle opløsninger tegnet fra vektoren, og gennemsigtigheden bevares.

SVG til ICO-konverter: derfor er vektor den rigtige kilde

Formatet .ico stammer fra de tidlige versioner af Windows, og favicon.ico-konventionen fra Internet Explorer 5 i 1999, som ledte efter en fil med det navn i roden af hvert websted, du bogmærkede. En ICO er en lille container: en oversigt over indgange, hver med sit eget kvadratiske bitmapbillede, så én fil kan rumme et fanebladsikon på 16 px og et skrivebordsikon på 256 px side om side. Windows Vista hævede maksimum til 256 × 256 og tillod, at de store indgange blev gemt som PNG.

Fordi hver indgang er sit eget bitmapbillede, afhænger ikonets kvalitet af, hvordan hver størrelse er fremstillet. Fra en PNG er hver størrelse en nedskalering af de samme pixels. Fra en SVG er hver størrelse en ny tegning af stierne, med kantudjævning beregnet til netop det gitter. Ved 16 × 16 px, hvor et logo har 256 pixels at arbejde med, er forskellen synlig.

1:1

16 × 16 px

16 × 16

Browserfaner, bogmærker og historiklister.

1:1

32 × 32 px

32 × 32

Faner på skærme med høj tæthed, genveje på Windows-proceslinjen.

1:1

64 × 64 px

64 × 64

Skalerede skrivebordsvisninger og fastgjorte elementer.

1:1

128 × 128 px

128 × 128

Store eksempelvisninger i filhåndtering.

1:1

256 × 256 px

256 × 256

Den største ICO-indgang; ekstra store ikoner i Stifinder.

SVG

Scalable Vector Graphics

SVG er et XML-baseret vektorformat, som W3C standardiserede i 2001. I stedet for pixels beskriver det former, stier og tekst, så det forbliver skarpt i enhver størrelse og som regel er meget lille til logoer og ikoner. Det understøtter gennemsigtighed, CSS-styling, scripting og animation, og alle browsere gengiver det direkte. SVG egner sig ikke til fotografier, og komplekse illustrationer kan blive langsomme at gengive. Illustrator, Inkscape, Figma og browsere kan åbne og redigere det.

Komprimering
–
Gennemsigtighed
Ja
Animation
Ja
Introduceret
2001 · W3C
SVG-konverter

ICO

Windows-ikon

ICO er Microsofts ikonformat, der bruges til programikoner i Windows og favicons på websteder. Én .ico-fil kan indeholde flere billeder i forskellige størrelser, f.eks. 16×16, 32×32, 48×48 og 256×256 pixel, så systemet kan vælge den bedste. Hvert billede kan gemmes som bitmap eller som PNG-data og understøtter fuld alfagennemsigtighed. ICO er ikke beregnet til fotos eller stor grafik. Browsere, Windows og de fleste ikonredigeringsprogrammer kan læse det.

Komprimering
Uden tab
Gennemsigtighed
Ja
Animation
Nej
Introduceret
Microsoft
ICO-konverter

Man konverterer SVG til ICO, fordi logoet findes som vektor, mens websitets rod, en Windows-genvej eller et skrivebordsprogram stadig forventer én .ico-fil med flere bitmapstørrelser.

Forbered SVG-filen, før du konverterer SVG til ICO

GørUndgå
Sæt viewBox til en kvadrat, for eksempel 0 0 512 512.Stol på hårfine streger, der forsvinder under 32 px.
Lad en lille margen stå, så symbolet ikke rører ikonets kant.Bevar et bredt ordmærke, der bliver til en tynd udtværing.
Konvertér tekst til konturer, så skrifttypen ikke ændrer sig.Henvis til eksterne billeder eller webskrifttyper i SVG'en.
Brug symbolet eller initialerne, ikke hele navnet.Læg et hvidt rektangel bag logoet, medmindre du også vil have det på mørke faner.

Konverteren tegner det, SVG'en beskriver, og intet andet, så linkede ressourcer og skrifttyper, der ikke er indlejret, kan ikke hentes. Designprogrammer som Figma, Illustrator og Inkscape kan eksportere tekst som stier; gør det, så passer bogstaverne til dit brand overalt.

Når .ico-filen er færdig, så tilføj en PNG på 180 px til Apple touch-ikoner og selve SVG'en til browsere, der understøtter vektorfavicons; SVG til PNG laver PNG'en i alle størrelser. Hvis din kilde i stedet er et bitmaplogo, klarer PNG til ICO den samme opgave ud fra pixels.

Konvertér SVG til ICO: spørgsmål

Hvorfor bruge en SVG til ICO-konverter i stedet for at starte fra en PNG?

En PNG skal skaleres ned til hver ikonstørrelse, og nedskalering gør kanterne slørede. En SVG tegnes direkte i 16, 32, 64, 128 og 256 px, så hver størrelse får skarpe kanter tilpasset sit eget pixelgitter.

Har browsere stadig brug for favicon.ico, hvis mit websted har et SVG-ikon?

Chrome og Firefox læser et SVG-favicon, der er angivet med et link-tag, men mange browsere, feedlæsere og crawlere beder stadig som standard om /favicon.ico i websitets rod. Med begge dele er du dækket ind overalt.

Hvad sker der, hvis min SVG ikke er kvadratisk?

Ikonpladser er kvadratiske, så et bredt logo får enten tomme marginer eller ser lille ud. Redigér først viewBox, så bredde og højde er ens, eller beskær en kvadratisk version med værktøjet beskær billede, når du har eksporteret en PNG.

Bevares den gennemsigtige baggrund i ICO-filen?

Ja. ICO gemmer en alfakanal, så områder uden udfyldning i SVG'en forbliver gennemsigtige, og ikonet står pænt på både lyse og mørke browserfaner.

Kan jeg konvertere SVG til ICO til et Windows-program eller mappeikon?

Ja, den samme fil virker. Windows bruger billedet på 256 px til store og ekstra store visninger i Stifinder og de mindre indgange til lister og proceslinjen.

Hvorfor ser mit ikon tomt ud ved 16 px?

Tynde streger og lille tekst forsvinder i den størrelse. En streg på 2 enheder i et 512-enheders tegnebræt bliver langt under én pixel i et ikon på 16 px. Gør linjerne tykkere, eller brug et enklere symbol til favicon.