Favicon erstellen: Formate, Größen und Sichtbarkeit in Google

Viele Websites haben ein Favicon, das nie bewusst gestaltet wurde: das Symbol des Baukastens, ein zusammengedrücktes Logo mit unlesbarem Schriftzug oder die graue Weltkugel, die Browser und Google zeigen, wenn nichts hinterlegt ist. Das fällt auf – spätestens, wenn Ihr Eintrag in den Suchergebnissen zwischen den Einträgen von Wettbewerbern mit klarem Symbol steht.

Ein Favicon zu erstellen dauert nicht lange. Es gibt aber einige technische Vorgaben, ohne die das Symbol nicht überall erscheint. Dieser Leitfaden führt Sie von der Gestaltung über die Dateien bis zur Anzeige in Google.

Was ist ein Favicon und wo erscheint es?

Der Begriff setzt sich aus „Favorite“ und „Icon“ zusammen. Ursprünglich war das Symbol für die Lesezeichen-Liste gedacht, heute begegnet es Nutzern an vielen Stellen:

• Browser-Tab: Wer mehrere Seiten geöffnet hat, findet Ihre Website über das Symbol wieder.
• Lesezeichen und Verlauf: Neben dem Seitentitel in Listen und Schnellzugriffen.
• Google-Suchergebnisse: Neben dem Websitenamen und der Adresse über dem Titel Ihres Eintrags.
• Startbildschirm des Smartphones: Wer Ihre Seite dort ablegt, sieht ein größeres App-Symbol. Dafür sind eigene Dateien zuständig, das Apple-Touch-Icon und die Icons im Web-App-Manifest.

Technisch ist das Favicon eine Bilddatei, die über ein <link>-Element im Kopfbereich der Seite eingebunden wird. Fehlt dieses Element, fragen viele Browser zusätzlich die Datei /favicon.ico im Stammverzeichnis der Domain ab.

Warum das Favicon in den Google-Suchergebnissen zählt

In den Suchergebnissen steht das Favicon direkt neben Ihrem Namen. Gerade bei lokalen Suchen wie „Heizung Notdienst“ oder „Steuerberater in der Nähe“ stehen viele ähnliche Einträge untereinander. Ein klares, wiedererkennbares Symbol hilft Menschen, die Ihren Betrieb schon kennen, Sie dort schneller zu finden. Fehlt das Favicon oder hält Google es für ungeeignet, erscheint ein neutrales Standardsymbol.

Google beschreibt in der Search-Central-Dokumentation (zuletzt aktualisiert Ende Oktober 2026) genau, was für die Anzeige nötig ist:

• Quadratisch: Seitenverhältnis 1:1, mindestens 8 × 8 Pixel. Google empfiehlt ausdrücklich mehr als 48 × 48 Pixel, damit das Symbol auf verschiedenen Oberflächen gut aussieht.
• Unterstütztes Format: Google nennt BMP, GIF, ICO, PNG, JPEG, PPM und TIFF.
• Auf der Startseite eingebunden: über <link rel="icon" href="…"> im Kopfbereich. Google wertet außerdem shortcut icon und apple-touch-icon aus.
• Für Google erreichbar: Googlebot muss die Startseite crawlen dürfen, Googlebot-Image die Bilddatei. Beides darf nicht per robots.txt oder anders gesperrt sein.
• Stabile Adresse: Die URL des Favicons sollte sich nicht häufig ändern.
• Passend zur Marke: Das Symbol soll Ihre Marke darstellen. Unangemessene Inhalte ersetzt Google durch das Standardsymbol.

Wichtig: Auch wenn alle Vorgaben erfüllt sind, sagt Google keine Anzeige zu. Pro Hostname gibt es außerdem nur ein Favicon. Subdomains wie shop.beispiel.de können ein eigenes haben, Unterverzeichnisse wie beispiel.de/standort-esslingen/ nicht.

Welche Dateien und Größen Sie brauchen

Früher reichte eine einzige ICO-Datei. Heute fragen Browser, Betriebssysteme und Suchmaschinen unterschiedliche Formate ab. Mit diesem Set sind Sie auf allen gängigen Geräten abgedeckt:

Die Größen für das Web-App-Manifest stammen aus der Dokumentation von web.dev: Chromium-Browser verlangen dort mindestens ein Icon mit 192 und eines mit 512 Pixeln. Das Apple-Touch-Icon mit 180 × 180 Pixeln ist die Größe für hochauflösende iPhones, wie sie unter anderem die MDN-Dokumentation zum <link>-Element nennt.

Im Kopfbereich der Seite sieht die Einbindung dann zum Beispiel so aus:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon-192.png" type="image/png" sizes="192x192">
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Sind mehrere Icons angegeben, wählt der Browser laut MDN anhand von type, sizes und media das passendste aus. Kann er ein Format nicht darstellen, greift er auf das nächstbeste zurück.

Das Favicon gestalten: vom Logo zum Symbol

Die größte Hürde ist selten die Technik, sondern die Gestaltung. Ein Logo, das auf dem Briefkopf gut aussieht, ist bei 16 oder 32 Pixeln oft nicht mehr zu erkennen. Bewährt haben sich diese Regeln:

• Bildmarke statt Wortmarke: Hat Ihr Logo ein Symbol – ein Dach, einen Tropfen, einen Blitz –, nehmen Sie nur dieses. Ein ausgeschriebener Firmenname ist in Tab-Größe nicht lesbar.
• Initialen als Ausweg: Besteht das Logo nur aus Schrift, funktionieren ein oder zwei Anfangsbuchstaben in Ihrer Hausschrift und -farbe.
• Vereinfachen: Feine Linien, Schatten und Verläufe verschwinden bei kleiner Darstellung. Arbeiten Sie mit kräftigen Formen und wenigen Farben.
• Fläche nutzen: Das Symbol sollte das Quadrat weitgehend ausfüllen, mit wenig Rand.
• Hell und dunkel testen: Browser-Tabs und Suchergebnisse gibt es im hellen und im dunklen Design. Ein dunkelblaues Symbol auf transparentem Hintergrund verschwindet auf dunklem Grund. Eine farbige Fläche hinter dem Symbol oder eine helle Kontur löst das.

Farben und Formen des Favicons sollten zu Ihrem übrigen Auftritt passen. Wer Logo-Varianten, Farbwerte und Schriften einmal festhält, spart später Abstimmungen – wie das geht, zeigt der Beitrag Styleguide für die Website.

Favicon erstellen in sechs Schritten

1. Ausgangsgrafik besorgenAm besten eignet sich das Logo als Vektordatei (SVG, AI, EPS oder PDF). Ihre Grafikerin oder Druckerei hat sie meist vorliegen.
2. Quadratische Variante anlegenBildmarke oder Initialen auf eine quadratische Arbeitsfläche setzen, wenig Rand lassen, bei Bedarf eine Hintergrundfläche ergänzen.
3. Klein prüfenDie Grafik auf 32 und 16 Pixel verkleinern und ansehen. Details, die verschwimmen, entfernen.
4. Dateien exportierenEine PNG-Datei mit 512 × 512 Pixeln als Master exportieren. Daraus die kleineren PNGs, das Apple-Touch-Icon und eine ICO-Datei erzeugen. Dafür gibt es Grafikprogramme und kostenlose Online-Generatoren.
5. EinbindenDie Dateien hochladen und im Kopfbereich aller Seiten verlinken – mindestens aber auf der Startseite. In WordPress übernimmt das die Funktion „Website-Symbol“.
6. TestenBrowser-Cache leeren, Seite in mehreren Browsern und auf dem Smartphone öffnen, die Datei /favicon.ico direkt aufrufen und prüfen, ob sie erreichbar ist.

Favicon in WordPress einbinden

WordPress bringt eine eigene Funktion mit, das Website-Symbol (englisch „Site Icon“). Seit Version 6.5 finden Sie es laut WordPress-Dokumentation unter Einstellungen › Allgemein, in älteren Versionen im Customizer unter „Design › Customizer › Website-Informationen“. Das Bild muss quadratisch sein und mindestens 512 × 512 Pixel groß, empfohlen wird das PNG-Format. WordPress erzeugt daraus selbst die nötigen kleineren Varianten und bindet sie im Kopfbereich ein.

Ein paar Stolperfallen sehen wir in der Praxis immer wieder:

• Doppelte Einbindung: Manche Themes oder Page-Builder haben ein eigenes Feld für das Favicon. Ist an beiden Stellen etwas hinterlegt, landen widersprüchliche Angaben im Quelltext.
• Altes Symbol im Stammverzeichnis: Liegt dort noch eine favicon.ico aus der Zeit vor dem Relaunch, zeigen manche Browser weiter das alte Symbol. Ersetzen Sie die Datei mit.
• Wartungsmodus und Zugriffsschutz: Ist die Startseite während einer Umbauphase für Besucher gesperrt, kann Google das Favicon nicht abrufen.

Wann erscheint das neue Favicon bei Google?

Google ruft das Favicon beim Crawlen der Startseite ab. Laut Dokumentation kann das einige Tage bis mehrere Wochen dauern. Beschleunigen lässt sich der Vorgang, indem Sie in der Google Search Console mit dem URL-Prüftool die Indexierung der Startseite beantragen. Wie Sie die Search Console einrichten, erklärt der Beitrag Google Search Console einrichten.

Zeigt Google weiterhin ein altes oder gar kein Favicon, prüfen Sie der Reihe nach:

• Steht das <link rel="icon">-Element im Quelltext der Startseite – nicht nur auf Unterseiten?
• Ist die Bilddatei unter ihrer Adresse direkt erreichbar, ohne Fehlermeldung oder Weiterleitung auf die Startseite?
• Blockiert die robots.txt das Verzeichnis, in dem das Favicon liegt, oder den Bild-Crawler von Google?
• Ist das Bild wirklich quadratisch und in einem unterstützten Format?
• Haben Sie die Adresse des Favicons kürzlich mehrfach geändert?

Planen Sie ohnehin einen Umbau, gehört das Favicon auf die Liste der Punkte, die nach dem Livegang geprüft werden. Die Website-Relaunch-Checkliste hilft, nichts zu vergessen.

Häufige Fehler beim Favicon

• Standard-Symbol des Systems: Das Logo von Baukasten, Hoster oder CMS statt des eigenen Symbols.
• Querformat-Logo zusammengestaucht: Das Seitenverhältnis stimmt nicht, das Symbol wirkt verzerrt oder wird gar nicht angezeigt.
• Unlesbarer Schriftzug: Der vollständige Firmenname auf 16 Pixeln.
• Unsichtbar im Dark Mode: Dunkles Symbol ohne Hintergrund.
• Nur SVG: Ohne PNG- oder ICO-Alternative erscheint in der Google-Suche womöglich kein Favicon.
• Datei gesperrt oder verschoben: Nach einem Umzug zeigt der Link ins Leere.

Checkliste: Favicon

• Das Favicon ist quadratisch und aus dem Logo abgeleitet, nicht aus einer Vorlage.
• Es ist bei 16 und 32 Pixeln noch eindeutig erkennbar.
• Es funktioniert auf hellem und dunklem Hintergrund.
• Es gibt eine PNG-Datei mit mindestens 48 × 48 Pixeln und eine favicon.ico im Stammverzeichnis.
• Ein Apple-Touch-Icon mit 180 × 180 Pixeln ist eingebunden.
• Das Favicon ist im Kopfbereich der Startseite verlinkt und nur an einer Stelle hinterlegt.
• Startseite und Bilddatei sind für Googlebot und Googlebot-Image erreichbar.
• Nach der Umstellung wurde die Startseite in der Search Console zur Indexierung eingereicht.

Häufige Fragen

Quellen

1. Google Search Central: Favicon in den Suchergebnissen festlegen – Zuletzt aktualisiert am 29.10.2026; Formate, Größe, Crawling
2. WordPress.org Documentation: Create a Favicon – Website-Symbol ab WordPress 6.5 unter Einstellungen › Allgemein
3. web.dev: Add a web app manifest – Icon-Größen 192 und 512 Pixel
4. MDN Web Docs: Das link-Element – Icons für verschiedene Nutzungskontexte – Apple-Touch-Icon-Größen, sizes-Attribut
5. MDN Web Docs: rel="icon" – Auswahl bei mehreren Icons