Favicon-Generator

Mach aus einem Logo oder ein paar Buchstaben alle Icons, die Browser und Handys brauchen – plus den Code zum Einfügen.

Kein Upload – auf dem Gerät
ICO, PNG und Manifest
HTML zum direkten Einfügen

Wähle ein Bild aus oder wechsle zu Buchstaben.

So funktioniert’s

Bild oder Buchstaben werden in jeder Größe, die Browser und Handys anfordern, auf ein Canvas gezeichnet und als PNG-Dateien gespeichert. Die Versionen mit 16, 32 und 48 px werden in eine einzige favicon.ico gepackt. Alles entsteht in deinem Browser, nichts wird hochgeladen.

favicon.ico (16 + 32 + 48) · favicon-32.png · apple-touch-icon.png (180) · icon-192.png · icon-512.png · site.webmanifest

Wofür jede Datei da ist

favicon.ico: das klassische Icon im Browser-Tab. Jeder Browser und Windows suchen es weiterhin im Stammverzeichnis der Website.
apple-touch-icon.png: das Icon, das iPhone und iPad verwenden, wenn jemand deine Website zum Home-Bildschirm hinzufügt. Es hat immer einen deckenden Hintergrund.
icon-192.png, icon-512.png: Android und installierbare Web-Apps (PWA) nutzen diese aus dem Manifest.
site.webmanifest: eine kleine JSON-Datei mit Name, Farben und Icon-Liste deiner Website.

Tipps

Lege alle Dateien in das Stammverzeichnis deiner Website, neben index.html, und füge den Code in den Head jeder Seite ein.
Einfache, kräftige Formen sind bei 16 px am besten lesbar; feiner Text und dünne Linien verschwinden.
Browser speichern Favicons hartnäckig im Cache. Öffne die Icon-URL direkt oder nutze ein privates Fenster, um eine Änderung zu sehen.
Das theme-color-Tag färbt die Browserleiste auf Android in deiner Hintergrundfarbe.

Grundlagen und Quellen

Zuletzt geprüft am 15. Oktober 2026

Häufige Fragen

Welche Favicon-Größen brauche ich?

Eine favicon.ico mit 16, 32 und 48 px, ein apple-touch-icon mit 180 px sowie Icons mit 192 und 512 px für Android decken aktuelle Browser und Handys ab.

Wird mein Logo hochgeladen?

Nein. Die Icons werden in deinem Browser gezeichnet und gepackt.

Kann ich ein SVG verwenden?

Ja. SVG, PNG, JPG, WebP und GIF werden akzeptiert; ein quadratisches Bild mit mindestens 512 px liefert das schärfste Ergebnis.

Warum ist das Apple-Icon nicht transparent?

iOS füllt transparente Bereiche mit Schwarz, daher nutzt das 180-px-Icon immer deine Hintergrundfarbe.

Mein neues Favicon wird nicht angezeigt.

Browser speichern Favicons lange im Cache. Öffne die Icon-Adresse direkt, leere den Cache oder probiere ein privates Fenster.

Weitere Tools

Ergebnisse dienen nur zur Orientierung. Berechnungen können falsch sein und sind keine Rechts-, Medizin- oder Finanzberatung. Kläre wichtige Entscheidungen immer mit der zuständigen Stelle oder einer Fachperson.