Favicon-Generator – favicon.ico & App-Icons aus Bild oder Text
Erstelle alle Favicon-Größen, die eine moderne Website braucht, aus einem Bild oder ein paar Buchstaben – plus favicon.ico, Web-Manifest und die HTML-Tags.
Lade ein quadratisches Bild (mindestens 512 × 512 px) hoch oder tippe 1–3 Buchstaben und wähle Farben. Der Generator erstellt favicon.ico (16, 32 und 48 px), PNG-Icons in 16, 32, 180, 192 und 512 px, eine site.webmanifest und den HTML-Code. Dateien ins Stammverzeichnis laden und Code in den einfügen.
So funktioniert: Favicon-Generator
- „Aus Bild“ wählen und ein quadratisches Logo ablegen, oder „Aus Text“ und Buchstaben tippen.
- Bei Text Form und Farben wählen.
- Vorschau jeder Größe prüfen.
- favicon.ico und die PNG-Dateien herunterladen.
- Ins Stammverzeichnis hochladen und HTML-Code in den <head> einfügen.
Welche Favicon-Dateien brauchst du?
Browser, Handys und Suchmaschinen suchen unterschiedliche Icon-Dateien. Dieses kleine Set deckt praktisch alle Geräte ab:
| Datei | Größe | Genutzt von |
|---|---|---|
| favicon.ico | 16, 32, 48 px | Ältere Browser, Windows, viele Crawler |
| favicon-32x32.png | 32 px | Browser-Tabs |
| apple-touch-icon.png | 180 px | iPhone- und iPad-Startbildschirm |
| icon-192.png | 192 px | Android-Startbildschirm |
| icon-512.png | 512 px | Splashscreens, PWA-Installation |
Der Generator baut eine echte ICO-Datei mit mehreren Größen und eine site.webmanifest.
Aus Bild oder Buchstaben
Nimm dein Logo, wenn es schlicht ist und in winzigen Größen lesbar bleibt. Detailreiche Logos werden bei 16 px zum Fleck, deshalb nutzen viele Marken nur den Anfangsbuchstaben. Lade ein quadratisches PNG oder SVG mit mindestens 512 × 512 px hoch; nicht quadratische Bilder werden zentriert. Nur ein SVG? Das Tool nimmt es an, oder nutze vorher SVG in PNG umwandeln.
Noch kein Logo? Wähle „Aus Text“, tippe ein bis drei Buchstaben und wähle Form und Farben.
Favicon einbauen
- Alle Dateien ins Stammverzeichnis der Website laden.
- HTML-Code in den head-Bereich jeder Seite oder des Templates einfügen.
- Browser-Cache leeren oder ein privates Fenster öffnen.
Google zeigt Favicons in mobilen Suchergebnissen und verlangt ein quadratisches Icon mit einem Vielfachen von 48 px; die 192- und 512-px-Dateien erfüllen das. Bis Google ein neues Icon zeigt, können Tage oder Wochen vergehen.
Tipps
Einfache Formen, keine dünnen Linien, und prüfe die 16-px-Vorschau. Ein transparenter Hintergrund kann im Dark Mode verschwinden; ein gefülltes, abgerundetes Quadrat ist sicherer. Passende Markenfarben findest du mit dem Farbpaletten-Generator. Alles entsteht im Browser – dein Logo wird nie hochgeladen.
Häufige Fehler
Oft fehlt die Datei im Stammverzeichnis oder der Pfad im HTML-Code stimmt nicht. Prüfe nach dem Hochladen, ob deine-domain.de/favicon.ico im Browser direkt aufrufbar ist. Auch zu kleine Ausgangsbilder sind ein Problem: Ein 64-px-Logo wird bei 512 px unscharf.
Diese kostenlosen Tools könnten dir auch helfen: WebP in JPG umwandeln, Bildgröße ändern und Bild komprimieren.
Häufige Fragen
Wie groß sollte ein Favicon sein?
Mindestens 32 px für Tabs, 180 px für Apple-Geräte sowie 192 und 512 px für Android. Die ICO-Datei sollte 16, 32 und 48 px enthalten.
Brauche ich noch favicon.ico?
Ja, ältere Browser, Windows-Verknüpfungen und manche Crawler suchen /favicon.ico im Stammverzeichnis.
Kann ich ein Favicon aus Text erstellen?
Ja. Wähle Aus Text, tippe bis zu drei Buchstaben und wähle Farben und Form.
Warum wird mein neues Favicon nicht angezeigt?
Browser speichern Favicons lange im Cache. Cache leeren oder privates Fenster öffnen.
Wird mein Logo hochgeladen?
Nein. Alle Icons entstehen in deinem Browser.
Zuletzt aktualisiert: