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
  1. Welche Dateien gehören wohin?
  2. Symbol erstellen und veröffentlichen
  3. Warum fehlt das Symbol?
Dasselbe Zeichen in Favicon-Größen, inklusive einer Version in Browser-Tab-Größe.
Ein Favicon ist das Zeichen Ihres Logos, vereinfacht, damit es in winzigen Größen klar bleibt.

Welche Dateien gehören wohin?

EinsatzDateiGröße / Prüfung
Browser-TabSVG / ICO / PNG16, 32 px
Google SearchPNG / ICO>48×48 px; PNG96
Apple-Startbildschirmapple-touch-icon.png180×180 px
Installierte PWAPNG + site.webmanifest192×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

  1. Beginnen Sie mit einem erkennbaren Zeichen; entfernen Sie Slogan und feine Details.
  2. Prüfen Sie die Form bei 16 und 32 px auf hellem und dunklem Hintergrund.
  3. Exportieren Sie aus der Vektorquelle. Wählen Sie einen Favicon-Ordner im LogoSaga-Paket und erhalten Sie die Manifestpfade.
  4. Fügen Sie die folgenden Links nur für vorhandene Serverdateien hinzu. Das 96-px-PNG ist ein zusätzlicher Suchexport.
Der Export-Schritt im LogoSaga-Editor zeigt favicon.svg zusammen mit den Logo-Dateien.
Der Export aus dem Vektor-Master liefert ein Favicon, das exakt zum Logo passt.
<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 Favicon

Hä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