Favicon-Generator
Erzeuge aus einem Bild alle Favicon-Größen, die eine Website braucht — von 16 bis 512 px — samt HTML zum Einbinden. Direkt in deinem Browser.
Über dieses Tool
Ein Favicon ist das kleine Icon, das Browser im Tab, in den Lesezeichen und auf dem Startbildschirm des Handys zeigen. Eine Datei reicht längst nicht mehr: Browser wollen ein 32 px-Icon für den Tab, iOS verlangt ein 180 px-Touch-Icon, und Android-Startbildschirme ziehen die Fassungen mit 192 und 512 px aus dem Web-App-Manifest.
Lad ein quadratisches Logo hoch, und das hier erzeugt den ganzen Satz auf einmal, samt HTML, mit dem du ihn einbindest. Die Verkleinerung nutzt hochwertige Glättung, was bei 16 px sofort auffällt: Dort wird ein detailliertes Logo zum Fleck. Einfache Formen und dicke Striche überleben, feine Linien und kleiner Text nicht.
So funktioniert es
- 1
Lade ein quadratisches Bild hoch
Am besten ein PNG mit Transparenz. Alles, was nicht quadratisch ist, wird zuerst mittig zugeschnitten.
- 2
Sieh dir die kleinen Vorschauen an
Achte auf die Fassungen mit 16 und 32 px. Ist die Marke dort nicht lesbar, vereinfache sie, statt sie so zu veröffentlichen.
- 3
Lade den Satz herunter und füg das HTML ein
Speichere jede Größe und kopier die link-Tags in den head deiner Website.
Häufige Fragen
Welche Größen braucht ein Favicon 2026?
Ein PNG mit 32 px deckt die Browser-Tabs ab, 180 px den iOS-Startbildschirm (apple-touch-icon), und 192 px plus 512 px decken Android über das Web-App-Manifest ab. Ein SVG-Icon ist eine gute Ergänzung, weil es auf jede Größe skaliert, und ein favicon.ico bleibt ein nützlicher Rückfall für alte Browser.
Warum sieht mein Logo bei 16 px aus wie ein Fleck?
Weil 16 px insgesamt 256 Pixel sind. Alles mit feinen Strichen, Verläufen oder Wörtern verschwindet in diesem Maßstab. Gut lesbare Favicons sind meist ein einzelner Buchstabe oder eine markante Form auf einfarbigem Grund.
Wohin gehören die Dateien?
Leg sie in das Wurzelverzeichnis deiner Website und binde sie im head deines HTML über link-Tags für icon und apple-touch-icon ein; die Fassungen mit 192 und 512 px kommen in dein Web-App-Manifest.
Brauche ich noch eine favicon.ico?
Aktuelle Browser verlangen sie nicht mehr und kommen problemlos mit PNG- oder SVG-Icons zurecht, aber es kostet nichts, eine im Wurzelverzeichnis zu behalten — für alte Clients und für Werkzeuge, die sie aus Gewohnheit anfragen.
Zuletzt geprüft am von dem Kobra IMG-Team.