PNG in ICO (Favicon) umwandeln

Ein Favicon ist das kleine Symbol, das Browser im Tab, in der Lesezeichenleiste und im Verlauf anzeigen. Dieses Tool macht aus einem PNG eine richtige .ico-Datei in mehreren Größen mit 16-, 32-, 48- und 64-Pixel-Versionen, vollständig auf deinem Gerät erstellt, ohne Upload.

So wandelst du PNG in ICO um

Lege dein PNG-Bild im Tool unten ab. Ein quadratisches Bild funktioniert am besten.
Das Ausgabeformat ist bereits auf ICO (Favicon) gesetzt.
Klicke auf Starten, um eine .ico in mehreren Größen zu erzeugen.
Lade deine favicon.ico herunter und lege sie ins Stammverzeichnis deiner Website.

Was ein Favicon leisten muss

Ein Favicon wird in sehr kleinen Größen angezeigt, oft 16 Pixel im Quadrat. In dieser Größe verschwinden feine Details, und dünne Linien lösen sich ganz auf. Ein gutes Favicon ist eine kräftige, einfache Form mit starkem Kontrast: ein einzelner Buchstabe, eine vereinfachte Version einer Bildmarke oder eine Vollform in der Markenfarbe. Wenn dein vollständiges Logo eine Wortmarke hat, nimm nur das Symbol oder nur den ersten Buchstaben.

Der Grund, warum .ico-Dateien mehrere Größen enthalten, ist, dass das Skalieren eines einzelnen Bildes beim Anzeigen unscharf aussieht. Mit 16-, 32-, 48- und 64-Pixel-Versionen kann das Betriebssystem oder der Browser in jedem Kontext ein pixelgenaues Bild zeigen: 16 px in einem Tab, 32 px in einer Lesezeichenliste auf einem High-DPI-Bildschirm, 48 px in einer Windows-Taskleisten-Verknüpfung und so weiter.

Das Quell-PNG vorbereiten

Mach es quadratisch. Wenn dein Logo breit ist, setze es zuerst auf eine quadratische transparente Fläche, oder schneide mit dem Zuschneide-Tool auf das Symbol zu.
Starte mit 256 Pixeln oder größer. Das Verkleinern aus einer großen, sauberen Quelle gibt glattere Ergebnisse als das Vergrößern einer kleinen.
Behalte einen transparenten Hintergrund, wenn die Form kompakt ist, damit sie auf hellen und dunklen Browser-Designs gut sitzt. Wenn die Form dünn oder hell ist, setze sie stattdessen auf ein einfarbiges abgerundetes Quadrat.
Vermeide Text länger als ein oder zwei Zeichen; er wird bei 16 Pixeln unlesbar.

Das Favicon installieren

Speichere die heruntergeladene Datei als favicon.ico und lege sie ins Stammverzeichnis deiner Website. Füge dann dies im <head> jeder Seite ein:

<link rel="icon" href="/de/favicon.ico" sizes="any">

Die meisten Plattformen haben stattdessen eine eigene Einstellung: WordPress nennt es Website-Icon unter Design, Shopify und Squarespace haben ein Favicon-Feld in den Theme-Einstellungen, und Webflow hat eines in den Projekteinstellungen. Lade die .ico dort hoch.

Weiter gehen

Für den vollständigen Satz an Icons, den moderne Geräte verlangen, brauchst du außerdem ein 180-Pixel-PNG für iOS-Startbildschirm-Verknüpfungen (apple-touch-icon) und 192- und 512-Pixel-PNGs für Android und das Web-App-Manifest. Das sind einfache PNG-Dateien, nimm also das Tool zur Größenänderung, um sie aus demselben Master zu erzeugen. Die .ico von dieser Seite deckt Browser-Tabs, Lesezeichen und Windows ab, wo den meisten ein fehlendes Favicon auffällt.

Häufig gestellte Fragen

Welche Größe sollte mein Ausgangs-PNG haben?

Quadratisch, und mindestens 64 mal 64 Pixel. Ein 256-Pixel-Quadrat-PNG gibt die saubersten verkleinerten Ergebnisse. Nicht quadratische Bilder werden zentriert und mit Transparenz aufgefüllt.

Was ist in der .ico-Datei enthalten?

Vier PNG-kodierte Bilder mit 16, 32, 48 und 64 Pixeln. Browser und Windows wählen die Größe, die am besten zum Kontext passt, sodass das Icon in einem Tab, einem Lesezeichen und einer Desktop-Verknüpfung scharf aussieht.

Wie füge ich das Favicon zu meiner Website hinzu?

Lade favicon.ico ins Stammverzeichnis deiner Website hoch (sodass es unter deineseite.de/favicon.ico erreichbar ist) und füge <link rel="icon" href="/favicon.ico"> im <head> deiner Seiten ein. Browser cachen Favicons aggressiv, ein Hard-Refresh kann nötig sein, um die Änderung zu sehen.

Brauche ich 2026 noch eine .ico-Datei?

Moderne Browser akzeptieren PNG- und SVG-Favicons, aber .ico ist das eine Format, das überall funktioniert, auch in älteren Browsern, Windows-Verknüpfungen und manchen Feedreadern. Die meisten Websites liefern beides.

Deine Dateien verlassen nie dein Gerät

Jedes Tool auf Squishly Tools ist 100 % kostenlos und läuft vollständig in deinem Browser. Deine Bilder und Dokumente werden auf deinem eigenen Computer verarbeitet und nie auf einen Server hochgeladen. Keine Konten, keine Wasserzeichen, kein Haken.