Was ist Favicon-Generator?

Dieser Favicon-Generator erstellt alle Größen, die Ihre Website braucht — aus einem hochgeladenen Bild, getippten Initialen oder einem Emoji. Wählen Sie eine Quelle und erhalten Sie ICO-Dateien mit 16×16, 32×32 und 48×48 Pixeln, ein skalierbares SVG sowie PNG-Versionen für Apple-Touch-Icons und Android-Startbildschirme, fertig zum Einbinden in Ihr Projekt.

Starten Sie mit einem Bild, tippen Sie ein bis drei Buchstaben mit Schrift und Form, oder wählen Sie ein Emoji — dann rendert das Tool sechs PNGs (16, 32, 48, 180, 192, 512 Pixel), ein scharfes SVG und ein Multi-Resolution-ICO mit den drei kleinen Größen, die Windows-Tabs nach wie vor erwarten. Alles steckt in einem ZIP mit site.webmanifest und genau den Link-Tags, die Sie in den Head einfügen können. Eine quadratische SVG- oder PNG-Quelle liefert die sauberste Skalierung.

Anleitung

1. Wählen Sie eine Quelle: Laden Sie ein quadratisches Bild hoch (PNG, JPG oder SVG, idealerweise 512×512 oder größer), tippen Sie Initialen mit Schrift und Form, oder wählen Sie ein Emoji.
2. Sehen Sie sich die Vorschau der generierten Favicons in allen Standardgroessen an (16px, 32px, 48px, 180px, 192px, 512px).
3. Laden Sie das komplette Favicon-Paket als ZIP-Datei herunter — inklusive ICO-Datei, allen PNG-Groessen und den HTML-Link-Tags zum Einfuegen in den Head-Bereich Ihrer Seite.

Wann verwenden

• Tab- und Startbildschirm-Icons für eine neue Website oder Web-App hinzufügen.
• Die Markenidentität auf einer bestehenden Seite nach einem Logo-Redesign erneuern.
• PWA-Icons erzeugen, die der Manifest-Spec für Add to Home Screen entsprechen.

Ergebnis

Ein Entwickler laedt das 1024x1024-Logo seines Startups hoch. Das Tool generiert ein komplettes Favicon-Set mit favicon.ico (16/32/48), apple-touch-icon.png (180x180) und Android-Icons (192/512) sowie die zugehoerigen HTML-Meta-Tags.

Häufige Fragen

Warum brauche ich so viele verschiedene Favicon-Größen?

Jede Plattform fordert eine eigene Größe an. Chrome-Tabs nutzen 32 Pixel, Lesezeichen 16, iOS-Startbildschirme 180, Android-Startbildschirme 192 und PWA-Splash 512. Sind alle dabei, bleibt das Icon überall scharf, wo es auftaucht.

PNG, SVG oder JPG hochladen?

Am besten SVG, weil es verlustfrei in jede Größe skaliert. Zweite Wahl ist ein 512×512-PNG. JPG geht auch, aber die verlustbehaftete Komprimierung hinterlässt Halos an den Kanten, besonders bei 16 und 32 Pixeln.

Was steckt in der ICO-Datei drin?

ICO ist ein Container-Format. Das vom Tool erzeugte ICO trägt drei Bitmap-Layer (16, 32 und 48 Pixel) in sich, damit Windows je nach Ort der Anzeige automatisch das passende auswählt: Taskleiste, Dateiliste oder Browser-Tab.

Wo lege ich die Dateien im Projekt ab?

Entpacke das Paket in das Public-Root der Seite, direkt neben index.html. Die mitgelieferten Link-Tags nutzen Root-Pfade (/favicon.ico, /apple-touch-icon.png), in reinem HTML oder Frameworks wie Next.js, Astro und Vite ist daher keine weitere Konfiguration nötig.

Ich habe das Favicon getauscht, der Browser zeigt aber das alte. Warum?

Browser cachen Favicons sehr aggressiv. Mache einen Hard Refresh (Strg+Umschalt+R unter Windows, Cmd+Shift+R unter Mac) oder hänge an den Link-Tag eine Query an, etwa /favicon.ico?v=2, um ein erneutes Laden zu erzwingen. Der Cache räumt sich meist innerhalb eines Tages selbst auf.

Ähnliche Tools