technical

Favicon

MetricSpot sucht einen Favicon-Link auf der Seite. Browser, Lesezeichen, Tab-Leisten und SERPs nutzen ihn, um deine Seite visuell zu identifizieren.

Was diese Prüfung macht

Sucht im <head> nach einem <link rel="icon"> oder <link rel="shortcut icon"> (oder, als Fallback, einer /favicon.ico im Domain-Root) und prüft, ob die referenzierte Datei lädt.

Warum es zählt

Drei Stellen nutzen dein Favicon, alle nutzersichtbar:

  1. Browser-Tableisten und Lesezeichen — sofortige visuelle Identifikation, wenn ein:e Nutzer:in 30 Tabs offen hat.
  2. Google-Suchergebnisse — Google zeigt Favicons neben dem Site-Namen in mobilen SERPs und zunehmend auch auf Desktop. Seiten ohne Favicon zeigen ein generisches Globus-Icon, das neben Mitbewerbern unfertig wirkt.
  3. Browser-Verlauf, Downloads, OS-App-Switcher — überall, wo OS oder Browser die Identität deiner Seite cachen.

Ein fehlendes Favicon ist das visuelle Äquivalent zu einem Brief ohne Absenderadresse. Die Seite funktioniert noch; sie wirkt nur nicht seriös.

So behebst du es

Liefere zwei Icon-Dateien aus und verlinke sie korrekt:

1. Die klassische .ico — für Legacy-Browser und den Auto-Detect-Pfad.

Lege sie im Domain-Root ab:

public/favicon.ico   (16×16, 32×32 Multi-Resolution-ICO)

Die meisten Browser holen /favicon.ico selbst ohne <link>-Tag, aber explizit ist besser.

2. Ein SVG-Icon — für moderne Browser, skaliert auf jede Größe.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Der Browser wählt, was er bevorzugt (Chrome und Firefox bevorzugen SVG; Safari fällt auf ICO zurück).

3. PWA / große Icons — Kombiniere mit apple-touch-icon und dem Web-Manifest.

<link rel="apple-touch-icon" href="/apple-touch-icon.png">  <!-- 180×180 -->
<link rel="manifest" href="/site.webmanifest">

Siehe die Prüfungen Apple Touch Icon und Web-Manifest.

Kompletter Head-Block:

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

Das ist alles, was die meisten Seiten brauchen.

Aus einer Quelle das ganze Set generieren:

RealFaviconGenerator nimmt ein Quellbild (idealerweise SVG oder ein 512×512-PNG) und gibt die ganze Icon-Familie plus das HTML zum Einfügen aus. Deckt iOS, Android, Windows-Tiles und PWA-Installierbarkeit ab.

Astro: Lege die Dateien in public/ ab und verlinke sie im <head> deines Layouts. Astro konfiguriert das link rel="icon" bereits aus astro:assets, wenn du es nutzt.

Next.js (App Router): Lege favicon.ico und optional icon.svg direkt in app/ ab. Das Framework injiziert die <link>-Tags automatisch.

app/
  favicon.ico       # auto-verlinkt
  icon.svg          # optional, auto-verlinkt
  apple-icon.png    # optional, 180×180, auto-verlinkt

WordPress: Design → Anpassen → Website-Identität hat einen Uploader für „Website-Icon”. WordPress generiert und verlinkt das volle Set automatisch.

Design-Hinweise:

  • Nutze ein quadratisches Design. Browser beschneiden ohnehin auf Quadrat.
  • Hoher Kontrast — Favicons werden in Tableisten mit 16×16 angezeigt, wo feine Details verschwinden.
  • Im Dunkelmodus testen. Ein Logo auf transparentem Hintergrund, das auf Weiß funktionierte, kann auf dunklen Tableisten unsichtbar werden.

Google-SERP-Anforderungen:

Google hat zusätzliche Regeln für das SERP-Favicon — quadratisch, mindestens 8×8 und mit einer stabilen URL. Seiten, die ihre Favicon-URL bei jedem Deploy rotieren, können bei Google als Globus erscheinen. Nutze einen stabilen Dateinamen und hänge nie einen Query-String an.

Häufig gestellte Fragen

Brauche ich .ico, oder reicht SVG?

Beides, vorerst. SVG ist die Zukunft, ICO die Gegenwart — Safari und einige ältere Chrome-Versionen bevorzugen ICO für die Tableiste weiterhin. Bis etwa 2027 liefere beides.

Warum erscheint mein Favicon nicht in Google-Suchergebnissen?

Drei häufige Ursachen:

  1. Die URL liefert 404 oder 403 — prüfe mit curl -I https://yoursite.com/favicon.ico.
  2. Das Icon ist zu klein (unter 8×8) — generiere eine Multi-Resolution-ICO bei 16, 32 und 48.
  3. Google hat die Site seit dem Hinzufügen noch nicht neu gecrawlt — warte bis zu einer Woche oder fordere Indexierung in der Search Console an.

Was ist mit dem Dunkel-/Hell-Favicon-Trick?

Moderne Browser unterstützen Media-Query-SVG-Icons:

<link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)" type="image/svg+xml">
<link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)" type="image/svg+xml">

Oder bette beides in ein SVG mit <style>-Tag via prefers-color-scheme ein. Beides funktioniert; das zweite spart einen HTTP-Request.

Quellen

Zuletzt aktualisiert 2026-05-11