Favicon-Generator

Erstelle das Favicon deiner Website aus Buchstaben, einem Emoji oder deinem Logo: favicon.ico, PNG, Apple- und Android-Icons, Manifest und HTML-Code.

Kostenlos
Ohne Anmeldung
Kein Datei-Upload
Windows, Mac, Android, iPhone

Werkzeug wird geladen…

Über dieses Werkzeug

Erstelle auf einmal alle Icons, die deine Website braucht: aus Buchstaben oder einem Emoji (Schrift, Farben, quadratische, abgerundete oder runde Form) oder aus deinem Logo. Du erhältst favicon.ico, favicon.svg, PNGs mit 16 und 32 px, das Apple-Icon mit 180 px, Android-Icons mit 192 und 512 px, die Datei site.webmanifest und den HTML-Code zum Einfügen.

Wann es hilft

Neue Website oder neuer Blog

Ein Favicon mit dem Anfangsbuchstaben der Website in ihrer Hauptfarbe ist in einer Minute fertig und macht den Tab wiedererkennbar.

Web-App-Icon

Mit Manifest und Android-Icons lässt sich die Website wie eine App auf den Homescreen eines Handys legen.

Vorhandenes Logo

Wähle dein Logo: Es wird quadratisch mit einstellbarem Rand zugeschnitten und in allen Größen erzeugt.

So funktioniert's

Wähle Buchstaben, ein Emoji oder dein Logo.
Stelle Farben, Form und Größe mit Blick auf die Vorschau in Originalgröße ein.
Erstelle die Dateien, lade sie herunter und kopiere den HTML-Code.

So funktioniert es

Jede Größe wird einzeln in ein Canvas gezeichnet (nicht aus einem großen Bild verkleinert), damit auch kleine Icons scharf bleiben. Text wird nach der tatsächlichen Buchstabenhöhe zentriert und verkleinert, wenn er 90 % der Breite überschreitet.

Die .ico-Datei wird Byte für Byte zusammengesetzt: ein Header, ein Eintrag pro Größe, dann die PNG-Bilder – ein Format, das jeder Browser akzeptiert. Alles entsteht auf deinem Gerät.

Tipps für beste Ergebnisse

Höchstens ein oder zwei Buchstaben: Bei 16 px ist ein ganzes Wort unlesbar.
Wähle stark kontrastierende Farben, das Icon ist winzig.
Prüfe die 16-px-Vorschau, die echte Größe eines Browser-Tabs.
Leere nach dem Wechsel eines Favicons den Browser-Cache: Das alte bleibt lange sichtbar.

Häufige Probleme und Lösungen

Das alte Favicon wird noch angezeigt

Browser speichern Favicons im Cache. Lade mit Strg+F5 neu oder öffne die Seite in einem privaten Fenster.

Das Emoji sieht anders aus

Emojis hängen vom System ab. In den PNG- und ICO-Dateien wird das Emoji deines Geräts gezeichnet; favicon.svg nutzt das des Besuchers.

Das Logo wird abgeschnitten

Es wird quadratisch zugeschnitten. Vergrößere den Rand oder bereite eine quadratische Version des Logos vor.

Häufige Fragen

Welche Dateien braucht ein Favicon?

favicon.ico (16, 32 und 48 px) für alle Browser, ein 32-px-PNG, apple-touch-icon.png (180 px) für den iPhone-Homescreen und zwei Icons mit 192 und 512 px für Android samt site.webmanifest-Datei. Das Werkzeug erstellt sie alle.

Wohin kommen die Dateien?

Ins Stammverzeichnis der Website (neben die Startseite); füge dann den bereitgestellten HTML-Code in den head-Bereich deiner Seiten ein.

Warum ist das Apple-Icon nicht transparent?

iOS ersetzt Transparenz auf dem Homescreen durch Schwarz, daher bekommt das Apple-Icon immer deine Hintergrundfarbe.

Kann ich ein Emoji verwenden?

Ja. Im Textmodus wird zusätzlich ein favicon.svg erstellt: scharf in jeder Größe und sehr klein.

Immer noch ein Problem?

Frag im Forum: Kategorie, Werkzeug, Datenblatt deines Geräts und Testergebnis werden automatisch ausgefüllt.