Ein Favicon erstellen Sie am besten aus dem Bildzeichen Ihres Logos: quadratisch, mindestens 512 × 512 Pixel groß, als PNG gespeichert. In WordPress laden Sie diese eine Datei unter Einstellungen → Allgemein → Website-Icon hoch, die kleineren Varianten erzeugt WordPress selbst. Ohne WordPress brauchen Sie eine favicon.ico, eine SVG-Datei, ein Apple-Touch-Icon mit 180 Pixeln und zwei Icons mit 192 und 512 Pixeln für das Web-App-Manifest.
Was ist ein Favicon und wo wird es angezeigt?
Das Favicon ist das kleine Bild links im Browser-Tab. Es erscheint außerdem in den Lesezeichen, im Verlauf, auf dem Startbildschirm des Smartphones, wenn jemand Ihre Seite dort ablegt – und häufig neben Ihrem Eintrag in der Google-Suche. Fehlt es, zeigt der Browser nur ein neutrales Platzhaltersymbol, und Google zeigt meist ein graues Standardsymbol. Das wirkt unfertig: Zwischen zwanzig offenen Tabs ist Ihre Seite dann die einzige ohne Wiedererkennung.
Welches Motiv eignet sich für ein Favicon?
Nehmen Sie das Bildzeichen Ihres Logos, nicht das komplette Logo mit Schriftzug. Im Browser-Tab wird das Favicon meist mit 16 × 16 Pixeln dargestellt – auf dieser Fläche ist Text nicht lesbar, ein Firmenname wird zu grauem Rauschen. Hat Ihr Logo kein eigenes Bildzeichen, funktioniert auch der Anfangsbuchstabe in Ihrer Markenfarbe auf einer einfarbigen Fläche.
- Wenige, kräftige Formen statt feiner Linien und Verläufe.
- Motiv füllt das Quadrat weitgehend aus, aber mit etwas Rand.
- Ausreichend Kontrast – sowohl auf hellen als auch auf dunklen Tab-Leisten.
Meine Faustregel: Verkleinern Sie Ihren Entwurf auf 16 × 16 Pixel und schauen Sie ihn aus einem Meter Abstand an – erkennen Sie Ihre Marke dann nicht sofort, ist das Motiv zu detailreich. Ob Ihre Farben auf hellem und dunklem Hintergrund genug Abstand haben, prüfen Sie mit dem kostenlosen Kontrast-Checker.
Welche Größen braucht ein Favicon?
Die Ausgangsdatei ist immer ein Quadrat mit mindestens 512 × 512 Pixeln. Daraus entstehen alle weiteren Varianten. Mit WordPress brauchen Sie nur die erste Zeile der Tabelle, ohne WordPress alle.
| Datei | Größe | Wofür |
|---|---|---|
| Website-Icon (WordPress) | mindestens 512 × 512 px, PNG | Ausgangsdatei, WordPress erzeugt daraus die kleineren Größen |
| favicon.ico | 32 × 32 px | Rückfallebene für ältere Browser und Programme, die direkt nach /favicon.ico fragen |
| icon.svg | Vektor, quadratisch | scharf in jeder Größe in aktuellen Browsern |
| apple-touch-icon.png | 180 × 180 px | Startbildschirm auf iPhone und iPad (übliche Praxis) |
| icon-192.png | 192 × 192 px | Web-App-Manifest, Android-Startbildschirm |
| icon-512.png | 512 × 512 px | Web-App-Manifest, Startbildschirm beim Installieren der Seite |
Die beiden Manifest-Größen sind nicht beliebig: Für Chromium-Browser verlangt die Dokumentation von web.dev mindestens ein Icon mit 192 × 192 und eines mit 512 × 512 Pixeln.
Wie binde ich das Favicon ohne WordPress im HTML ein?
Legen Sie die Dateien ins Hauptverzeichnis Ihrer Website und tragen Sie diese vier Zeilen in den <head> jeder Seite ein:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">In die Datei manifest.webmanifest gehören mindestens der Name der Seite und die beiden großen Icons:
{
"name": "Ihr Firmenname",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}Die SVG-Datei wird von aktuellen Versionen von Chrome, Edge, Firefox und Safari verwendet. Ältere Browser ignorieren sie und greifen auf die favicon.ico zurück – deshalb gehören beide dazu.
Wie lade ich ein Favicon in WordPress hoch?
Seit WordPress 6.5 sitzt das Website-Icon wieder bei den allgemeinen Einstellungen, direkt unter Titel und Untertitel. Das funktioniert auch mit Block-Themes, bei denen der Customizer fehlt.
- Im Dashboard Einstellungen → Allgemein öffnen.
- Beim Punkt Website-Icon das Bild auswählen oder hochladen (quadratisch, mindestens 512 × 512 Pixel, am besten PNG).
- Falls nötig den Ausschnitt zuschneiden.
- Ganz unten auf „Änderungen speichern“ klicken.
Ältere Versionen bis WordPress 6.4 und viele klassische Themes bieten denselben Upload unter Design → Customizer → Website-Informationen. Aus der hochgeladenen Datei erzeugt WordPress automatisch Varianten mit 32, 180, 192 und 270 Pixeln und schreibt die passenden Verweise selbst in den Seitenkopf – 32 Pixel als Favicon, 180 als Apple-Touch-Icon, 192 für Android. Seit WordPress 7.1 kommt intern noch eine 64-Pixel-Version für die Werkzeugleiste hinzu. Sie müssen also keine einzelnen Dateien anlegen. Die vollständige Anleitung finden Sie auch in der WordPress-Dokumentation.
Wichtig: Hat Ihr Theme oder ein Plugin bereits eigene Favicon-Verweise eingebaut, entstehen doppelte Angaben. Prüfen Sie im Quelltext der Startseite, dass nur ein Satz Favicon-Links vorhanden ist.
Warum zeigt Google mein Favicon nicht an?
Google übernimmt das Favicon nur, wenn einige Bedingungen erfüllt sind. Laut Google Search Central gilt:
- Das Favicon muss quadratisch sein (Seitenverhältnis 1:1) und mindestens 8 × 8 Pixel groß. Empfohlen sind mindestens 48 × 48 Pixel.
- Startseite und Favicon-Datei dürfen nicht für den Googlebot gesperrt sein, etwa durch die robots.txt.
- Google zeigt nur ein Favicon pro Hostname. Unterverzeichnisse bekommen kein eigenes.
- Die Favicon-URL sollte sich möglichst nicht ändern.
Selbst wenn alles stimmt, dauert es mehrere Tage bis mehrere Wochen, bis das neue Icon in den Suchergebnissen erscheint – eine Garantie gibt Google nicht. Beschleunigen können Sie das, indem Sie in der Search Console über die URL-Prüfung die Indexierung der Startseite beantragen. Taucht Ihre Seite insgesamt nicht in der Suche auf, liegt das Problem tiefer: Dazu habe ich einen eigenen Beitrag, wenn die Website nicht bei Google zu finden ist.
Gilt in Österreich etwas anderes?
Nein. Das Favicon ist eine Frage von Browsern und Suchmaschinen, nicht von Landesrecht. Für eine Website mit .at-Domain gelten dieselben Größen, derselbe WordPress-Weg und dieselben Google-Anforderungen wie für eine .de-Seite. Achten Sie in beiden Ländern nur darauf, ein Logo zu verwenden, an dem Sie die Nutzungsrechte haben.
Das Favicon ist ein kleines Detail, das zeigt, ob ein Auftritt zu Ende gedacht ist. Wenn Sie nicht nur das Icon, sondern die ganze Website stimmig aufsetzen lassen wollen, finden Sie mein Angebot unter Webdesign.
Häufige Fragen zum Favicon
Kann ich ein Favicon kostenlos erstellen?
Ja. Jedes Grafikprogramm, das ein quadratisches PNG mit 512 × 512 Pixeln exportiert, reicht aus. Mit WordPress ist danach nichts weiter nötig. Ohne WordPress erzeugen Sie die favicon.ico und die kleineren PNG-Größen mit einem Bildbearbeitungsprogramm oder einem Favicon-Konverter.
Muss ein Favicon eine .ico-Datei sein?
Nein. Google akzeptiert unter anderem ICO, PNG, GIF und JPEG, aktuelle Browser auch SVG. Die favicon.ico im Hauptverzeichnis ist trotzdem sinnvoll, weil manche Programme und ältere Browser ohne weiteren Hinweis genau dort nachsehen.
Warum sehe ich nach dem Austausch noch das alte Favicon?
Browser speichern Favicons sehr hartnäckig zwischen. Öffnen Sie die Seite in einem privaten Fenster oder leeren Sie den Browser-Cache. Bei Google dauert die Aktualisierung zusätzlich Tage bis Wochen.
Darf das Favicon einen transparenten Hintergrund haben?
Für das Favicon im Tab ja – prüfen Sie dann aber, ob das Motiv auf heller und dunkler Tab-Leiste sichtbar bleibt. Für das Apple-Touch-Icon und die Manifest-Icons ist ein vollflächiger Hintergrund in Ihrer Markenfarbe die sichere Wahl, weil diese Icons auf dem Startbildschirm als eigene Kachel erscheinen.
Kann eine Unterseite ein eigenes Favicon bekommen?
Im Browser-Tab ja, wenn Sie auf dieser Seite andere Favicon-Links setzen. In der Google-Suche nein: Google verwendet ein Favicon pro Hostname, und zwar das der Startseite. Ein eigenes Icon in der Suche bekommt nur eine eigene Subdomain, etwa shop.ihre-domain.de.
Gunther Schoepf