So wandelst du PNG in ICO um
- Basislager
Wähle ein PNG aus – am besten quadratisch, mindestens 256 × 256 Pixel groß und mit transparentem Hintergrund. JPG, WebP und SVG funktionieren auch.
- Lager 1
Setz ein Häkchen bei den Icon-Größen, die du brauchst. Für ein Website-Favicon reichen 16, 32 und 48 Pixel. Für Windows-Programme nimm 256 dazu.
- Gipfel
Lade die .ico-Datei herunter und leg sie als favicon.ico ins Hauptverzeichnis deiner Website – oder verwende sie in deiner App.
PNG und ICO im Vergleich
| PNG | ICO | |
|---|---|---|
| Inhalt | Ein Bild | Mehrere Größen desselben Icons |
| Transparenz | Ja | Ja |
| Verwendung | Für alles | Favicons, Windows-Icons |
| Maximale Größe | Unbegrenzt | 256 × 256 pro Bild |
| Als Favicon im Browser | In modernen Browsern | In allen Browsern, auch sehr alten |
Eine ICO-Datei ist ein kleiner Container, der mehrere Versionen desselben Icons bündelt. Windows und Browser suchen sich jeweils die passende Größe aus: 16 × 16 für den Browser-Tab, 32 × 32 für die Taskleiste, 48 × 48 für Desktop-Verknüpfungen und 256 × 256 für große Symbolansichten. Stecken alle Größen in einer Datei, sieht das Icon überall scharf aus, statt aus einer einzigen Größe hoch- oder heruntergerechnet zu werden.
Jedes Bild in den hier erstellten ICO-Dateien wird als PNG gespeichert. Das unterstützen Windows Vista und alle neueren Versionen sowie alle aktuellen Browser. So bleibt die Datei klein, und transparente Kanten bleiben schön weich.
Brauche ich noch eine favicon.ico?
Moderne Browser können ein PNG- oder SVG-Favicon verwenden, das du im HTML angibst. Viele fragen aber trotzdem automatisch /favicon.ico ab, und manche Tools, RSS-Reader und Lesezeichendienste suchen nur dort. Liegt eine kleine ICO-Datei mit 16, 32 und 48 Pixeln im Hauptverzeichnis deiner Website, tauchen in deinen Server-Logs keine Fehler wegen fehlender Icons mehr auf, und das Favicon funktioniert in jedem Browser.
Häufige Fragen
Findet die Umwandlung auf meinem Gerät statt?
Ja. Dein Browser zeichnet das Icon und packt es in eine ICO-Datei. Dein Bild wird nicht hochgeladen.
Mein Bild ist nicht quadratisch. Was passiert dann?
Es wird so skaliert, dass es ins Quadrat passt, und mittig platziert; der Rand drumherum bleibt transparent. Nichts wird abgeschnitten oder verzerrt.
Welche Größen brauche ich?
Für ein Website-Favicon: 16, 32 und 48. Für ein Windows-Programm oder das Icon einer Verknüpfung: 16, 32, 48 und 256. Mehr Größen machen die Datei größer, verursachen aber selten Probleme.
Wie binde ich das Favicon in meine Website ein?
Lade die Datei als favicon.ico in das oberste Verzeichnis deiner Website hoch, sodass sie unter deine-website.de/favicon.ico erreichbar ist. Optional fügst du <link rel="icon" href="/favicon.ico" sizes="any"> in den <head> deiner Seiten ein.
Warum sieht mein Icon bei 16 × 16 unscharf aus?
Kleine Größen haben nur sehr wenige Pixel, deshalb verschwinden feine Details und dünne Linien. Am besten funktionieren einfache, kräftige Formen. Manche Designer zeichnen für die kleinste Größe eigens eine vereinfachte Version.
Passende Ratgeber
- So erstellst du ein Favicon für deine WebsiteWelche Icon-Größen du brauchst, ICO, PNG oder SVG – und der HTML-Code für deine Website.
Passende Tools
ICO → PNG
PNG-Bilder aus Favicons und Windows-Icons holen – in allen enthaltenen Größen.PNG → JPG
Große PNG-Fotos und Screenshots zu kompakten JPGs verkleinern.PNG → WEBP
PNG-Bilder für Websites deutlich verkleinern – mit Transparenz.PNG → PDF
Screenshots und Grafiken in der gewünschten Reihenfolge zu einer scharfen PDF zusammenfügen.WEBP → PNG
WebP-Bilder verlustfrei in PNG umwandeln – die Transparenz bleibt erhalten.WEBP → JPG
WebP-Bilder als JPG-Fotos speichern, die sich überall öffnen lassen.