Favicon-Generator

So funktioniert es

So erstellen Sie ein Favicon

Vom Logo zum fertigen Paket in weniger als einer Minute.

1
Quelle wählen
Ein Logo ablegen (PNG, JPG, SVG, WebP), ein oder zwei Buchstaben eingeben oder ein Emoji auswählen.
2
Aussehen anpassen
Hintergrund, Form, Innenabstand und Farben einstellen und das Ergebnis in Browser-Tab, Google-Ergebnis und Startbildschirm prüfen.
3
Herunterladen und einbauen
Das ZIP herunterladen, die Dateien ins Stammverzeichnis der Website laden und das HTML in den Head der Seiten einfügen.

Warum ToolCMB

Eine Quelle, alle Icons

Genau die Dateien, die Browser, Smartphones und Suchmaschinen anfordern.

Komplettes Paket

favicon.ico, PNG, SVG, Apple-Touch-Icon, Android-Icons, maskierbares Icon und Web-Manifest in einem ZIP.

Buchstaben und Emoji

Noch kein Logo? Aus ein oder zwei Buchstaben oder einem Emoji entsteht ein sauberes Icon in eigenen Farben.

Realistische Vorschau

Das Icon im hellen und dunklen Browser-Tab, im Google-Ergebnis und auf dem Smartphone-Startbildschirm sehen.

Bereit für Smartphones

Das Apple-Touch-Icon erhält einen deckenden Hintergrund, das maskierbare Icon hält das Logo in der sicheren Zone.

Hintergrund und Form

Transparent, farbig oder mit Verlauf; quadratisch, abgerundet oder rund; Innenabstand einstellbar.

Scharfe kleine Größen

Bilder werden in mehreren Schritten verkleinert, damit das 16-px-Icon so klar bleibt, wie die Vorlage es zulässt.

HTML zum Einfügen

Die Link-Tags passen zu den Dateien im Paket und verwenden den angegebenen Ordner.

Privat

Ihr Logo wird auf Ihrem Gerät verarbeitet. Es verlässt den Browser nicht.

Welche Favicon-Größen und -Dateien braucht eine Website 2026?

Ein Favicon ist das kleine Symbol, das Browser in Tabs, Lesezeichen und im Verlauf anzeigen und das Google in den Suchergebnissen neben Ihre Website stellt. Früher genügte eine favicon.ico mit 16 × 16 Pixeln. Heute erscheint das Icon auch auf Startbildschirmen von Smartphones, in installierten Web-Apps und auf hochauflösenden Displays – eine Website braucht deshalb einen kleinen Satz von Dateien statt einer einzigen.

Das moderne Minimum ist überschaubar: eine favicon.ico mit 16, 32 und 48 px für ältere Browser und Programme, ein SVG oder ein PNG mit mindestens 96 px für scharfe Tabs und die Google-Suche (sie verlangt ein quadratisches Icon, dessen Größe ein Vielfaches von 48 px ist), ein Apple-Touch-Icon mit 180 × 180 für iPhone und iPad sowie Icons mit 192 und 512 px, die in einer site.webmanifest für Android und installierte Web-Apps aufgeführt sind.

Zwei Details werden leicht übersehen. iOS unterstützt bei Icons auf dem Startbildschirm keine Transparenz und füllt transparente Bereiche schwarz, daher sollte das Apple-Touch-Icon einen deckenden Hintergrund haben. Android schneidet Icons mitunter kreisförmig oder als abgerundetes Quadrat zu; ein maskierbares Icon hält das Wesentliche innerhalb der mittleren 80 %, damit nichts abgeschnitten wird. Dieser Generator erledigt beides automatisch.

Favicon-Dateien und ihre Verwendung

Datei	Größe	Verwendet von
favicon.ico	16, 32, 48 px	Alle Browser, ältere Programme, Feedreader
favicon.svg	Skalierbar	Moderne Browser (Tabs, Lesezeichen)
favicon-96x96.png	96 × 96 px	Google-Suche, hochauflösende Tabs
apple-touch-icon.png	180 × 180 px	Startbildschirm von iPhone und iPad
android-chrome-512x512.png	512 × 512 px	Android, installierte Web-Apps, Startbild
maskable-icon-512x512.png	512 × 512 px	Adaptive Icons unter Android

Tipps

Am besten mit einem quadratischen Bild ab 512 px oder einem SVG beginnen. Ist das Logo größer oder nicht quadratisch, hilft Bildgröße ändern bei der Vorbereitung.
Ein detailreiches Logo wird bei 16 px zu einem Fleck. Für das Favicon nur das Signet oder den Anfangsbuchstaben verwenden, das vollständige Logo gehört in den Header.
Wenn ohnehin Icons ergänzt werden: Das passende Vorschaubild für soziale Netzwerke erstellt der OG-Bild-Generator.
Logo auf weißem oder farbigem Kasten? Mit Bildhintergrund entfernen erst freistellen, dann entsteht ein transparentes Favicon.

FAQ

Häufig gestellte Fragen

Keine Antwort gefunden? Schreiben Sie uns – wir antworten schnell.

Welche Größe sollte ein Favicon haben?

Eine einzige Größe gibt es nicht mehr. Browser nutzen 16 bis 48 px, die Google-Suche erwartet ein Vielfaches von 48 px, iOS verwendet 180 px und Android 192 und 512 px. Das Paket enthält alle.

Brauche ich noch eine favicon.ico?

Ja, als Fallback. Manche Browser, Feedreader und Programme rufen /favicon.ico direkt ab; liegt die Datei im Stammverzeichnis, entstehen keine Fehler wegen eines fehlenden Icons.

Wohin lade ich die Favicon-Dateien hoch?

In das Stammverzeichnis der Website, neben die Startseite. Das erzeugte HTML kommt in den <head> jeder Seite. Bei einem anderen Ordner diesen unter „Ordner der Icons“ eintragen.

Warum erscheint mein neues Favicon nicht?

Browser speichern Favicons lange im Cache. Die Adresse des Icons direkt öffnen und neu laden oder in einem privaten Fenster testen. Google braucht mehrere Tage bis Wochen, um das Icon in den Suchergebnissen zu aktualisieren.

Kann ich ein Favicon aus Text oder einem Emoji erstellen?

Ja. „Buchstaben“ oder „Emoji“ wählen, Farben und Form festlegen – der Generator erzeugt zusätzlich ein kleines SVG-Favicon, das in jeder Größe scharf bleibt.

Wird mein Logo auf einen Server hochgeladen?

Nein. Die Icons entstehen in Ihrem Browser, und die ZIP-Datei wird auf Ihrem Gerät erstellt. Das Logo wird weder hochgeladen noch gespeichert.

Vorschau

Dateien im Paket

HTML für Ihre Website