Favicon aus dem Logo: Größen für Browser und Google
Ein Favicon ist das kleine Symbol Ihrer Website. Verwenden Sie das Logozeichen statt eines winzigen vollständigen Namens. Browser-Tabs, Google und installierte Web-Apps haben unterschiedliche Anforderungen; prüfen Sie den tatsächlichen Einsatz.
Auf dieser Seite

Welche Dateien gehören wohin?
| Einsatz | Datei | Größe / Prüfung |
|---|---|---|
| Browser-Tab | SVG / ICO / PNG | 16, 32 px |
| Google Search | PNG / ICO | >48×48 px; PNG96 |
| Apple-Startbildschirm | apple-touch-icon.png | 180×180 px |
| Installierte PWA | PNG + site.webmanifest | 192×192, 512×512 px |
Für Google eignen sich unterstützte Formate wie PNG oder ICO; SVG steht nicht in der aktuellen Formatliste. Das quadratische Symbol muss mindestens 8×8 px haben; Google empfiehlt mehr als 48×48. Daher ist 96×96 sinnvoll und nicht veraltet. Verlinken Sie es auf der Startseite, halten Sie die URL stabil und erlauben Sie Googlebot den Abruf der Seite sowie Googlebot-Image den Abruf des Bildes. Die Einhaltung garantiert keine Anzeige.
Symbol erstellen und veröffentlichen
- Beginnen Sie mit einem erkennbaren Zeichen; entfernen Sie Slogan und feine Details.
- Prüfen Sie die Form bei 16 und 32 px auf hellem und dunklem Hintergrund.
- Exportieren Sie aus der Vektorquelle. Wählen Sie einen Favicon-Ordner im LogoSaga-Paket und erhalten Sie die Manifestpfade.
- Fügen Sie die folgenden Links nur für vorhandene Serverdateien hinzu. Das 96-px-PNG ist ein zusätzlicher Suchexport.

<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
<link rel="manifest" href="/site.webmanifest" />
Ein SVG kann prefers-color-scheme verwenden; prüfen Sie jedoch die unterstützten Browser und Versionen. Ein auf beiden Hintergründen lesbares Zeichen ist ein zuverlässiger Ersatz. Apple-Touch-Icons und Manifest-Icons sind eigene Dateien, keine automatisch erzeugten Varianten des Browser-SVG.
Warum fehlt das Symbol?
Öffnen Sie die Bild-URL direkt: Sie muss ein Bild liefern, keine Fehler- oder Anmeldeseite. Prüfen Sie Startseitenlinks und Crawler-Zugriff. Bei Browserproblemen laden Sie neu oder leeren den lokalen Icon-Cache. Für Google bleibt die URL stabil; beantragen Sie die Indexierung der Startseite in Search Console. Die Verarbeitung kann Tage oder Wochen dauern. Wiederholtes Umbenennen löst kein Suchproblem.
Weiterführende praktische Leitfäden: Logo testen: 10 Prüfungen vor der Veröffentlichung · Logo im Google-Unternehmensprofil: Größe und Upload
Erstellen Sie ein Logo mit passendem FaviconHäufige Fragen
Welche Größe sollte ein Favicon haben?
Für Google eignen sich unterstützte Formate wie PNG oder ICO; SVG steht nicht in der aktuellen Formatliste. Das quadratische Symbol muss mindestens 8×8 px haben; Google empfiehlt mehr als 48×48. Daher ist 96×96 sinnvoll und nicht veraltet. Verlinken Sie es auf der Startseite, halten Sie die URL stabil und erlauben Sie Googlebot den Abruf der Seite sowie Googlebot-Image den Abruf des Bildes. Die Einhaltung garantiert keine Anzeige.
Welches Format sollte ein Favicon haben — SVG, PNG oder ICO?
Ein Favicon ist das kleine Symbol Ihrer Website. Verwenden Sie das Logozeichen statt eines winzigen vollständigen Namens. Browser-Tabs, Google und installierte Web-Apps haben unterschiedliche Anforderungen; prüfen Sie den tatsächlichen Einsatz.
Kann sich ein Favicon im Dark Mode ändern?
Ein SVG kann prefers-color-scheme verwenden; prüfen Sie jedoch die unterstützten Browser und Versionen. Ein auf beiden Hintergründen lesbares Zeichen ist ein zuverlässiger Ersatz. Apple-Touch-Icons und Manifest-Icons sind eigene Dateien, keine automatisch erzeugten Varianten des Browser-SVG.
Warum wird mein Favicon nicht angezeigt oder aktualisiert?
Öffnen Sie die Bild-URL direkt: Sie muss ein Bild liefern, keine Fehler- oder Anmeldeseite. Prüfen Sie Startseitenlinks und Crawler-Zugriff. Bei Browserproblemen laden Sie neu oder leeren den lokalen Icon-Cache. Für Google bleibt die URL stabil; beantragen Sie die Indexierung der Startseite in Search Console. Die Verarbeitung kann Tage oder Wochen dauern. Wiederholtes Umbenennen löst kein Suchproblem.
Quellen
- Define a favicon to show in search results — Google Search Central
- Web app manifest: icons — MDN Web Docs
- Configuring Web Applications — Apple Developer