Favicons sind klein, aber ihre Wirkung ist groß. Sie tauchen in der Google-Suche, im Browser-Tab, in Lesezeichen und auf dem Smartphone-Homescreen auf. Und doch sieht man selbst bei großen Marken oft unsaubere Icons: mal zu klein, mal mit Rand, mal gar nicht sichtbar. Das liegt fast immer an einem überladenen oder fehlerhaften Setup.
Wir zeigen, wie man mit wenigen, klaren Einträgen im <head> der Website ein Favicon-Setup erstellt, das 2025 überall sauber funktioniert. Das Endergebnis sieht so aus:
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192"> <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml"> <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> <meta name="apple-mobile-web-app-title" content="Elbnetz"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#0D89CF">
32×32 PNG: gestochen scharf in Google
Der erste Eintrag verweist auf eine PNG-Datei mit 32 Pixel Kantenlänge:
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
Google verkleinert Favicons in den Suchergebnissen auf winzige 16 Pixel. Wenn man ein 192×192 oder gar ein 512×512-Icon überlässt, entsteht schnell ein Problem: Google skaliert nicht nur herunter, sondern berücksichtigt auch transparente Ränder. Das Ergebnis ist ein winziges Symbol, das im weißen Kasten verloren wirkt.
Ein sauberes 32×32 ohne Rand wird dagegen klar und kontrastreich dargestellt. Darum ist dieses Icon speziell für die Google-SERPs entscheidend.
192×192 PNG: moderner Standard
Der zweite Eintrag liefert ein größeres PNG:
<link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
Dieses Bild ist der Standard für alle modernen Browser. Chrome, Firefox und Edge nutzen es als Basis und skalieren daraus die passenden Größen für Tabs, Bookmarks oder Systemoberflächen. Es ist groß genug, damit es auch auf hochauflösenden Displays sauber wirkt, ohne überdimensioniert zu sein.
Man könnte auch ein noch größeres 512×512 anbieten, aber die Praxis zeigt: 192×192 ist das zuverlässigste Maß für den Alltag.
SVG: Vektor für die Zukunft
Der dritte Eintrag bindet ein SVG ein:
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
Ein SVG ist kein Pixelbild, sondern Vektor – es bleibt in jeder Auflösung gestochen scharf. Moderne Browser unterstützen das und zeigen es perfekt skaliert an. Wichtig ist, dass das SVG sauber aufgebaut ist: quadratisch, mit festem viewBox, ohne externe Fonts oder CSS.
Warum also nicht nur SVG? Weil Google und manche ältere Systeme PNG oder ICO immer noch bevorzugen. Das SVG ist daher die elegante Ergänzung, nicht der alleinige Träger.
Apple Touch Icon: Pflicht für iPhones
Der vierte Eintrag sieht so aus:
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
Apple geht gern seinen eigenen Weg. Für iOS reicht ein normales Favicon nicht. Wer möchte, dass die Website beim „Zum Home-Bildschirm hinzufügen“ ein schönes Icon bekommt, muss ein spezielles Apple Touch Icon anbieten.
Die empfohlene Größe ist 180×180 Pixel. Es sollte ebenfalls quadratisch und randlos sein, am besten mit kräftigen Farben, die auch auf hellem Hintergrund wirken. Ohne diesen Eintrag sieht die Seite auf dem iPhone wie ein generisches Lesezeichen aus – kein guter Eindruck.
ICO-Datei: der Evergreen
Der fünfte Eintrag ist der Klassiker:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Die ICO-Datei ist ein Überbleibsel aus den Anfangsjahren des Webs, aber sie ist immer noch nützlich. Viele Tools, ältere Browser und auch einige Bots erwarten, dass unter /favicon.ico etwas liegt.
Ein modernes ICO enthält mehrere Auflösungen (16, 32, 48 Pixel) in einer Datei. So hat jedes System etwas Passendes zur Hand. Selbst wenn PNG und SVG schon alles abdecken – das ICO ist der Fels in der Brandung.
App-Titel für iOS
Im nächsten Eintrag steckt nur Text:
<meta name="apple-mobile-web-app-title" content="Elbnetz">
Dieser Meta-Tag bestimmt den kurzen Namen, den iOS anzeigt, wenn jemand Ihre Website als Icon auf dem Homescreen speichert. Ohne diesen Eintrag verwendet iOS automatisch den <title> der Seite – der ist jedoch oft zu lang und wird dann unschön abgeschnitten.
Mit dem Meta-Tag können Sie stattdessen einen klaren, prägnanten Namen festlegen, zum Beispiel einfach „Elbnetz“.
Warum taucht hier bei vielen Beispielen der Begriff „IONOS“ auf? Ganz einfach: Viele Hosting-Anbieter oder Generatoren fügen dieses Tag automatisch mit einem Platzhalter ein – oft dem Namen des Hosting-Pakets oder des Anbieters. Wer den Code unverändert übernimmt, hat plötzlich „IONOS“ oder „Generator-Default“ als App-Namen auf dem iPhone-Homescreen.
Die Lösung ist simpel: Den Wert manuell mit dem eigenen Markennamen überschreiben. So bleibt die Darstellung auch auf Mobilgeräten konsistent und professionell.
Manifest: Komfort für Android
Der folgende Eintrag verweist auf eine kleine JSON-Datei:
<link rel="manifest" href="/site.webmanifest">
Dieses Manifest liefert Chrome und Android zusätzliche Informationen: Name, Kurzname, Start-URL, Farben, Icons. Wer die Seite zum Startbildschirm hinzufügt, bekommt damit ein konsistentes Ergebnis.
Für SEO oder die Darstellung des Favicons ist es nicht nötig – aber es rundet die mobile Erfahrung ab. Ein Minimalmanifest mit Name, Icons und Theme-Farbe reicht völlig.
Erstelle eine Datei mit dem Namen site.webmanifest und speichere sie im Domain-Root deiner Website, also z. B. https://elbnetz.com/site.webmanifest
Der Inhalt der Datei sieht zum Beispiel so aus:
{
"name": "Elbnetz",
"short_name": "Elbnetz",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#001B41",
"icons": [
{ "src": "/favicon-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" }
]
}
Die referenzierten Dateien müssen existieren und ebenfalls aus dem Root erreichbar sein
Wenn Google plötzlich das falsche Icon zeigt
Viele Website-Betreiber erleben es irgendwann: Wochenlang wird in den Suchergebnissen das gewünschte Favicon angezeigt, und plötzlich erscheint ein anderes Bild – oft das Apple Touch Icon. Das wirkt verwirrend, ist aber kein Fehler, sondern liegt an der Art, wie Google Favicons verarbeitet.
Warum passiert das?
Google durchsucht beim Crawlen nicht nur die klassischen Quellen wie <link rel="icon"> oder /favicon.ico, sondern schaut sich auch andere Dateien an, die als Favicon-Ersatz taugen könnten. Dazu gehört insbesondere das Apple Touch Icon, das eigentlich für iOS-Homescreens gedacht ist.
Wenn Google den Eindruck hat, dass das eigentliche Favicon zu klein, zu transparent oder technisch problematisch ist, greift es kurzerhand auf das Apple Touch Icon zurück. Dazu kommt: Favicons werden bei Google extrem stark gecacht. Ein einmal „falsch“ gewähltes Icon bleibt daher oft tagelang oder sogar wochenlang im Suchergebnis sichtbar.
Wie kann man das steuern?
Die sicherste Lösung besteht darin, dass Favicon und Apple Touch Icon dasselbe Motiv zeigen. So vermeidet man, dass in den Google-Suchergebnissen plötzlich ein anderes Symbol auftaucht. Zusätzlich sollte man sicherstellen, dass das eigentliche Favicon (z. B. favicon-32x32.png) ohne Umwege im Root liegt und von Google mit 200 OK abgerufen werden kann.
Fazit
Auch wenn es paradox klingt: Manchmal entscheidet Google selbst, welches Icon in den Suchergebnissen erscheint. Wer inkonsistente Darstellungen vermeiden will, sollte alle eingebundenen Icons auf das gleiche Motiv angleichen. So bleibt das Markenbild stabil – egal, ob Google das klassische Favicon oder das Apple Touch Icon anzeigt.
Theme-Color: kleines Detail, große Wirkung
Zum Schluss eine Meta-Angabe:
<meta name="theme-color" content="#0D89CF">
Damit lässt sich die Farbe der Adress- oder Statusleiste in mobilen Browsern festlegen. Statt des Standardgraus erscheint die Markenfarbe. Ein kleines Detail, das sofort für ein professionelleres Erscheinungsbild sorgt.
Bonus: Eigenes Favicon auch im WordPress-Backend
Standardmäßig zeigt WordPress im Backend und auf der Login-Seite sein blaues Logo als Favicon. Wer seinen Markenauftritt konsequent gestalten möchte, kann auch hier das eigene Icon einbinden. Mit einem kleinen Codeschnipsel in der functions.php (am besten im Child-Theme) lässt sich das WordPress-Logo durch das eigene Favicon ersetzen – so bleibt die Markenidentität auch im internen Bereich konsistent.
/**
* Eigenes Favicon im Backend und auf der Login-Seite einbinden
*/
function elbnetz_custom_admin_favicon() {
echo '<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">' . "\n";
}
add_action('admin_head', 'elbnetz_custom_admin_favicon'); // für wp-admin
add_action('login_head', 'elbnetz_custom_admin_favicon'); // für wp-login
Hinweis:
- Passen Sie den Pfad (
/favicon-32x32.png) an deine Datei an. - Legen Sie die Datei ins Root deiner Domain, damit sie auch im Backend ohne Probleme gefunden wird.
- Browser cachen Favicons hartnäckig – bei Änderungen ggf. den Cache leeren.
So sehen sowohl deine Website-Besucher als auch Sie im Backend immer Ihr Marken-Favicon – ein kleines, aber wirksames Detail für ein professionelles Gesamtbild.
Fazit
Jedes Element in diesem Snippet hat seine Aufgabe. Das 32×32 PNG sorgt für Schärfe in Google, das 192×192 für moderne Browser, das SVG für die Zukunft und das Apple Touch Icon für iOS. Die ICO-Datei hält alte Systeme zufrieden, der App-Titel verhindert peinliche Platzhalter-Namen, das Manifest verbessert die Nutzererfahrung auf Android, und die Theme-Farbe gibt der mobilen Oberfläche den letzten Schliff.
Mit diesem Set sind Sie auf der sicheren Seite – nicht überladen, aber überall präsent.
Hinweis: Dieser Beitrag wurde mit Unterstützung von KI-Tools erstellt und redaktionell überarbeitet.