Welche Größen werden erzeugt?

16×16, 32×32, 48×48 (in favicon.ico gebündelt), 180×180 (Apple Touch Icon), 192×192 und 512×512 (PWA-Icons).

Bleibt die Transparenz erhalten?

Ja. Der Alphakanal des PNG bleibt in allen Ausgabedateien erhalten, auch im ICO-Format.

Was ist der Unterschied zwischen favicon.ico und PNG-Icons?

favicon.ico bündelt mehrere Größen in einer Datei für die Unterstützung älterer Browser, während PNG-Icons von modernen Browsern und PWAs verwendet werden. Beides bereitzustellen sorgt für maximale Kompatibilität.

Was macht ein gutes Quellbild aus?

Ein quadratisches PNG mit transparentem Hintergrund und mindestens 512×512 Pixeln liefert die besten Ergebnisse beim Verkleinern auf kleinere Icon-Größen.

Wie füge ich das Favicon meiner Website hinzu?

Füge <link rel="icon" href="/favicon.ico"> und <link rel="apple-touch-icon" href="/apple-touch-icon.png"> in den <head> deines HTML ein.

ImageStream

FLEXEAM · MEMETALKMehr als Worte. Mehr wie du.Nicht erklären. Einfach mitmachen.Ohne Anmeldung entdecken →AD

Favicon-Generator

PNG in favicon.ico und Multi-Size-Paket umwandeln

Ein Favicon ist das kleine Symbol in Browser-Tabs, Lesezeichen und auf dem Startbildschirm von Mobilgeräten. Lade ein PNG hoch und erzeuge sofort ein vollständiges Icon-Paket in mehreren Größen, das mit allen Browsern und Geräten kompatibel ist.

So erzeugst du ein Favicon

1Lade ein PNG-Bild hoch (transparenter Hintergrund empfohlen)
2Wähle die benötigten Icon-Größen aus
3Lade das ZIP-Paket herunter und füge es deiner Website hinzu

Tipps & Anwendungsfälle für Favicons

Website – Kompatibilität über alle Browser

Für die korrekte Darstellung in Chrome, Safari, Firefox und Edge stelle sowohl favicon.ico als auch PNG-Dateien bereit. Lade alle Dateien aus dem erzeugten ZIP in das Stammverzeichnis deiner Website hoch und füge die passenden Link-Tags in den HTML-Head ein.

PWA / Startbildschirm auf dem Handy

Für Progressive Web Apps und Startbildschirm-Verknüpfungen brauchst du PNGs in 192×192 und 512×512. Trage beide Größen im icons-Array deiner manifest.json ein, um hochauflösende Icons unter Android und iOS anzuzeigen.

Markenidentität – das Logo als Icon

Schneide vor der Umwandlung in ein Favicon nur das Symbol oder Zeichen deines Logos in ein quadratisches PNG zu. Halte das Design einfach – es sollte auch bei 16×16 Pixeln erkennbar sein.