Ctrl K

SVG naar ICO omzetten

Zet SVG om naar ICO in je browser: je bestanden worden niet geüpload, er is geen limiet op het aantal bestanden en de vector wordt op elk formaat van 16 tot 256 pixels scherp getekend. Sleep één SVG of een hele reeks in het vak en download de ICO-bestanden meteen.

Sleep je SVG-bestanden hierheen

Kies bestanden

Meerdere bestanden mogelijk · of plak met Ctrl+V

    SVG naar ICO

    Formaten in het icoon

    SVG is een vectorbestand; kies hoe groot de ICO wordt.

    Alles gebeurt in je browser. Je bestanden worden niet geüpload.

    Zo werkt het

    1. Kies je SVG-bestanden

      Sleep ze in het vak, kies ze op je apparaat of plak met Ctrl+V.

    2. Automatisch omgezet

      Elk bestand wordt direct in je browser omgezet naar ICO.

    3. Download

      Per bestand, of alles tegelijk als ZIP-bestand.

    Waarom SVG de ideale bron is

    Een pixelafbeelding moet naar 16 pixels worden verkleind en verliest onderweg detail. Een SVG wordt voor elk formaat opnieuw getekend vanuit zijn vormen, zodat de ingang van 16 pixels en die van 256 pixels allebei strak zijn. Deze omzetter tekent je SVG op de grootte die je bij Grootte instelt en past hem dan in elk formaat van het icoon.

    Is je logo een eenvoudige vorm in één of twee kleuren, dan geeft SVG naar ICO de schoonste favicon die je op deze site kunt maken.

    De instelling die ertoe doet: de grootte van de SVG

    De grootte waarop een SVG wordt getekend hangt af van zijn width en height, of van de viewBox als die ontbreken. Veel iconensets gebruiken een viewBox van 0 0 24 24. Dat is maar 24 pixels, of 48 bij de standaard Scherp (2×), en dat is te weinig voor de formaten van 128 en 256 pixels.

    • Kies Extra groot (4×) voor SVG's met een kleine viewBox.
    • Of zet width="512" height="512" op het <svg>-element; dat geeft ook andere tools een goede startgrootte.
    • Hou de SVG vierkant. Een breed logo wordt met transparante balken boven en onder in het vierkant geplaatst en is op 16 pixels piepklein.

    Eén SVG, twee favicon-bestanden

    Een SVG kan zelf je favicon zijn:

    <link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="32x32">

    Browsers die SVG begrijpen gebruiken het eerste icoon, de rest valt terug op het ICO-bestand. Een extra voordeel van SVG is dat het met een prefers-color-scheme-regel in het bestand de donkere modus van de bezoeker kan volgen. De complete opzet, met het iPhone- en manifesticoon, staat in favicon maken.

    Voor je omzet

    • Zet je tekst om naar contouren. Tekst in een SVG wordt getekend met de lettertypen van het apparaat. Zet hem in je ontwerpprogramma eerst om naar paden.
    • Haal externe verwijzingen weg. Een SVG die afbeeldingen of stylesheets van een ander adres laadt, wordt zonder die onderdelen getekend als hij als afbeelding wordt gebruikt.
    • Ook een PNG nodig? SVG naar PNG geeft je de bestanden van 180 en 512 pixels uit dezelfde bron. Wil je juist vanuit een pixelafbeelding beginnen, gebruik dan PNG naar ICO.

    Veelgestelde vragen

    Wordt mijn SVG geüpload?

    Nee. De SVG wordt in je browser getekend en omgezet, dus het bestand verlaat je apparaat niet. Er is geen limiet op de bestandsgrootte of het aantal bestanden, behalve het geheugen van je apparaat.

    Heb ik nog een ICO nodig als browsers SVG-favicons kunnen gebruiken?

    Ja, als vangnet. De huidige Chrome, Edge en Firefox gebruiken een SVG-icoon, maar Safari en oudere browsers, bladwijzers, feedlezers en zoekmachines vragen nog steeds om /favicon.ico. Hou beide: de SVG voor scherpte en de ICO als vangnet.

    Waarom is mijn icoon wazig terwijl mijn SVG een vector is?

    Een SVG wordt eerst op zijn eigen breedte en hoogte getekend. Bij een viewBox van 24 × 24 en de standaard 2× is dat 48 pixels, en daarna wordt het opgeschaald voor het formaat van 256 pixels. Kies Extra groot (4×) bij de instellingen, of geef de SVG een grotere width en height, om de grote formaten scherp te houden.

    Blijft de transparantie van mijn SVG behouden?

    Ja. Vlakken zonder vulling blijven in elk formaat transparant. Heeft je logo een achtergrondvorm, dan blijft die zoals getekend.

    Mijn SVG bevat tekst. Klopt het lettertype dan?

    Niet altijd. Tekst wordt getekend met lettertypen die je browser heeft, en een SVG die als afbeelding wordt gebruikt kan geen webfonts laden. Zet de tekst in je ontwerpprogramma om naar contouren (paden) voordat je exporteert.