Brauche ich 2025 noch favicon.ico?

Ein praktischer Blick auf favicon.ico im Jahr 2025: Moderne Browser verlangen es nicht, trotzdem lohnt es sich — weniger Rauschen in den Server-Logs und Kompatibilität mit älteren Tools.

Die kurze Antwort

Technisch brauchen moderne Browser (Chrome, Edge, Safari, Firefox) die .ico-Datei nicht mehr. In der Praxis ist sie trotzdem dringend empfohlen.

Ohne favicon.ico füllen sich die Server-Logs mit 404-Fehlern. Viele ältere Bots und RSS-Reader lesen den HTML-Header nicht — sie rufen /favicon.ico direkt im Stammverzeichnis auf.

Die empfohlene Konfiguration 2025

Drei bis vier Dateien decken die üblichen Fälle. Dutzende Altformate in allen Größen brauchen Sie nicht:

1. favicon.ico (32×32) – Kompatibilität und Fallback

Muss im Stammverzeichnis der Website liegen (/favicon.ico)
Verhindert vor allem Log-Fehler und bedient ältere Tools

2. icon.svg – heutiger Standard (primär)

Wird von modernen Browsern bevorzugt
Beliebig skalierbar ohne Qualitätsverlust

3. apple-touch-icon.png (180×180) – iOS

Wenn Nutzer auf iPhone/iPad „Zum Home-Bildschirm hinzufügen“ wählen
Keine Extra-Größen nötig — 180×180 deckt alle iOS-Geräte ab

4. manifest.webmanifest (optional)

Vor allem für Android und PWA-Installationen
Definiert 192×192- und 512×512-PNG-Icons

Implementierung (HTML / Nuxt Head)

Der kürzeste moderne Ansatz:

<head>
  <!-- 1. Modern SVG (highest priority) -->
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

  <!-- 2. Apple iOS icon -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <!-- 3. Traditional .ico (fallback) -->
  <!-- Note: Adding sizes="any" tells Chrome this is a bitmap, -->
  <!-- so Chrome will prefer SVG over ICO -->
  <link rel="icon" href="/favicon.ico" sizes="any">
  
  <!-- 4. Android/PWA configuration -->
  <link rel="manifest" href="/manifest.webmanifest">
</head>

Für Nuxt.js-Projekte

In nuxt.config.ts oder in der Seitenkomponente:

useHead({
  link: [
    { rel: 'icon', href: '/icon.svg', type: 'image/svg+xml' },
    { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' },
    { rel: 'icon', href: '/favicon.ico', sizes: 'any' },
    { rel: 'manifest', href: '/manifest.webmanifest' },
  ],
})

Warum favicon.ico behalten?

Saubere Server-Logs

Ohne favicon.ico stehen die Logs voller 404er. Jeder Bot, Crawler oder RSS-Reader, der /favicon.ico anfragt (das passiert automatisch), erzeugt einen Fehler. Dieses Rauschen erschwert es, echte Probleme zu finden.

Ältere Tools

Viele ältere Tools, RSS-Reader, Lesezeichenverwaltungen und Erweiterungen erwarten favicon.ico im Stamm. Moderne Browser brauchen es nicht, diese Tools lesen oft keinen HTML-Header und fragen den Root-Pfad direkt.

Kaum Aufwand, klarer Nutzen

Eine 32×32-favicon.ico ist winzig (meist unter 2 KB) und pflegeleicht. Saubere Logs und breite Kompatibilität wiegen das leicht auf.

Der moderne Weg: SVG zuerst

favicon.ico bleibt der Kompatibilität wegen, das primäre Favicon sollte SVG sein:

Auflösungsunabhängig: Scharf von 16×16 bis 512×512
Kleinere Datei: Oft kleiner als vergleichbare PNGs
Zukunftssicher: Auf High-DPI-Displays und künftigen Geräten zuverlässig
Eine Datei: Ein SVG ersetzt mehrere PNG-Größen

Chrome, Firefox, Safari und Edge unterstützen SVG-Favicons. Das Attribut sizes="any" am ICO-Link sorgt dafür, dass Browser bei vorhandenem SVG dieses bevorzugen.

Das Wichtigste

.ico nicht löschen: Browser nutzen sie vielleicht nicht, im Stammverzeichnis hält sie Logs sauber und ältere Tools kompatibel.
SVG ist der Weg: Eine SVG-Datei löst die meisten Auflösungsfragen.
Wenig Dateien: Mit drei bis vier Dateien (favicon.ico, icon.svg, apple-touch-icon.png, optional manifest.webmanifest) sind die üblichen Fälle abgedeckt.
Die Reihenfolge zählt: SVG zuerst, dann ICO mit sizes="any", damit moderne Browser das bessere Format wählen.

Fazit

2025 brauchen moderne Browser favicon.ico technisch nicht, sie zu behalten ist trotzdem sinnvoll: weniger Log-Rauschen, Kompatibilität mit älteren Tools, praktisch kein Aufwand. Zusammen mit einem SVG-Favicon ist das die solide Aufstellung für heutige und künftige Standards.

Einfach halten: ein SVG als Hauptfavicon, eine kleine ICO für Kompatibilität, ein Apple Touch Icon für iOS, optional ein Manifest für PWA. Diese schlanke Konfiguration deckt die Fälle ab, ohne Dutzende Größen zu verwalten.