Ein Favicon erstellen ist schnell erledigt – trotzdem fehlt es auf vielen Unternehmenswebsites oder zeigt noch das Standardsymbol des Baukastens. Die Inhaberin eines Schlüsseldienstes in Zürich bemerkt es zufällig: In ihren zwanzig offenen Browser-Tabs ist ihre eigene Website die einzige mit leerem, grauem Symbol.
Das Favicon ist das kleine Bild im Browser-Tab, in Lesezeichen und neben Ihrer Website in den Google-Suchergebnissen. Dieser Beitrag zeigt, welches Motiv funktioniert, welche Größe sinnvoll ist und wie Sie das Icon in WordPress einbinden.
Inhaltsverzeichnis
Wo das Favicon erscheint
- Browser-Tab und Lesezeichen: Hier hilft es, Ihre Seite zwischen vielen anderen wiederzufinden.
- Google-Suchergebnisse: Auf vielen Geräten steht das Favicon neben dem Namen Ihrer Website.
- Startbildschirm: Wer Ihre Seite auf dem Smartphone als Verknüpfung speichert, sieht dort häufig dasselbe Icon.
In allen Fällen ist das Symbol sehr klein. Das bestimmt, was darauf passt.
Das passende Motiv wählen
Ihr vollständiges Logo mit Schriftzug ist im Tab meist nicht lesbar. Bewährt haben sich:
- eine Bildmarke aus Ihrem Logo, etwa ein Symbol ohne Text,
- ein Anfangsbuchstabe in Ihrer Hausschrift und -farbe,
- eine vereinfachte Form des Logos mit kräftigen Konturen.
Im fiktiven Beispiel entscheidet sich der Schlüsseldienst gegen den Schriftzug und für den stilisierten Schlüsselbart aus dem Logo, weiß auf dunkelblauem Quadrat. Auf 16 Pixel verkleinert ist er noch erkennbar; der Firmenname wäre nur ein grauer Strich. Damit das Icon zum restlichen Auftritt passt, orientieren Sie sich an Ihrem Corporate Design.
Größe und Format
Google verlangt für die Suchergebnisse ein quadratisches Favicon (Seitenverhältnis 1:1) von mindestens 8 × 8 Pixeln und empfiehlt mindestens 48 × 48 Pixel. Unterstützt werden unter anderem ICO, PNG, GIF und JPEG (Google Search Central: Favicon in der Google Suche, Stand September 2026).
| Einsatz | Empfehlung |
|---|---|
| Ausgangsdatei | Quadratisch, groß genug zum Verkleinern, z. B. 512 × 512 px |
| Format | PNG mit transparentem oder farbigem Hintergrund; SVG als Ausgangsdatei aufbewahren |
| Kontrolle | Vorschau in 16, 32 und 48 px ansehen, hell und dunkel |
WordPress empfiehlt für das Website-Icon eine quadratische Datei mit mindestens 512 × 512 Pixeln und erzeugt daraus die kleineren Größen. Prüfen Sie das Motiv dennoch selbst auf dunklem Hintergrund: Viele Browser zeigen Tabs im dunklen Modus an.
Favicon erstellen und in WordPress einbinden
- Motiv vorbereiten: Bildmarke oder Buchstabe auf eine quadratische Fläche setzen, mit etwas Rand.
- Exportieren: Als PNG in 512 × 512 Pixeln speichern. Achten Sie auf einen kurzen, sprechenden Dateinamen.
- Hochladen: Je nach Theme finden Sie das Feld „Website-Icon“ im Customizer unter „Website-Informationen“, in den allgemeinen Einstellungen oder im Website-Editor. Manche Page Builder und Themes haben eigene Einstellungen.
- Zuschneiden und speichern: WordPress bietet nach dem Hochladen einen Zuschnitt an. Speichern Sie die Änderung.
- Prüfen: Website in einem privaten Browserfenster öffnen, da Browser Favicons oft lange zwischenspeichern.
Wann Google das neue Favicon zeigt
Google liest das Favicon über einen <link rel="icon">-Eintrag auf der Startseite. WordPress setzt diesen Eintrag beim Website-Icon automatisch. Laut Google kann es mehrere Tage bis Wochen dauern, bis ein neues Favicon in den Suchergebnissen erscheint. Prüfen Sie daher zuerst den Quelltext Ihrer Startseite, bevor Sie etwas ändern. Wie Sie Ihren Auftritt in den Suchergebnissen insgesamt verständlich gestalten, zeigt der Beitrag SEO-Titel und Meta Description.
Häufige Fehler
- Das ganze Logo mit Schriftzug wird verkleinert und ist nicht mehr lesbar.
- Das Motiv ist nicht quadratisch und wird verzerrt oder abgeschnitten.
- Ein dunkles Symbol ohne Hintergrund verschwindet im dunklen Browser-Modus.
- Das Favicon wird über ein Plugin und zusätzlich im Theme gesetzt – am Ende weiß niemand, welches gilt.
- Das Standardsymbol des Hosters oder Baukastens bleibt nach dem Relaunch stehen.
Checkliste
- Motiv ist auf 16 Pixel noch erkennbar.
- Datei ist quadratisch und mindestens 512 × 512 Pixel groß.
- Icon wirkt auf hellem und dunklem Hintergrund.
- Website-Icon ist an genau einer Stelle in WordPress hinterlegt.
- Quelltext der Startseite enthält einen
rel="icon"-Eintrag. - Ausgangsdatei ist zusammen mit den Logodateien abgelegt.
Unterstützung bei Logo und Website
Wir entwickeln Bildmarken und Favicons, die zu Ihrem Logo passen, im Rahmen unserer visuellen Gestaltung und binden sie bei der Website-Entwicklung technisch sauber ein. Fragen Sie gerne ein unverbindliches Angebot an.