Wird noch eine .ico-Datei benötigt?

Moderne Browser akzeptieren PNG-Favicons über die hier bereitgestellten Link-Tags, daher ist eine .ico-Datei in der Regel optional. Die 16- und 32-Pixel-PNGs decken Tab-Icons ab.

Welche Größen werden erstellt?

16, 32 und 48 für Browser, 180 für Apple-Touch-Icons sowie 192 und 512 für Android und Progressive Web Apps.

Kann die Transparenz beibehalten werden?

Ja. Den transparenten Hintergrund auswählen, dann behalten die PNGs ihren Alphakanal. Weiß wählen, um auf einem einfarbigen Hintergrund zu glätten.

Wie werden sie zur Website hinzugefügt?

Die heruntergeladenen Dateien ins Stammverzeichnis legen und das HTML-Snippet in den Head der Seiten einfügen, bei PWAs zusätzlich das Manifest.

Wird das Bild an einen Server gesendet?

Nein. Das Bild wird vollständig im Browser verarbeitet und verlässt das Gerät nie.

Favicon-Generator

Bild auswählen

Ein quadratisches Bild erzielt die besten Ergebnisse. PNG, JPG, SVG und WebP werden unterstützt.

Hintergrund

So wird es verwendet

Bild auswählen — ein quadratisches Logo oder Icon liefert das beste Ergebnis.
Transparenten oder weißen Hintergrund für die Icons wählen.
Jede PNG-Größe herunterladen und das HTML- und Manifest-Snippet in die Website einfügen.

Funktionsweise

Das Bild wird auf einem Canvas in jeder benötigten Größe gezeichnet — 16 und 32 Pixel für Browser-Tabs, 48 für Windows, 180 für Apple-Touch-Icons und 192 und 512 für Android und PWAs. Durch die Verkleinerung aus einer großen, quadratischen Quelle bleiben die Icons gestochen scharf. Das HTML-Snippet teilt dem Browser mit, wo er jede Datei findet.

Funktionen

Alle benötigten Größen

Generiert den vollständigen Satz — 16, 32, 48, 180, 192 und 512 Pixel — in einem Schritt.

Browser, Apple & Android

Umfasst apple-touch-icon und Android/PWA-Icons, nicht nur das klassische Tab-Favicon.

Fertige Snippets

HTML-Link-Tags und ein minimales site.webmanifest kopieren — einfügen und fertig.

Transparent oder weiß

Transparenz beibehalten oder auf weißem Hintergrund glätten, je nach Anforderung.

Vollständig lokal

Bilder werden im Browser verarbeitet und nie an einen Server gesendet.

Einsatzgebiete

Neue Website

Beim Launch einer Website ein ansprechendes Favicon hinzufügen, damit sie in Browser-Tabs vollständig wirkt.

PWA-Icons

Die 192- und 512-Pixel-Icons generieren, die eine Progressive Web App für den Startbildschirm benötigt.

Rebranding

Bei einem Markenwechsel das neue Logo auf einmal in allen Favicon-Größen austauschen.

Blog oder Portfolio

Einer persönlichen Website ein wiedererkennbares Icon geben, das zwischen offenen Tabs auffällt.

Hinweise

Ein quadratisches Quellbild verhindert Verzerrungen; nicht-quadratische Bilder werden mit Polsterung zentriert.
Transparente Hintergründe bleiben in der PNG-Ausgabe erhalten.
Die heruntergeladenen Dateien im Stammverzeichnis der Website ablegen und das Snippet im Seiten-Head einfügen.
Die gesamte Verarbeitung läuft auf deinem Gerät; das Bild wird nie hochgeladen.

Häufige Fragen

Wird noch eine .ico-Datei benötigt?: Moderne Browser akzeptieren PNG-Favicons über die hier bereitgestellten Link-Tags, daher ist eine .ico-Datei in der Regel optional. Die 16- und 32-Pixel-PNGs decken Tab-Icons ab.
Welche Größen werden erstellt?: 16, 32 und 48 für Browser, 180 für Apple-Touch-Icons sowie 192 und 512 für Android und Progressive Web Apps.
Kann die Transparenz beibehalten werden?: Ja. Den transparenten Hintergrund auswählen, dann behalten die PNGs ihren Alphakanal. Weiß wählen, um auf einem einfarbigen Hintergrund zu glätten.
Wie werden sie zur Website hinzugefügt?: Die heruntergeladenen Dateien ins Stammverzeichnis legen und das HTML-Snippet in den Head der Seiten einfügen, bei PWAs zusätzlich das Manifest.
Wird das Bild an einen Server gesendet?: Nein. Das Bild wird vollständig im Browser verarbeitet und verlässt das Gerät nie.