Favicon-Generator

Erstellen Sie Favicons aus Text, Emoji oder hochgeladenen Bildern.

Text / Emoji

Background

Text Color

Font Size: 64

Corner Radius: 20%

Font Weight

Preview

My Website — Home

Download

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.

Wo Favicons erscheinen

Favicons tauchen an mehr Stellen auf, als die meisten Menschen ahnen. Der bekannteste Ort ist der Browser-Tab – jede geöffnete Seite zeigt ihr Favicon links neben dem Seitentitel, sodass man einen Tab auf einen Blick erkennt, wenn Dutzende offen sind. Sie erscheinen außerdem in der Lesezeichenleiste und im Lesezeichenmanager des Browsers, in der Verlaufsliste und in der Adressleiste mancher Browser, wenn man beginnt, eine URL einzutippen.

Auf Mobilgeräten verwendet das Betriebssystem beim Tippen auf „Zum Home-Bildschirm hinzufügen" in Safari oder Chrome das apple-touch-icon (180×180 unter iOS) oder das PWA-Manifest-Icon (192×192 unter Android) als App-Verknüpfung auf dem Startbildschirm. Auf dem Desktop erscheinen als Progressive Web App installierte Anwendungen über Chrome oder Edge in der Taskleiste und im Windows-Startmenü und nutzen dabei das 512×512-Icon aus dem Manifest. Suchmaschinen, darunter Google, zeigen das Favicon einer Website manchmal in den Suchergebnissen neben der Seiten-URL an – ein gepflegtes Icon trägt also zum Markeneindruck bei, noch bevor Nutzer klicken.

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.

Favicon-Formate erklärt

Moderne Browser und Betriebssysteme benötigen verschiedene Favicon-Formate. Jedes Format dient einem bestimmten Kontext; fehlt eines, greifen manche Geräte oder Browser auf ein generisches leeres Icon zurück.

favicon.ico — Das ursprüngliche Favicon-Format. Eine ICO-Datei ist ein Container, der mehrere Bildgrößen (üblicherweise 16×16, 32×32 und 48×48) in einer einzigen Datei vereint. Sie gehört als /favicon.ico in das Stammverzeichnis der Website. Browser rufen diesen Pfad automatisch ab, auch ohne <link>-Tag, was die Kompatibilität mit älteren Browsern und Feed-Readern sicherstellt.
PNG-Favicons (32×32) — Moderne Browser bevorzugen PNG. Ein 32×32-PNG ist das standardmäßige Allzweck-Favicon für Browser-Tabs auf hochauflösenden Bildschirmen. Einbindung: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
apple-touch-icon (180×180) — Apple-Geräte verwenden dieses Icon, wenn ein Besucher die Website auf dem iOS- oder iPadOS-Startbildschirm speichert. Ohne es erstellt iOS stattdessen einen Screenshot der Seite. Einbindung: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. Hier keinen transparenten Hintergrund verwenden – Apple legt das Icon auf ein weißes Quadrat, was transparente Bereiche unschön aussehen lässt.
PWA-Manifest-Icons (192×192 und 512×512) — Progressive Web Apps deklarieren Icons in einer JSON-Manifest-Datei. Das 192×192-Icon wird für Startbildschirm-Verknüpfungen unter Android verwendet, das 512×512-Icon für den Ladebildschirm beim App-Start. Manifest einbinden mit: <link rel="manifest" href="/site.webmanifest">
SVG-Favicon — Moderne Browser (Chrome 80+, Firefox 41+ und Safari 16+) unterstützen ein SVG-Favicon, das so eingebunden wird: <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG-Favicons sind auflösungsunabhängig und können innerhalb der SVG-Datei eine prefers-color-scheme-Media-Query enthalten, um automatisch zwischen einer hellen und einer dunklen Version zu wechseln. Das SVG-Tag vor dem PNG-Fallback platzieren, damit fähige Browser den Vektoren verwenden, während ältere Browser auf das PNG zurückgreifen.

Die benötigten HTML-Link-Tags

Diese Tags in den <head>-Bereich jeder Seite der Website kopieren. Die Reihenfolge ist leicht relevant – zuerst SVG, dann PNG, dann ICO. Browser wählen das erste unterstützte Format.

Die Datei site.webmanifest sollte mindestens einen name, short_name, ein icons-Array (mit Einträgen für 192×192 und 512×512), theme_color, background_color und den display-Modus standalone für installierbare PWAs enthalten.

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).

Hohen Kontrast verwenden

Favicons werden vor Browser-Chrome angezeigt, das je nach Systemdesign von Hellgrau bis Nahezu-Schwarz variiert. Ein Design, das auf weißem Hintergrund scharf wirkt, kann auf einer dunklen Tab-Leiste verschwinden. Anstreben sollte man ein Kontrastverhältnis von mindestens 4,5:1 zwischen Vordergrund und Hintergrund des Icons. Ein dunkles Icon auf einem lebhaften Hintergrund oder ein helles Icon auf dunklem Hintergrund funktionieren beide gut.

Für Silhouetten-Erkennung gestalten

Bei 16×16 Pixeln hat das Icon nur 256 Pixel insgesamt. Das Gehirn liest Favicons eher anhand der Form als anhand von Details. Eine markante Silhouette – ein einzelner Buchstabe, eine geometrische Marke, ein erkennbares Symbol – funktioniert weit besser als eine detaillierte Illustration. Logos, die den vollständigen Firmennamen ausschreiben, sind in Favicon-Größe kaum lesbar. Das einzige, am stärksten wiedererkennbare Element der Marke herausarbeiten und mittig mit großzügigem Abstand platzieren, damit es nicht abgeschnitten wird.

Häufige Favicon-Fehler

Nur ein 16×16-PNG bereitstellen – das wirkt auf Retina- und hochauflösenden Displays unscharf. Mindestens ein 32×32-PNG immer mitliefern.
Das apple-touch-icon vergessen – iOS erstellt stattdessen einen Screenshot, was zu einer unleserlichen Miniaturversion der vollständigen Seite führt.
Transparenter Hintergrund beim apple-touch-icon – Apple rendert die transparenten Bereiche als Schwarz, was das Design ruiniert. Für das 180×180-Icon eine einfarbige Hintergrundfarbe verwenden.
Ein überfülltes, detailreiches Logo verwenden – feine Details verschwinden unterhalb von 64×64 Pixeln. Das Design auf die wesentliche Markenform reduzieren.
Nach einem Update keinen Cache-Buster hinzufügen – Browser cachen Favicons aggressiv. Einen Versions-Query-String (?v=2) an den href anhängen, damit Browser die neue Datei erneut abrufen.

Client-seitige Generierung und Datenschutz

Dieser Favicon-Generator läuft vollständig im Browser über die HTML-Canvas-API. Text, Farben und Eckradius-Einstellungen werden nie an einen Server übertragen. Das Design verbleibt auf dem Gerät, und die generierten Dateien werden direkt auf den Computer heruntergeladen. Das bedeutet: Das Tool funktioniert offline, sobald die Seite einmal geladen wurde, und es ist weder ein Konto noch eine Registrierung erforderlich.

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/.

Brauche ich noch eine favicon.ico-Datei?

Ja, vorerst schon. Einige ältere Browser, E-Mail-Clients, RSS-Reader und Web-Crawler suchen nach wie vor nach /favicon.ico im Stammverzeichnis der Domain, ohne dabei HTML-Link-Tags zu berücksichtigen. Eine 32×32-favicon.ico im Stammverzeichnis zu halten, erfordert vernachlässigbar wenig Speicherplatz und deckt diese Randfälle ab. Moderne Browser bevorzugen die in den <link>-Tags deklarierten SVG- oder PNG-Versionen gegenüber dem ICO-Fallback.

Kann ich ein Emoji als Favicon verwenden?

Ja – mit SVG-Favicons. Man kann ein Inline-SVG mit einem Text-Element, das ein Emoji-Zeichen enthält, deklarieren, und moderne Browser rendern es bei beliebiger Auflösung einwandfrei. Der SVG-Ansatz unterstützt auch Dark Mode: Verschiedene Füllfarben in eine prefers-color-scheme-Media-Query innerhalb der SVG-Datei einwickeln. Mit diesem Generator kann man ein beliebiges Emoji oder Zeichen in das Textfeld eingeben und es als SVG-Favicon exportieren.