Favicon-Generator

Ein Favicon aus jedem Bild erstellen

Ein Favicon ist das kleine Symbol, das in Browser-Tabs, Lesezeichen und auf den Startbildschirmen von Smartphones angezeigt wird. Dieser Generator nimmt ein quadratisches Bild und erzeugt scharfe PNG-Icons in allen Größen, die moderne Websites benötigen – vom 16×16-Tab-Icon bis zum 512×512-Icon für Progressive Web Apps – vollständig in Ihrem Browser.

Legen Sie ein Logo ab, und Sie sehen eine Live-Vorschau jeder Größe, die Sie einzeln herunterladen können. Wir erzeugen außerdem die passenden <link>-Tags zum Einfügen in den <head> Ihrer Seite, sodass die Einbindung Ihres Favicons nur Sekunden dauert.

Tipps für scharfe Icons

Beginnen Sie mit einem quadratischen Bild von mindestens 512×512 Pixeln. Kräftige, einfache Formen mit starkem Kontrast bleiben auch bei 16 Pixeln erkennbar, während feine Details und kleiner Text zu Matsch werden. Testen Sie die 16×16-Vorschau – wenn Sie noch erkennen, was es ist, haben Sie ein tolles Favicon.

Welche Größe wo verwendet wird

• 16×16 und 32×32 — Browser-Tabs, Lesezeichen und Adressleisten.
• 48×48 und 64×64 — Desktop-Verknüpfungen sowie einige Symbole in Suchergebnissen und Seitenlisten.
• 128×128 — größere Store- und Erweiterungs-Einträge.
• 180×180 — das Apple Touch Icon, das verwendet wird, wenn eine Seite zum Home-Bildschirm eines iPhones oder iPads hinzugefügt wird.
• 192×192 und 512×512 — Android-Startbildschirm- und Progressive-Web-App-Icons, die in einem Web-App-Manifest aufgeführt werden.

Gut zu wissen

Jedes Bild wird direkt auf ein Quadrat skaliert, verwenden Sie daher eine quadratische Quelle; ein rechteckiges Logo würde verzerrt. Transparenz bleibt in den PNG-Dateien erhalten, doch iOS stellt transparente Touch-Icons nicht gut dar, daher ist ein einfarbiger Hintergrund für die 180×180-Version die sicherere Wahl. Die Dateien heißen z. B. favicon-32x32.png, passend zum generierten Snippet. Behalten Sie diese Namen daher bei, wenn Sie sie in das Stammverzeichnis Ihrer Website kopieren. Diese Seite erzeugt nur PNG-Dateien; wenn Sie zusätzlich ein klassisches favicon.ico möchten, erstellen Sie eines aus Ihrem Quellbild mit dem PNG-zu-ICO-Konverter.

Die Icons in Ihre Website einbinden

Laden Sie die benötigten Größen herunter, legen Sie sie im öffentlichen Stammverzeichnis Ihrer Website ab und fügen Sie die generierten <link>-Tags in den <head> ein. Wenn Sie ein Web-App-Manifest erstellen, verweisen Sie dessen Icon-Liste auf die 192×192- und 512×512-Dateien. Nach der Veröffentlichung können Suchmaschinen und Browser einige Zeit brauchen, um ein zwischengespeichertes Favicon zu aktualisieren. Testen Sie daher in einem privaten Fenster und machen Sie sich keine Sorgen, wenn das alte Symbol noch ein oder zwei Tage angezeigt wird.