UltKit

SVG til ICO-konverter

Et favikon laget fra SVG gir det beste resultatet: hver ikonstørrelse tegnes på nytt fra vektoren i stedet for å skaleres ned fra et stort punktgrafikkbilde, så 16 px-versjonen blir så skarp som pikselrutenettet tillater.

Bildekonverterer

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

Maks 95 MB per fil· Opptil 20 filer· Slettes etter 30 minutter

Utdata

Filene behandles på serverne våre og slettes etter 30 minutter.

Slik bruker du dette verktøyet

  1. 1

    Last opp SVG-logoen

    Bruk symbolet eller monogrammet, ikke hele ordmerket. En kvadratisk viewBox gir det reneste resultatet.

  2. 2

    Behold alle ikonstørrelsene

    Ikonstørrelser starter på Alle størrelser (16–256), som pakker alle oppløsninger inn i én .ico. Velg én enkelt størrelse bare når et program ber om nøyaktig én.

  3. 3

    Trykk på Konverter til ICO

    Lagre filen som favicon.ico i rotmappen på nettstedet ditt, eller la en Windows-snarvei peke til den.

Svar

Hvordan konverterer jeg SVG til ICO for et favicon?

Last opp SVG-en, la Ikonstørrelser stå på Alle størrelser (16–256) og trykk Konverter til ICO. Du får én .ico med alle oppløsninger tegnet fra vektoren, med gjennomsiktigheten intakt.

SVG til ICO-konverter: hvorfor vektor er riktig kilde

Formatet .ico stammer fra tidlige versjoner av Windows, og favicon.ico-konvensjonen fra Internet Explorer 5 i 1999, som lette etter en fil med det navnet i roten av hvert nettsted du satte bokmerke på. En ICO er en liten beholder: en oversikt over oppføringer, hver av dem et eget kvadratisk bitmap, slik at én fil kan inneholde et fanikon på 16 px og et skrivebordsikon på 256 px side om side. Windows Vista økte maksimum til 256 × 256 og lot disse store oppføringene lagres som PNG.

Siden hver oppføring er sitt eget bitmap, avhenger kvaliteten på et ikon av hvordan hver størrelse ble laget. Fra en PNG er hver størrelse en nedskalering av de samme pikslene. Fra en SVG er hver størrelse en ny tegning av banene, med kantutjevning beregnet for akkurat det rutenettet. Ved 16 × 16 px, der en logo har 256 piksler å jobbe med, er forskjellen synlig.

1:1

16 × 16 px

16 × 16

Nettleserfaner, bokmerker og historikklister.

1:1

32 × 32 px

32 × 32

Faner på skjermer med høy tetthet, snarveier på Windows-oppgavelinjen.

1:1

64 × 64 px

64 × 64

Skalerte skrivebordsvisninger og festede elementer.

1:1

128 × 128 px

128 × 128

Store forhåndsvisninger i filbehandlere.

1:1

256 × 256 px

256 × 256

Den største ICO-oppføringen; ekstra store ikoner i Utforsker.

SVG

Scalable Vector Graphics

SVG er et XML-basert vektorformat standardisert av W3C i 2001. I stedet for piksler beskriver det former, baner og tekst, så det forblir skarpt i alle størrelser og er vanligvis bitteliten for logoer og ikoner. Det støtter gjennomsiktighet, CSS-stiler, skripting og animasjon, og alle nettlesere gjengir det direkte. SVG egner seg ikke for fotografier, og komplekse illustrasjoner kan bli trege å gjengi. Illustrator, Inkscape, Figma og nettlesere kan åpne og redigere det.

Komprimering
–
Gjennomsiktighet
Ja
Animasjon
Ja
Introdusert
2001 · W3C
SVG-konverterer

ICO

Windows-ikon

ICO er Microsofts ikonformat, brukt til programikoner i Windows og favicons på nettsteder. Én .ico-fil kan inneholde flere bilder i ulike størrelser, for eksempel 16×16, 32×32, 48×48 og 256×256 piksler, slik at systemet kan velge den som passer best. Hvert bilde kan lagres som bitmap eller som PNG-data og støtter full alfa-gjennomsiktighet. ICO er ikke ment for bilder eller stor grafikk. Nettlesere, Windows og de fleste ikonredigerere kan lese det.

Komprimering
Tapsfri
Gjennomsiktighet
Ja
Animasjon
Nei
Introdusert
Microsoft
ICO-konverterer

Folk konverterer SVG til ICO fordi logoen finnes som vektorgrafikk, mens nettstedets rotmappe, en Windows-snarvei eller et skrivebordsprogram fortsatt forventer én .ico-fil med flere bitmap-størrelser.

Klargjør SVG-filen før du konverterer SVG til ICO

GjørIkke gjør
Sett viewBox til et kvadrat, for eksempel 0 0 512 512.Stol på hårtynne streker som forsvinner under 32 px.
La det være en liten marg slik at symbolet ikke berører kanten av ikonet.Behold et bredt ordmerke som blir til en tynn flekk.
Gjør tekst om til konturer slik at skriften ikke endres.Henvis til eksterne bilder eller nettskrifter inne i SVG-en.
Bruk symbolet eller initialene, ikke hele navnet.Legg til et hvitt rektangel bak logoen, med mindre du vil ha det i mørke faner også.

Konverteren tegner det SVG-en beskriver og ingenting annet, så lenkede ressurser og skrifter som ikke er innebygd, kan ikke hentes. Designverktøy som Figma, Illustrator og Inkscape kan eksportere tekst som baner; gjør det, så ser bokstavene like ut som i merkevaren din overalt.

Når .ico-filen er ferdig, legg til en PNG på 180 px for Apple touch-ikoner og selve SVG-en for nettlesere som støtter vektor-favicon; SVG til PNG lager PNG-en i hvilken som helst størrelse. Hvis kilden din er en bitmap-logo, gjør PNG til ICO den samme jobben fra piksler.

Konvertere SVG til ICO: spørsmål

Hvorfor bruke en SVG til ICO-konverter i stedet for å starte fra en PNG?

En PNG må skaleres ned for hver ikonstørrelse, og nedskalering gjør kantene uskarpe. En SVG tegnes direkte i 16, 32, 64, 128 og 256 px, så hver størrelse får skarpe kanter tilpasset sitt eget pikselrutenett.

Trenger nettlesere fortsatt favicon.ico hvis nettstedet har et SVG-ikon?

Chrome og Firefox leser et SVG-favicon som er angitt med en link-tagg, men mange nettlesere, feedlesere og søkeroboter ber fortsatt som standard om /favicon.ico fra rotmappen. Når du leverer begge, dekker du alt.

Hva skjer hvis SVG-filen ikke er kvadratisk?

Ikonplasser er kvadratiske, så en bred logo får enten tomme marger eller ser bitteliten ut. Endre viewBox til lik bredde og høyde først, eller beskjær en kvadratisk versjon med verktøyet beskjær bilde etter at du har eksportert en PNG.

Beholdes den gjennomsiktige bakgrunnen i ICO-filen?

Ja. ICO lagrer en alfakanal, så områder uten fyll i SVG-en forblir gjennomsiktige, og ikonet ser rent ut både i lyse og mørke nettleserfaner.

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

Ja, den samme filen fungerer. Windows bruker 256 px-bildet i store og ekstra store Utforsker-visninger, og de mindre oppføringene i lister og på oppgavelinjen.

Hvorfor ser ikonet tomt ut i 16 px?

Tynne streker og liten tekst forsvinner i den størrelsen. En strek på 2 enheter i et tegnebrett på 512 enheter blir langt under én piksel i et ikon på 16 px. Gjør linjene tykkere, eller bruk et enklere symbol til favicon.