Favicon-Generator

Was ist ein Favicon-Generator?

Ein Favicon-Generator erstellt die kleinen Icons, die in Browser-Tabs, Lesezeichen und mobilen Startbildschirmen neben dem Seitentitel angezeigt werden. Favicons sind ein wichtiger Teil der Markenidentitaet im Web.

Moderne Websites benoetigen Favicons in mehreren Groessen und Formaten — von der klassischen 16x16-ICO-Datei bis zu 180x180-Apple-Touch-Icons und 512x512-PWA-Icons. Dieses Tool generiert alle benoetigten Groessen.

So verwenden Sie dieses Tool

Laden Sie ein Bild hoch (idealerweise quadratisch, mindestens 512x512 Pixel). Das Tool generiert alle gaengigen Favicon-Groessen und den HTML-Code zum Einbinden in Ihre Website.

Benoetigte Favicon-Groessen

• favicon.ico (16x16, 32x32) — das klassische Favicon fuer Browser-Tabs. Sollte als .ico mit mehreren Groessen enthalten sein.
• Apple Touch Icon (180x180) — angezeigt, wenn Benutzer Ihre Seite auf einem iOS-Geraet zum Startbildschirm hinzufuegen.
• Android Chrome (192x192, 512x512) — verwendet fuer Progressive Web Apps und Android-Startbildschirm-Verknuepfungen.
• SVG-Favicon — moderner Ansatz, funktioniert in den meisten Browsern. Skaliert perfekt auf jede Groesse und unterstuetzt Dark-Mode-Anpassung.

Favicon-Design-Tipps

Halten Sie das Design extrem einfach — bei 16x16 Pixeln sind Details unsichtbar. Verwenden Sie starke Farben und einfache Formen. Testen Sie das Favicon auf verschiedenen Hintergruenden (helle und dunkle Browser-Tabs).

Haeufig gestellte Fragen

Welches Dateiformat ist am besten fuer Favicons?

Verwenden Sie SVG fuer moderne Browser (skalierbar, unterstuetzt Dark Mode via CSS) und eine .ico-Datei als Fallback fuer aeltere Browser. PNG ist gut fuer spezifische Groessen, aber .ico und SVG decken die meisten Faelle ab.

Warum zeigt mein Browser das alte Favicon an?

Browser cachen Favicons aggressiv. Leeren Sie den Browser-Cache oder fuegen Sie einen Versionierungsparameter hinzu (z.B. favicon.ico?v=2). In Chrome hilft auch das Loeschen des Favicon-Caches unter chrome://favicon/.