Was ist ein Favicon, und welche Größen brauchen Sie?
Wo das Tab-Symbol auftaucht und welche Größen es abdecken muss
Zehn Tabs sind im Browser offen — woran erkennen Sie, welcher zu welcher Seite gehört? Die Titel sind so schmal gequetscht, dass eigentlich nur das winzige Quadrat links sichtbar bleibt. Dieses Symbol heißt Favicon und ist der kleinste, zugleich aber meistgesehene Teil Ihrer Seite.
Fast jeder, der eine neue Seite aufsetzt, hebt es sich bis zum Schluss auf und weiß dann nicht weiter, wenn im Tab ein leeres Blattsymbol steht. Dieser Beitrag klärt zwei Fragen auf einmal: Was genau ist diese Datei, und wie erzeugen Sie sie aus Ihrem vorhandenen Logo in den richtigen Größen.
Ein Symbol, vier verschiedene Orte
Ein Favicon wird nicht nur im Tab verwendet. Dieselbe Marke taucht an mehreren Stellen in unterschiedlichen Größen auf, und jede Stelle hat ihren eigenen Platz.
Im Tab steht das Symbol in seiner kleinsten Fassung; lesbar sein muss dort nicht das Detail, sondern die Silhouette. In den Lesezeichen erscheint es etwas größer, neben dem Namen. Legt eine Besucherin die Seite auf den Startbildschirm ihres Handys, wird das Symbol recht groß dargestellt, wie ein App-Symbol. Der vierte Ort, den die meisten übersehen, sind die Suchergebnisse: In der mobilen Suche steht Ihr Symbol neben dem Seitennamen.
Diese vier Orte haben unterschiedliche Maße, und genau deshalb denkt man ein Favicon nicht als ein einzelnes Bild, sondern als Satz mehrerer Größen derselben Marke.
Welche Größen brauchen Sie wirklich?
In der Praxis tragen Quadrate von 16, 32 und 48 Punkten die Arbeit. Der Tab nutzt 16, Lesezeichen- und Adressleiste 32, Verknüpfungen auf dem Schreibtisch 48. Rechnen Sie damit, dass Nutzer Ihre Seite an den Schreibtisch heften, kann eine Fassung mit 64 dazukommen.
Für das Symbol in den Suchergebnissen gilt eine eigene Regel. Google verlangt, dass das in den Suchergebnissen gezeigte Seitensymbol mindestens 48 Punkte Kantenlänge hat und als Quadrat in einem Vielfachen von 48 vorliegt; wer etwas Kleineres anbietet, dessen Symbol erscheint unter Umständen gar nicht. Eine altmodische Datei mit nur 16 und 32 erfüllt also ihren Zweck im Tab und lässt Sie in der Suche unsichtbar.
Für Verknüpfungen auf dem Handy-Startbildschirm dient ein eigenes, größeres, allein stehendes PNG; diese Datei ist vom Tab-Symbol unabhängig und wird meist mit rund 180 Punkten angelegt.
| Wo es erscheint | Nötige Kantenlänge | Woher es kommt |
|---|---|---|
| Browser-Tab | 16 Punkte | Die kleinste Fassung in der Symboldatei |
| Lesezeichen- und Adressleiste | 32 Punkte | Die mittlere Fassung derselben Datei |
| Verknüpfung auf dem Schreibtisch | 48 Punkte | Die große Fassung derselben Datei |
| Suchergebnis | Mindestens 48 Punkte, Quadrat, Vielfaches von 48 | Ein eigenes PNG oder eine ausreichend große Symboldatei |
| Handy-Startbildschirm | Rund 180 Punkte | Eine eigene PNG-Datei |
Die von Google veröffentlichten Anforderungen an das Seitensymbol in der Suche →
Warum steckt alles in einer Datei?
In einer einzigen Symboldatei können mehrere Größen desselben Bildes gemeinsam liegen, und der Browser holt sich daraus die Größe, die er braucht. Das ist kürzer und robuster, als für jede Größe eine eigene Datei abzulegen und für jede eine eigene Zeile in die Seite zu schreiben.
Der zweite Grund ist Gewohnheit. Zu den ältesten Bräuchen des Webs gehört, dass ein Browser von sich aus im Stammverzeichnis einer Seite nach einer Datei namens "favicon.ico" sucht. Diese Anfrage geht hinaus, selbst wenn Sie in Ihrer Seite nichts dazu schreiben; fehlt die Datei, füllen sich Ihre Serverprotokolle mit Nicht-gefunden-Fehlern.
Am robustesten fahren Sie deshalb mit beidem: einer Symboldatei mit mehreren Größen im Stammverzeichnis und daneben je einem ausreichend großen PNG für Suche und Handy.
Eine Marke gestalten, die im Kleinen lesbar bleibt
Das einzig Schwierige an der Favicon-Gestaltung ist der Maßstab. Das Quadrat im Tab ist kaum größer als ein Buchstabe dieser Zeile; Ihr vollständiges Logo passt dort nicht hinein.
Der richtige Schritt ist nicht, das Logo zu verkleinern, sondern es zu vereinfachen. Nehmen Sie den Anfangsbuchstaben des Firmennamens, einen einzelnen Teil des Emblems oder die markanteste Form des Logos für sich allein. Dünne Linien werden kräftiger, Details fallen weg, zwei oder drei Farben genügen. Ein Logo, das samt Schriftzug verkleinert wird, gerät zum unlesbaren Fleck; das Emblem desselben Logos steht völlig klar da.
Der praktische Test: Verkleinern Sie das fertige Quadrat auf dem Bildschirm auf etwa einen halben Fingernagel und schauen Sie hin. Erkennen Sie in diesem Maßstab nicht, was Sie sehen, wird es Ihren Besuchern ebenso gehen.
- Einen einzelnen Buchstaben oder ein einzelnes Emblem verwenden, nicht das ganze Logo
- Auf dünne Linien und Schatten verzichten, sie verschwinden beim Verkleinern
- Den Hintergrund durchsichtig lassen, damit in dunklen Themes kein weißer Kasten steht
- Das Quadrat ausfüllen, ohne unnötigen Rand
- Keine Marke wählen, die der eines Mitbewerbers ähnelt
Aus dem vorhandenen Logo eine Symboldatei erzeugen
Die Reihenfolge ist einfach. Bereiten Sie zuerst die größtmögliche, quadratische Fassung Ihres Logos vor; ein PNG mit durchsichtigem Hintergrund ist ideal. Haben Sie eine Vektordatei, ist ein großzügig breites quadratisches PNG daraus der sauberste Anfang, denn Verkleinern ist immer unbedenklich, Vergrößern nicht.
Geben Sie dieses PNG dann dem Favicon-Generator; das Werkzeug sammelt die gewünschten Größen in einer einzigen Symboldatei. Legen Sie das Ergebnis in das Stammverzeichnis Ihrer Seite, und die meisten Browser finden es von selbst.
Auch der umgekehrte Fall kommt vor: Sie haben eine Symboldatei, brauchen das Bild darin aber als schlichtes PNG. Das Werkzeug ICO zu PNG trennt die enthaltenen Fassungen heraus und übergibt sie Ihnen; so bekommen Sie die Marke in eine Präsentation, ein Dokument oder eine Entwurfsdatei.
Eine letzte Warnung: Nach dem Wechsel des Symbols sehen Sie im Tab womöglich weiter das alte. Browser behalten diese Datei lange im eigenen Speicher. Schließen Sie den Tab und öffnen Sie ihn erneut; hilft das nicht, tippen Sie in die Adressleiste Ihre Seitenadresse gefolgt von favicon.ico, öffnen die Datei direkt und laden die Seite neu.
Häufige Fragen
Wie groß muss ein Favicon sein?
Der Kernsatz sind 16, 32 und 48 Punkte; Tab, Lesezeichen und Schreibtisch-Verknüpfung nutzen diese. Wollen Sie in den Suchergebnissen erscheinen, halten Sie zusätzlich eine Fassung mit mindestens 48 Punkten Kantenlänge als Quadrat in einem Vielfachen von 48 bereit.
Wie erstelle ich ein Favicon?
Bereiten Sie ein quadratisches PNG Ihres Logos mit durchsichtigem Hintergrund vor und geben Sie es dem Favicon-Generator; das Werkzeug sammelt die Größen in einer Datei. Diese Datei ins Stammverzeichnis Ihrer Seite zu legen genügt.
Ich habe das Symbol geändert, im Tab steht aber das alte. Warum?
Der Browser behält diese Datei im Speicher. Schließen Sie den Tab und öffnen Sie ihn neu; hält es an, tippen Sie Ihre Seitenadresse gefolgt von favicon.ico in die Adressleiste, öffnen die Datei direkt und laden neu.
Ich habe keine Webseite. Brauche ich diese Datei trotzdem?
Auch ein Blog, eine Portfolioseite oder eine einzelne Vorstellungsseite erscheint in einem Tab. Eine Seite ohne Symbol steht dort als leeres Blatt, und das erschwert es Besuchern, Sie zwischen ihren Tabs wiederzufinden.
Kann ich die Bilder aus einer ICO-Datei wieder herausholen?
Ja. Das Werkzeug ICO zu PNG gibt Ihnen die enthaltenen Fassungen als einzelne Bilder; Sie können nur die größte oder alle auf einmal nehmen.
Zuletzt aktualisiert: 27. August 2026