Über: Favicon Generator
Ein Favicon ist das kleine Symbol einer Website, das im Browser-Tab, in Lesezeichen, in Suchergebnissen und auf dem Startbildschirm von Smartphones erscheint. Ohne Favicon zeigt der Tab ein leeres Symbol, die Website wirkt unfertig, und in den Google-Suchergebnissen erscheint ein Standard-Globus.
Dieses Tool erstellt aus einem Logo oder einem einzelnen Buchstaben oder Emoji ein komplettes Favicon-Set in allen Größen, die Geräte brauchen. Sehr kleine Größen wie 16 px werden direkt in dieser Größe gezeichnet statt herunterskaliert und sind dadurch schärfer. Alles läuft in deinem Browser.
So funktioniert’s
- Wähl Text · Emoji oder Bild. Bei Text passen 1–2 Zeichen am besten, bei Bildern ein quadratisches Logo.
- Stell Hintergrundfarbe (oder Transparenz), Eckenradius und Innenabstand ein. In der Vorschau rechts (auf dem Handy darunter) siehst du das Favicon in echter Tab-Größe.
- Tippe auf Alles herunterladen (ZIP), entpacke die Dateien und lade sie in das Stammverzeichnis deiner Website hoch.
- Kopier den HTML-Code unten und füge ihn auf jeder Seite in den
<head>ein.
Dateien im ZIP
| Datei | Größe | Verwendung |
|---|---|---|
| favicon.ico | 16·32·48 | Standard für alle Browser, Google-Suchergebnisse |
| favicon-16x16.png | 16 | Browser-Tab |
| favicon-32x32.png | 32 | hochauflösende Tabs, Taskleiste |
| favicon-48x48.png | 48 | Windows-Verknüpfungen, Suchergebnisse |
| apple-touch-icon.png | 180 | Startbildschirm von iPhone und iPad |
| android-chrome-192x192.png | 192 | Android-Startbildschirm |
| android-chrome-512x512.png | 512 | Startbildschirm beim Installieren (PWA) |
| site.webmanifest | - | Icon- und Namensangaben für Android |
Symbole auf dem iPhone-Startbildschirm unterstützen keine Transparenz und erscheinen sonst schwarz. Deshalb wird nur apple-touch-icon.png auch ohne Hintergrund mit weißem Hintergrund gespeichert.
Favicons, die auch klein gut aussehen
- Im 16-px-Tab verschwimmen dünne Linien und kleine Schrift. Ein Symbol oder ein einzelner Anfangsbuchstabe ist besser erkennbar als das ganze Logo.
- Sorg für starken Helligkeitskontrast zwischen Hintergrund und Zeichen. Damit das Favicon auch in dunklen Tabs sichtbar bleibt, ist ein farbiger Hintergrund sicherer als ein transparenter.
- Siehst du nach dem Austauschen noch das alte Favicon, liegt das am Browser-Cache. Lade mit Strg+Umschalt+R neu oder häng
?v=2an den Dateinamen an.
Häufige Fragen
Reicht nicht einfach eine ICO-Datei?
Für Desktop-Browser reicht favicon.ico, aber für den Startbildschirm von iPhone und Android werden PNGs mit 180, 192 und 512 px gebraucht. Lädst du alle Dateien aus dem ZIP hoch und fügst den HTML-Code ein, ist jedes Gerät abgedeckt.
Mein Favicon erscheint nicht in den Google-Suchergebnissen.
Google empfiehlt Favicons in einem Vielfachen von 48 px, und bis zur Übernahme können einige Tage bis Wochen vergehen. Prüf auch, dass die Favicon-Datei nicht per robots.txt blockiert ist.
Kann ich das Favicon in WordPress, Wix oder Jimdo nutzen?
Ja. Bei den meisten Baukästen kannst du in den Einstellungen ein Favicon hochladen. Meist genügt das 512-px-PNG oder die favicon.ico.
Wird mein Logo auf einem Server gespeichert?
Nein. Das Favicon wird im Browser erstellt, dein Bild wird nirgendwohin gesendet.