Command Palette

Search for a command to run...

PN

PNG-zu-ICO-Konverter

PNG-Bilder im Browser stapelweise in ICO-Favicons umwandeln

GesponsertDer Hoster hinter Toolz.devHostinger Partner
Starten Sie Ihre Website mit Hostinger
  • Kostenlose Domain
  • Kostenloses SSL
  • 30 Tage Geld-zurück-Garantie
4.6 auf Trustpilot aus über 73.000 Bewertungen
Angebot sichern Gutscheincode

Was ist ein PNG-zu-ICO-Konverter?

Ein PNG-zu-ICO-Konverter packt quadratische Kopien eines PNG-Bildes, jeweils eine pro gewünschter Größe, in eine einzige .ico-Datei. Genau das machen die meisten beim ersten Versuch falsch: Eine .ico-Datei ist kein einzelnes Bild mit ungewöhnlicher Dateiendung, sondern ein kleiner Container mit einem Verzeichnis am Anfang, das jedes enthaltene Bild auflistet und angibt, wo es beginnt. Alles, was die Datei liest (ein Browser, der einen Tab darstellt, oder ein Desktop, der eine Verknüpfung anzeigt), sieht in dieses Verzeichnis und nimmt den Eintrag, der der benötigten Größe am nächsten kommt.

Diese Seite schreibt vier Größen, die beim Aufruf alle angekreuzt sind: 16, 32, 48 und 256 Pixel. Jedes angekreuzte Kästchen wird zu einem quadratischen Bild in der .ico-Datei, gespeichert als PNG-komprimiertes Bild mit erhaltenem Alphakanal, und die Größen werden von der kleinsten zur größten geschrieben. Entfernen Sie das Häkchen bei den Größen, die Sie nicht brauchen, und die Datei wird kleiner. Entfernen Sie alle vier Häkchen, schreibt der Konverter trotzdem wieder alle vier, denn ein leeres Icon ist keine brauchbare Datei. Die Obergrenze von 256 liegt am Format und nicht am Tool: Ein ICO-Verzeichniseintrag speichert seine Breite in einem einzigen Byte. Deshalb ist 256 das größte Bild, das eine .ico-Datei enthalten kann, und wird als Sonderwert null gespeichert.

Beginnen Sie mit einem quadratischen PNG, das mindestens so groß ist wie die größte angekreuzte Größe. Der Konverter skaliert Ihr Bild auf jedes Quadrat herunter, und Verkleinern ist die Richtung, die gut aussieht. Nehmen Sie eine Quelle mit 64 px und kreuzen 256 an, ist der 256er-Eintrag ein auf das Vierfache vergrößertes 64-px-Bild, das weich und fleckig wirkt, und das ausgerechnet in der Größe, die ein hochauflösender Bildschirm zeigt. Ein Export mit 512x512 aus Ihrem Designprogramm deckt jeden Fall mit Reserve ab.

Ein nicht quadratisches Logo ist das andere häufige Problem. Der Konverter dehnt das Bild so, dass es jedes Quadrat füllt, statt es überstehen zu lassen oder einen Ausschnitt zu erraten, und er weist darauf hin: Laden Sie eine Wortmarke mit 1024x256 hoch, lautet die Zeile: "Das Bild war 1024x256 und wurde daher auf Quadrate von 16, 32, 48, 256 px gedehnt." Eine gedehnte Wortmarke ist bei 16 px ohnehin nicht lesbar. Die Lösung ist, vor der Konvertierung zu entscheiden, was die kleinen Größen zeigen sollen, nicht danach. Meist heißt das, nur das Symbol zuzuschneiden oder die Wortmarke auf eine quadratische Fläche mit transparenten Rändern zu setzen, sodass sie ihre Proportionen behält und im Icon einfach kleiner erscheint.

Hier ein kompletter Durchlauf. Nehmen Sie eine Datei namens logo.png mit 512x512, lassen Sie alle vier Kästchen angekreuzt und legen Sie sie ab. Sie wird sofort konvertiert: Die Zeile zeigt die Eingabegröße, einen Pfeil, die Ausgabegröße und die Größenänderung, darunter den Hinweis "Enthält Icons mit 16, 32, 48, 256 px.", und das Download-Symbol in der Zeile speichert logo.ico. Entfernen Sie das Häkchen bei 256, wird die Datei von selbst erneut konvertiert: Dieselbe Quelle ergibt nun eine deutlich kleinere Datei mit drei Bildern, denn der 256-px-Eintrag machte den größten Teil des Gewichts aus. Legen Sie acht Marken-PNGs gemeinsam ab, schreibt "Alle herunterladen (8 Bilder)" die Datei converted-ico.zip mit allen .ico-Dateien darin und nummeriert doppelte Namen, statt sie zu überschreiben.

Alles läuft clientseitig. Ihr Browser dekodiert das PNG, zeichnet es in jeder angeforderten Größe auf eine Canvas-Fläche, kodiert jedes Quadrat als PNG und setzt die .ico-Datei im Arbeitsspeicher zusammen. Die Grafik verlässt also nie Ihr Gerät, und die Seite funktioniert nach dem Laden auch ohne Netzwerkverbindung weiter. Transparenz bleibt in jeder Größe erhalten, und hinter ihr wird nichts aufgefüllt. Metadaten und Farbprofile der Quelldatei gehen im Canvas-Schritt verloren. Bilder mit mehr als 100 Megapixeln werden mit einer Meldung abgelehnt, leere Dateien ebenfalls, eine Obergrenze für die Dateigröße in Byte gibt es nicht, und das Tool ist kostenlos und ohne Anmeldung nutzbar, mit einem Tageslimit für Konvertierungen.

So wandeln Sie PNG in ICO um

  1. PNG-Dateien hinzufügen

    Ziehen Sie PNG-Bilder auf das Feld mit der Aufschrift "PNG-Bilder hier ablegen oder zum Hochladen klicken" oder klicken Sie darauf, um sie auszuwählen. Jede Datei wird konvertiert, sobald sie hinzugefügt wurde. Eine quadratische Quelle mit mindestens 256 px liefert in jeder Icon-Größe das beste Ergebnis.

  2. Icon-Größen auswählen

    Kreuzen Sie unter Icon-Größen die Quadrate an, die in der .ico-Datei enthalten sein sollen: 16 px, 32 px, 48 px und 256 px sind standardmäßig alle angekreuzt. Jedes angekreuzte Kästchen fügt der Datei ein Bild hinzu, und wenn Sie ein Kästchen an- oder abwählen, werden alle hinzugefügten Dateien erneut konvertiert.

  3. Jedes Ergebnis prüfen

    Jede Zeile zeigt eine Vorschau, den Status, eine Größenzeile mit der Größenänderung und einen Hinweis mit den geschriebenen Größen. Musste ein nicht quadratisches Bild in Quadrate gedehnt werden, erscheinen zusätzlich eine Warnung und die tatsächlichen Abmessungen. Klicken Sie auf die Vorschau, um das Icon groß zu sehen und Vorher und Nachher zu vergleichen.

  4. Icon herunterladen

    Klicken Sie in einer Zeile auf das Download-Symbol, um eine einzelne Datei zu speichern, oder in der Listenkopfzeile auf "Alle herunterladen (n Bilder)". Dadurch wird converted-ico.zip mit dem gesamten Stapel gespeichert.

Warum PNG in ICO umwandeln?

Heute akzeptieren viele Stellen ein einfaches PNG als Icon, daher ist die Frage berechtigt, warum sich der ältere Container noch lohnt. Drei Aufgaben erfordern weiterhin eine echte .ico-Datei.

Eine favicon.ico im Stammverzeichnis der Website

Browser und viele andere Tools, die Website-Icons anzeigen, suchen nach /favicon.ico, wenn eine Seite kein Icon angibt. Eine einzige .ico-Datei unter dieser Adresse bedient sie alle, und weil sie mehrere Größen enthält, sieht sie in einem Tab, in der Lesezeichenleiste und in einer angehefteten Verknüpfung gleichermaßen gut aus.

Windows-Verknüpfungen, Ordner und Installationsprogramme

Windows liest .ico-Dateien für Verknüpfungssymbole, benutzerdefinierte Ordnersymbole und das in eine Anwendung eingebettete Symbol. Es wählt den Eintrag, der zur jeweiligen Ansicht passt, sodass dieselbe Datei die kleine Listenansicht und die Ansicht mit extragroßen Symbolen bedient. Ein einzelnes PNG kann das nicht.

Transparenz aus Ihrem Design-Export beibehalten

Logos aus einem Designprogramm werden meist als PNG mit transparentem Hintergrund exportiert, und das ist der richtige Ausgangspunkt. Jede hier geschriebene Größe wird als PNG im Container gespeichert, sodass der durchsichtige Hintergrund bei 16 px und 256 px gleichermaßen erhalten bleibt. Gehen Sie stattdessen von einem Foto aus? Dafür gibt es den JPG-zu-ICO-Konverter, allerdings bringt ein JPG keine Transparenz mit.

PNG oder ICO: was wann verwenden

PNG und ICO als Icon-Formate im Vergleich
MerkmalPNGICO
Was die Datei enthältEin Bild.Mehrere quadratische Bilder, eines pro Größe, mit einem Verzeichnis, das sie auflistet.
KomprimierungVerlustfrei.Hängt vom jeweiligen Eintrag ab. Diese Seite speichert jeden Eintrag als verlustfreies PNG.
TransparenzVoller Alphakanal.Voller Alphakanal bei 32-Bit- und PNG-Einträgen, und genau das schreibt diese Seite.
AnimationNicht im Standard-PNG.Nein.
Größtes BildWeit mehr, als ein Icon je braucht.256 x 256 Pixel pro Eintrag.
Typische DateigrößeKlein bei einem einzelnen Bild in Icon-Größe.Größer, da sie jede Größe enthält. Der 256-px-Eintrag macht den größten Teil des Gewichts aus.
Unterstützung in Browsern und SoftwareJeder Browser und Editor. Von aktuellen Browsern als Favicon akzeptiert.Jeder Browser als Favicon sowie Windows für Verknüpfungs- und Anwendungssymbole.
Am besten geeignet fürGrafiken, Webbilder und Icons, die über ein Link-Tag eingebunden werden.favicon.ico, Windows-Symbole und überall dort, wo eine Datei mehrere Größen abdecken muss.

Favicon-Größen erklärt

Jede Größe in der .ico-Datei gibt es, weil irgendetwas ein Icon in ungefähr dieser Größe darstellt. Welches Programm welchen Eintrag verwendet, hängt vom Browser, vom Betriebssystem und von der Skalierung der Anzeige ab. Verstehen Sie die Liste unten daher als den Normalfall und nicht als feste Regel.

Wo die einzelnen ICO-Größen üblicherweise verwendet werden
GrößeÜblicherweise verwendet für
16 pxBrowser-Tabs, die Adressleiste und Lesezeichenlisten auf Standardbildschirmen.
32 pxBrowser-Tabs auf hochauflösenden Bildschirmen sowie Taskleisten- und Verknüpfungssymbole in Windows.
48 pxDesktop-Verknüpfungen und mittelgroße Symbolansichten in Windows.
256 pxGroße und extragroße Symbolansichten sowie Bildschirme mit sehr hoher Pixeldichte.

Die kleinen Einträge sind am wichtigsten, denn sie sieht man den ganzen Tag, und bei ihnen gehen die Details zuerst verloren. Ein Logo mit Wortmarke, dünner Kontur oder Slogan braucht für 16 und 32 px meist eine einfachere Version: nur das Symbol, mit Strichen, die dick genug sind, um auch bei wenigen Pixeln Breite sichtbar zu bleiben.

Touch-Icons für Smartphones sind eine separate Datei. Eine Verknüpfung auf dem iPhone-Home-Bildschirm verwendet zum Beispiel ein größeres PNG, das mit einem eigenen Link-Tag eingebunden wird, und eine .ico-Datei ersetzt es nicht.

Datenschutz und Sicherheit

  • Größenänderung und Zusammenpacken laufen clientseitig mit der Canvas-API des Browsers. Das PNG und die fertige .ico-Datei verlassen diesen Tab nie.
  • Ein unveröffentlichtes Logo oder Markenzeichen lässt sich umwandeln, ohne es an einen Drittanbieter weiterzugeben.
  • Die tägliche Nutzungsprüfung sendet die Anzahl der Dateien, die Gesamtgröße in Bytes und das Zielformat. Dateinamen und Bildpixel sind nicht enthalten.
  • Metadaten und Farbprofile aus dem PNG werden nicht in die Symboleinträge übernommen.
  • Fertige Symbole bleiben im Speicher, bis Sie sie entfernen, auf „Alle löschen“ klicken oder den Tab schließen. Auf einem Server wird keine Kopie gespeichert.

Wichtige Funktionen

  • Vier Symbolgrößen in einer Datei

    16, 32, 48 und 256 px, jeweils als eigenes Bild in der .ico-Datei. Haken Sie nur die gewünschten Größen an, die übrigen werden weggelassen

  • PNG-komprimierte Einträge mit Alphakanal

    Jedes Quadrat wird als 32-Bit-PNG im Container gespeichert. So bleibt ein transparentes Logo in jeder Größe transparent, und es wird kein Hintergrund dahinter gezeichnet

  • Warnt bei nicht quadratischen Vorlagen

    Eine Wortmarke oder ein Banner wird auf die Quadrate gestreckt, und die Zeile nennt Ihnen die Originalmaße. So können Sie zurückgehen und zuschneiden oder Rand auffüllen, statt ein gestauchtes Symbol auszuliefern

  • Stapelkonvertierung mit ZIP

    Fügen Sie einen ganzen Satz Marken-PNGs auf einmal hinzu und laden Sie sie als converted-ico.zip herunter. Doppelte Dateinamen werden nummeriert statt überschrieben

Häufig gestellte Fragen

Ziehen Sie das PNG auf das Feld auf dieser Seite und laden Sie die .ico-Datei aus der zugehörigen Zeile herunter, sobald dort „Fertig“ steht. Bleiben die Kästchen bei den Symbolgrößen angehakt, zeichnet Ihr Browser das Bild in jeder Größe und erstellt die .ico-Datei lokal, sobald die Datei hinzugefügt wird. Eine Schaltfläche müssen Sie dafür nicht drücken. Es wird nichts installiert und nichts hochgeladen.

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

png to icopng to ico filepng to ico converterconvert png to icopng to ico generatorchange png to icopng to ico formatconvert png to favicon icohow to convert png to icohow to save png as icofree online png to ico converter