SVG-in-ICO-Konverter
Legen Sie unten eine SVG ab, und Sie erhalten eine ICO-Datei. Der Vektor wird in jeder gewählten Größe von 16 bis 256 px gezeichnet. So wird jedes Icon in der .ico für sein eigenes Pixelraster gerendert, statt aus einer einzigen großen Bitmap verkleinert zu werden. Verwenden Sie das Ergebnis als favicon.ico oder als Windows-Icon. Eine SVG, die Sie von Ihrem Gerät hinzufügen, bleibt in Ihrem Browser.
Prüfen Sie Ihre SVG vor dem Konvertieren
- Geben Sie ihr eine viewBox. Das svg-Wurzelelement braucht ein viewBox-Attribut, damit sich die Zeichnung auf ein Quadrat skalieren lässt. Fehlt es, kann das Icon beschnitten, nicht mittig oder leer ausfallen.
- Wandeln Sie Text in Pfade um. Echter Text wird mit den Schriften gerendert, die dem Browser gerade zur Verfügung stehen. Wandeln Sie Text in Figma, Illustrator oder Inkscape in Pfade um, damit die Buchstaben auf jedem Rechner gleich aussehen.
- Betten Sie Bilder und Styles ein. Zeichnet ein Browser eine SVG auf ein Canvas, lädt er keine verlinkten Bilder und keine externen Stylesheets, sodass sie im Icon fehlen. Binden Sie Bilder als data URIs ein und lassen Sie das CSS in der Datei.
- Vereinfachen Sie für 16 px. Linien, die dünner als ein Pixel sind, verschwimmen bei 16 und 32 px zu Grau. Wird das Icon vor allem im Browser-Tab zu sehen sein, verstärken Sie dünne Linien und entfernen Sie feine Details vor dem Konvertieren.
So wandeln Sie SVG in ICO um
- SVG hinzufügen. Ziehen Sie die Datei in das Upload-Feld, wählen Sie sie auf Ihrem Gerät aus oder fügen Sie sie ein. Dateien bis 10 MB werden akzeptiert.
- Größen auswählen. Behalten Sie für ein Favicon 16, 32 und 48 px. Nehmen Sie 256 px hinzu, wenn Windows es als App-Icon anzeigen soll.
- Skalierung wählen. „Einpassen“ hält das ganze Logo innerhalb des Quadrats. Lassen Sie den Hintergrund auf „Transparent“, sofern Sie keinen weißen Hintergrund möchten.
- Konvertieren und speichern. Klicken Sie auf „Konvertieren“ und laden Sie dann die .ico herunter. Mehrere SVGs lassen sich mit „Alle Dateien herunterladen“ gemeinsam als ZIP speichern.
Fragen zu SVG in ICO
Warum ist meine ICO leer oder unvollständig?
Meist hat die SVG keine viewBox, verweist auf ein externes Bild oder Stylesheet oder nutzt eine Schrift, die Ihr Browser nicht hat. Beheben Sie das in der SVG und konvertieren Sie erneut. Der Ratgeber zu SVG-in-ICO-Problemen behandelt jeden dieser Fälle.
Bleibt die ICO ein Vektor?
Nein. Eine ICO enthält Bitmaps in festen Größen, daher wird die SVG für jede gewählte Größe einmal gerastert. Behalten Sie die SVG als Masterdatei.
Ist das Icon bei 16 px scharf?
Es wird direkt in 16 × 16 gerendert und ist damit so scharf, wie diese Größe es zulässt. Details, die feiner als ein Pixel sind, bleiben trotzdem nicht erhalten. Vereinfachen Sie dünne Linien deshalb vorher.
Sollte ich stattdessen ein SVG-Favicon ausliefern?
Die meisten aktuellen Browser akzeptieren ein SVG-Favicon über ein link-Tag, aber viele Tools und ältere Browser fragen weiterhin /favicon.ico ab. Viele Websites liefern beides aus: die SVG für moderne Browser und eine ICO als Fallback.
Eine Schritt-für-Schritt-Anleitung mit Tipps für Designtools finden Sie im SVG-in-ICO-Ratgeber.
Sie haben stattdessen ein PNG? Nutzen Sie den PNG-in-ICO-Konverter.
JPG-, WebP-, GIF-, BMP- und AVIF-Dateien verarbeitet der ICO-Konverter auf der Startseite.