Favicon: Bedeutung, Größen & kostenloser Generator

Was ist ein Favicon?

Es ist nur ein paar Pixel groß und trotzdem überall: das Favicon. Das kleine Symbol im Browser-Tab ist oft das Erste, was Menschen von deiner Marke sehen – noch bevor sie die erste Zeile deiner Website gelesen haben.

Der Name kommt von favorite icon: Eingeführt wurde das Symbol 1999 vom Internet Explorer 5, der damit Lesezeichen – damals „Favoriten“ – kennzeichnete. Heute ist es viel mehr als ein Lesezeichen-Bildchen. Es ist das kleinste Aushängeschild deines Unternehmens im Netz.

In diesem Beitrag erfährst du, wo dein Favicon überall auftaucht, welche Größen und Formate du brauchst – und wie du mit unserem kostenlosen Favicon Generator in wenigen Minuten ein vollständiges Paket schmiedest.

Wo wird das Favicon überall angezeigt?

Viel öfter, als man denkt. Dein Favicon begleitet deine Besucher an vielen Stellen:

Im Browser-Tab: Bei zehn offenen Tabs findet man deine Seite am Symbol – nicht am abgeschnittenen Titel.
In Lesezeichen und im Verlauf: Wer dich speichert, erkennt dich später am Icon wieder.
In den Google-Suchergebnissen: Google kann das Favicon neben deinem Eintrag anzeigen. Ein klares Symbol hebt dich von der Konkurrenz ab.
Am Startbildschirm von Smartphones: Legen Nutzer deine Website auf iPhone oder Android als App-Symbol ab, erscheint dein Icon zwischen WhatsApp und Kalender.
In der Adressleiste und in Verknüpfungen – etwa in der Taskleiste oder auf dem Desktop.

Fehlt das Favicon, zeigt der Browser ein graues Standardsymbol. Das wirkt unfertig – ein bisschen wie ein Geschäft ohne Schild über der Tür.

Warum ein Favicon für deine Marke zählt

Wiedererkennung: Dasselbe Zeichen im Tab, in der Suche und am Handy verankert deine Marke – ganz nebenbei.
Vertrauen: Ein fehlendes oder verpixeltes Icon wirkt nachlässig. Ein sauberes Favicon zeigt, dass auch die Details stimmen.
Sichtbarkeit in der Suche: In den Suchergebnissen ist dein Favicon eines der wenigen visuellen Elemente, die du selbst bestimmst.
Bedienbarkeit: Wer viele Tabs offen hat, springt dank Icon schneller zu dir zurück.

Welche Größen und Formate brauchst du?

Ein einziges Bild reicht heute nicht mehr. Jedes Gerät und jeder Browser holt sich die Größe, die er braucht. Ein vollständiges Favicon-Paket sieht so aus:

favicon.ico (16, 32 und 48 px) – Browser-Tab und ältere Browser
favicon-16×16.png und favicon-32×32.png – Browser-Tab und Lesezeichen
apple-touch-icon.png (180 px) – Startbildschirm am iPhone (iPad: 152 bzw. 167 px)
android-chrome-192×192.png und -512×512.png – Android und Web-App
favicon.svg (optional, skalierbar) – moderne Browser
site.webmanifest – Name und Symbole der Web-App

Für die Google-Suche gilt laut Google Search Central: Das Favicon muss quadratisch sein und mindestens 8 × 8 Pixel groß – empfohlen sind aber mindestens 48 × 48 Pixel, damit es überall scharf wirkt. Eine Garantie, dass Google das Favicon anzeigt, gibt es allerdings nicht.

So gestaltest du ein gutes Favicon

Das Favicon ist im Tab oft nur 16 Pixel groß. Was im Logo elegant wirkt, wird dort schnell zum grauen Fleck. Ein paar Grundregeln aus unserer Werkstatt:

Reduzieren statt verkleinern: Nimm die Bildmarke oder den Anfangsbuchstaben deines Logos – keinen ganzen Schriftzug.
Starker Kontrast: Das Symbol muss auf hellen und dunklen Tab-Leisten funktionieren.
Quadratisch denken: Breite Logos werden sonst winzig oder abgeschnitten.
Wenig Details: Feine Linien und kleine Schriften verschwinden bei 16 × 16 Pixeln.
Ausgangsbild groß genug wählen: mindestens 512 × 512 Pixel, damit auch das App-Symbol am Handy scharf bleibt.

Favicon einbinden – auch in WordPress

Die Dateien gehören in das Hauptverzeichnis deiner Website, dazu kommen ein paar Zeilen HTML im Kopfbereich, die den Browsern sagen, wo welches Symbol liegt. In WordPress geht es noch einfacher: Unter „Website-Icon“ lädst du ein quadratisches Bild mit mindestens 512 × 512 Pixel hoch, und WordPress erzeugt die wichtigsten Größen selbst.

Wer es vollständig haben will – mit Manifest für Android und dem passenden Apple-Touch-Icon –, bindet das komplette Paket ein. Genau dafür haben wir unseren Generator gebaut. Und wenn du dich darum gar nicht kümmern willst: Als WordPress-Agentur erledigen wir das für dich.

Dein Favicon-Paket in wenigen Minuten: unser kostenloser Favicon Generator

Mit dem Favicon Generator der Webschmiede lädst du dein Logo hoch, wählst den Ausschnitt, passt Hintergrund und Rand an und siehst sofort, wie dein Symbol im Tab, in der Suche und am Handy wirkt. Am Ende bekommst du ein ZIP mit allen Dateien, dem HTML-Code und einer Anleitung.

Kostenlos und ohne Registrierung
Alles in einem Paket: ICO, PNG in allen Größen, Apple-Touch-Icon, Web-Manifest
Datenschutzfreundlich: Dein Bild wird nur in deinem Browser verarbeitet und nicht auf unseren Server hochgeladen
Vorschau für Browser-Tab, Suchergebnis und Startbildschirm