PerfectVector
Von Irene Kim9 Min. Lesezeit

Eine ICO-Datei in ein bearbeitbares SVG umwandeln

Ein ICO kann mehrere Bitmapgrößen desselben Icons enthalten. Finde die beste Quelle, zeichne echte bearbeitbare SVG-Pfade nach und erkenne, wann Neuzeichnen besser ist.

Auf dieser Seite

Du kannst eine ICO-Datei in ein bearbeitbares SVG umwandeln, solltest aber zuerst verstehen, was du wiederherstellst. Ein ICO ist gewöhnlich ein Container mit Bitmapvarianten desselben Icons in unterschiedlichen Größen und Farbtiefen. Es enthält keine verborgene Vektor-Masterdatei, die nur auf ihre Extraktion wartet. Eine echte Umwandlung wählt das beste eingebettete Bild und zeichnet seine Pixel in neue Pfade nach.

So lässt sich ein sauberes Favicon, App-Symbol oder älteres Oberflächenicon wiederherstellen, wenn die ursprüngliche Designdatei verloren ist. Kurven oder Details, die im größten Bitmap nie vorhanden waren, lassen sich damit nicht wiederherstellen. Suche zuerst das ursprüngliche SVG, AI oder die Quelldatei, wenn möglich. Zeichne das ICO nach, wenn Wiederherstellung der einzige praktikable Weg ist.

Ist die verlorene Quelle eine Mac-.icns-Datei statt eines Windows-.ico, nutze den ICNS-zu-SVG-Konverter, damit vor dem Nachzeichnen der richtige Icon-Container untersucht wird.

Die Regel für die Wiederherstellung
  • Ein ICO kann mehrere Rasterdarstellungen enthalten, keine Vektorobjekte.
  • Beginne mit dem größten gültigen eingebetteten Bild statt mit der kleinsten Favicon-Größe.
  • Zeichne es in echte Pfade nach und teste anschließend Bearbeitbarkeit und Transparenz.
  • Betrachte Subpixel-Kantenglättung als Bildschirmdarstellung, nicht als Designdetail.
  • Zeichne einfache oder für die Marke entscheidende Geometrie neu, wenn das Bitmap zu klein ist, um die ursprünglichen Kurven festzulegen.

Was steckt in einer ICO-Datei?

ICO bündelt Icondarstellungen für unterschiedliche Anzeigegrößen und Möglichkeiten. Microsofts Icon-Dokumentation erklärt, dass eine Icon-Ressource Bilder in mehreren Größen und Farbtiefen enthalten kann. Diese Varianten können leicht abweichen, weil ein Designer Pixel von Hand für bessere Erkennbarkeit bei kleiner Größe angepasst hat.

Daraus entstehen zwei Wiederherstellungsfragen:

  1. Welche Darstellung soll die Quelle werden? Das größte Bild enthält gewöhnlich die meisten geometrischen Informationen.
  2. Welche Unterschiede sind beabsichtigt? Ein winziges Favicon kann dickere Linien, weniger Details oder verschobene Pixel verwenden, damit es klein gut lesbar bleibt. Das sind optische Anpassungen und nicht unbedingt die Form des Master-Icons.

Ein Konverter, der stillschweigend einen beliebigen kleinen Eintrag nachzeichnet, kann dir ein blockiges SVG liefern, obwohl im selben Container ein besseres Bild vorhanden ist. Ein Konverter, der das Bitmap lediglich in ein SVG einbettet, liefert überhaupt keine bearbeitbaren Pfade.

Betrachte die Quellenauswahl als Wiederherstellungsschritt vor dem Nachzeichnen. Beginne mit der Darstellung, die die meisten Kanteninformationen zeigt, und entscheide dann, welche optischen Anpassungen für kleine Größen im wiederhergestellten Design bleiben sollen.

Konzeptionelles Diagramm eines ICO-Containers mit mehreren eingebetteten Icon-Größen, aus dem vor dem Nachzeichnen in bearbeitbare Vektorpfade die größte unterstützte Darstellung gewählt wird
Konzeptionelle Illustration: Prüfe zuerst die ICO-Einträge, wähle die beste unterstützte Quelle und rekonstruiere erst dann Pfade.

Extrahieren, einbetten, nachzeichnen oder neu zeichnen?

Diese Vorgänge werden leicht verwechselt:

VorgangWas passiertBearbeitbare Pfade?Wann er passt
ExtrahierenSpeichert eine eingebettete PNG/DIB-DarstellungNeinDu brauchst nur die beste Rasterkopie
EinbettenSetzt das Bitmap in ein SVG-DokumentNeinFür die Wiederherstellung selten sinnvoll
NachzeichnenRekonstruiert die ausgewählten Pixel als VektorformenJaDas Icon ist klar und der ursprüngliche Vektor verloren
Neu zeichnenBaut die Geometrie bewusst neu aufJaDie Quelle ist winzig, einfach oder für die Marke entscheidend

Führe nach jeder Onlineumwandlung einen schnellen Test durch: Öffne das SVG, zoome hinein und wähle die Grafik aus. Eine einzelne Auswahl in Bildgröße oder blockige Kanten beim Zoomen bedeuten, dass die Pixel eingebettet wurden. Einzelne Formen und Kontrollpunkte bedeuten, dass du ein Nachzeichenergebnis hast.

Die umfassendere Anleitung zur Bildvektorisierung erklärt, warum Nachzeichnen eine Rekonstruktion und kein bloßes Umbenennen des Formats ist.

Wie PerfectVector die ICO-Quelle auswählt

PerfectVector untersucht das ICO-Verzeichnis und die referenzierten Nutzdaten vor dem Dekodieren. Es unterstützt statische PNG-Darstellungen und gängige unkomprimierte Windows-Bitmapdarstellungen. Unter den gültigen unterstützten Einträgen wählt es deterministisch:

  1. die größte Pixelfläche;
  2. bei gleicher Fläche die höhere Bittiefe;
  3. bei gleicher Fläche und Tiefe PNG;
  4. bei weiterem Gleichstand den früheren Eintrag in der Quelle.

Diese Auswahl erfolgt ohne Rückfrage, weil ICO-Einträge Auflösungsvarianten eines Icons sein sollen und keine unterschiedlichen Seiten oder Animationsframes. Die ausgewählte Darstellung wird lokal in ein geprüftes PNG dekodiert und anschließend durch den normalen Vektorisierungsablauf geschickt.

Animierte PNG-Nutzdaten in ICO werden nicht als statische Icons behandelt. CUR-Cursordateien sind ein separates Format mit Hotspot-Koordinaten in ihren Verzeichniseinträgen, wie Microsofts Referenz zu Ressourcendateiformaten dokumentiert. Sie gehören nicht zu diesem Workflow.

Hier hilft PerfectVector bei der Wiederherstellung: Es beginnt mit der besten unterstützten Darstellung, statt dich einen Eintrag erraten zu lassen, und rekonstruiert dieses Einzelbild dann als bearbeitbare SVG-Pfade. Die Auswahl ist deterministisch, aber die Qualitätsgrenze wird weiterhin durch die im ICO gespeicherten Pixel bestimmt.

Das Icon Schritt für Schritt wiederherstellen

1. Suche eine bessere Masterdatei

Prüfe das Website-Repository, App-Ressourcen, Markenordner und alte Designexporte und frage die Person, die das Icon erstellt hat. Ein SVG, AI, EPS, PDF mit echten Pfaden oder sogar ein großes transparentes PNG ist eine bessere Quelle als ein für kleine Bildschirme zusammengestelltes ICO.

2. Sieh dir das ICO in mehreren Größen an

Nutze einen Icon-Betrachter oder ein Datei-Prüfwerkzeug, falls verfügbar. Suche die größte Darstellung und vergleiche sie mit den kleinen. Achte auf verschwindende Details, dicker werdende Linien und Kanten, die sich an das Pixelraster anpassen.

3. Entscheide, wofür das wiederhergestellte SVG gedacht ist

  • Bearbeitbare Masterdatei oder große Darstellung: Orientiere dich an der größten Darstellung und korrigiere anschließend ihre Geometrie.
  • Ein neues Favicon: Erhalte das Design, plane aber neue Exporte für kleine Größen und teste sie einzeln.
  • Druck oder Beschilderung: Fahre nur fort, wenn das größte Bitmap jede wichtige Kurve klar definiert. Zeichne andernfalls neu.
  • Archivextraktion: Speichere das größte eingebettete Rasterbild zusätzlich zum nachgezeichneten SVG.

4. Vektorisiere die beste Darstellung

Lade die Datei im ICO-zu-SVG-Konverter hoch. PerfectVector wählt den größten unterstützten Eintrag, normalisiert ihn und zeichnet das Icon in Pfade nach.

5. Prüfe das SVG als Grafik

Prüfe Silhouette, Löcher, gerade Kanten, wiederholte Eckradien, Symmetrie und Farbbereiche. Lösche gegebenenfalls ein Hintergrundrechteck, das aus einer nicht transparenten Quelle stammt. Öffne die Datei in einem Vektoreditor und bestätige, dass die Formen ausgewählt und umgefärbt werden können.

6. Teste das Icon in großen und kleinen Größen

Starker Zoom zeigt wellige Kurven und zu viele Knoten. Die kleine Darstellung zeigt ein anderes Problem: Eine geometrisch saubere Masterdatei kann bei 16 oder 32 Pixeln trotzdem schwach wirken. Exportiere neue Rastergrößen aus dem SVG und passe diese Ableitungen bei Bedarf an. Verforme nicht die Masterdatei, um jeden alten Pixel nachzuahmen.

Was du nicht unverändert nachzeichnen solltest

Treppenförmige Pixel

Diagonale und gekrümmte Kanten eines kleinen Icons bestehen aus quadratischen Pixeln. Das wiederhergestellte SVG sollte die beabsichtigte Kurve erschließen, statt für jede Stufe ein winziges Quadrat zu zeichnen, sofern die Grafik nicht bewusst Pixelkunst ist.

Kantenglättungssäume

Weiche Randfarben helfen einem Bitmap, auf einem bestimmten Hintergrund glatt auszusehen. Wird jede Saumfarbe zu einer Form, bläht sich das SVG auf und kann auf einem anderen Hintergrund einen Halo zeigen. Rekonstruiere stattdessen die feste Kontur und prüfe die Transparenz.

Optische Anpassungen für kleine Größen

Ein Designer kann für die 16-Pixel-Version einen Strich verdicken oder eine Lücke öffnen. Bilde nicht aus allen Größen einen Mittelwert zu einer uneindeutigen Masterdatei. Beginne mit der größten Darstellung und nutze die kleinen Einträge anschließend als Referenzen für künftige Exporte.

Aufgemalte Schachbrettmuster

Ein Schachbrettmuster im Bild ist keine Transparenz. Ist es im ICO fest eingebaut, wird es als Quadrate nachgezeichnet. Die Anleitung zu transparenten Hintergründen erklärt, wie du echtes Alpha von gemalten Hintergrundpixeln unterscheidest.

Wann manuelles Neuzeichnen besser ist

Zeichne neu, wenn:

  • die größte gültige Darstellung weiterhin winzig ist;
  • Kreise, abgerundete Rechtecke oder Symmetrie exakt sein müssen;
  • Text oder Schriftzüge vorhanden sind;
  • das Icon ein aktuelles Markenzeichen oder Markenasset ist;
  • das Nachzeichnen viele Fragmente für eigentlich wenige einfache Formen erzeugt;
  • du eine Familie einheitlicher Icons statt eines einzelnen wiederhergestellten Objekts brauchst.

Einfache Icons lassen sich häufig schneller mit Rechtecken, Kreisen und Bézierkurven neu aufbauen als nach einer pixelgenauen Nachzeichnung reparieren. Wiederherstellung ist besonders wertvoll, wenn das Zeichen genug unregelmäßige Details hat, damit das Nachzeichnen eine nützliche bearbeitbare Grundlage liefert.

Nutze für Logos die Prüfschritte aus Logo vektorisieren, insbesondere den Rat, das wiederhergestellte SVG als Masterdatei zu behalten und jedes Weitergabeformat daraus zu exportieren.

FAQ

Ist eine ICO-Datei bereits ein Vektor? Nein. Ein ICO enthält normalerweise eine oder mehrere Bitmapdarstellungen eines Icons. Es kann mehrere Größen bündeln, doch diese Bilder bestehen weiterhin aus Pixeln. Ein bearbeitbares SVG erfordert, sie in Pfade nachzuzeichnen oder neu zu zeichnen.

Welches Bild in einem ICO sollte ich vektorisieren? Beginne mit der größten gültigen Darstellung, weil sie gewöhnlich die meisten Forminformationen enthält. Nutze kleinere Einträge als Referenzen für optische Anpassungen bei kleiner Größe, nicht als Masterdatei, wenn eine größere Quelle vorhanden ist.

Warum wird mein ICO-zu-SVG-Ergebnis weiterhin pixelig? Der Konverter hat das Bitmap möglicherweise in eine SVG-Hülle eingebettet, statt Pfade nachzuzeichnen. Öffne die Datei in einem Vektoreditor. Wird das gesamte Icon als ein Bild ausgewählt, ist es weiterhin Rasterinhalt.

Kann die Umwandlung eines ICO das ursprüngliche SVG exakt wiederherstellen? Nein. Sie kann Formen aus den gespeicherten Pixeln rekonstruieren, aber nicht die ursprünglichen Kontrollpunkte, Ebenen oder Details wiederherstellen, die beim Rastern des Icons verloren gingen. Für die Marke entscheidende Arbeiten sollten geprüft oder neu gezeichnet werden.

Wandelt PerfectVector auch CUR-Dateien um? Nein. CUR ähnelt ICO, ergänzt aber die Bedeutung eines Cursor-Hotspots. Der ICO-Wiederherstellungsworkflow nimmt CUR nicht wie ein gewöhnliches Icon an.

Quellen

  1. Microsoft Learn — Über Icons — erklärt Icon-Ressourcen mit mehreren Größen und Farbtiefen.
  2. Microsoft Learn — Ressourcendateiformate — definiert ICO-Bildeinträge, PNG/DIB-Nutzdaten und Cursor-Hotspot-Felder.
  3. Microsoft Learn — Cursor-Ressource — dokumentiert Cursor-Ressourcen und Hotspot-Koordinaten.
  4. PerfectVector — ICO-zu-SVG-Konverter — beschreibt den aktuellen Produktablauf für Quellenauswahl und Nachzeichnen.

Ist die ursprüngliche Designdatei wirklich verloren, lade das ICO hoch und stelle seine beste Darstellung als SVG-Pfade wieder her. Prüfe dann Silhouette, Transparenz, wiederholte Geometrie und Exporte für kleine Größen. Behalte das Ergebnis erst als neue bearbeitbare Masterdatei, wenn diese Prüfungen bestanden sind.

Mehr aus dem Blog

Verwandle deine Bilddatei in eine
bearbeitbare SVG