Favicon in Next.js einrichten: favicon.ico aus SVG erstellen

Ein einzelnes favicon.ico reicht für einen grundlegenden Launch aus. Wenn Sie jedoch ein stabiles Rendering in Browser-Tabs, auf dem iOS-Home-Bildschirm, bei PWA-Installationen und in den Google-Suchergebnissen möchten, sollten Sie ein vollständiges Icon-Set bereitstellen.

Dieser Leitfaden folgt einem praktischen Ablauf: Definieren Sie die benötigten Icon-Assets, erzeugen Sie sie aus SVG und integrieren Sie sie sauber in Next.js.

Welche Icon-Dateien Sie tatsächlich brauchen

Ein solides Mindest-Setup umfasst diese Assets:

favicon.ico (Kompatibilitäts-Fallback)
icon.svg oder icon.png (moderne Browser)
apple-icon.png (iOS-Home-Bildschirm-Icon)
manifest (PWA-Metadaten)
icon-192.png (Manifest-Größe)
icon-512.png (Manifest-Größe)

Praktischer Workflow: von SVG zum Favicon-Set

1. Beginnen Sie mit einem SVG, das auch in sehr kleinen Größen lesbar bleibt

Favicons werden oft in 16x16 und 32x32 gerendert. Optimieren Sie Ihre Quelle entsprechend:

Behalten Sie die Hauptform bei und entfernen Sie winzige Details.
Verwenden Sie hohen Kontrast.
Vermeiden Sie extrem dünne Linien.

Prüfen Sie das Ergebnis schnell im SVG Viewer.

2. `favicon.ico` erzeugen

Verwenden Sie SVG to ICO:

SVG hochladen
Gängige Größen auswählen (16/32/48/64)
Eine einzelne .ico-Datei exportieren

Genau dafür sind SVG-Tools besonders nützlich: Sie machen aus einem Quell-SVG schnell ein sauberes Favicon-Set.

3. `icon-192.png` und `icon-512.png` erzeugen

Verwenden Sie SVG to PNG und exportieren Sie:

icon-192.png
icon-512.png

Falls nötig, exportieren Sie zusätzlich ein eigenes apple-icon.png (häufig 180x180).

4. Optional: vor dem Ausliefern optimieren

Lassen Sie die Quelldateien vor der Veröffentlichung durch SVG Optimizer oder SVG Minify laufen, um sauberere und kleinere Dateien zu erhalten.

Next.js-App-Router-Integration

Empfohlene Struktur:

app/
  favicon.ico
  icon.svg
  apple-icon.png
  manifest.ts
public/
  icon-192.png
  icon-512.png

Beispiel für app/manifest.ts:

import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "SVGView",
    short_name: "SVGView",
    description: "Online SVG tools for viewing, optimizing, and converting SVG files.",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#ffffff",
    icons: [
      {
        src: "/icon-192.png",
        sizes: "192x192",
        type: "image/png",
      },
      {
        src: "/icon-512.png",
        sizes: "512x512",
        type: "image/png",
      },
    ],
  };
}

Google-Favicon-Prüfungen, die Sie vor dem Launch durchführen sollten

Hier geht es um technische Validierung, nicht um Copywriting:

https://your-domain.com/favicon.ico gibt 200 zurück
Icon-Pfade werden nicht durch robots.txt blockiert
Das Favicon ist quadratisch und mindestens 8x8 groß
Bevorzugen Sie Größen, die Vielfache von 48 sind
Das HTML der Startseite enthält eine Icon-Deklaration (rel="icon")

Wenn diese Punkte stimmen, erscheinen Favicon-Updates in der Google-Suche in der Regel nach dem nächsten Recrawl.

Falls Ihre App TanStack Start ist (wie dieses Projekt)

Verwenden Sie dieselben Assets und deklarieren Sie Links im Root-<head>:

<head>
  <link rel="icon" href="/favicon.ico" sizes="any" />
  <link rel="apple-touch-icon" href="/apple-icon.png" />
  <link rel="manifest" href="/manifest.webmanifest" />
</head>

FAQ

Reicht `favicon.ico` allein aus?

Für einen grundlegenden Launch ja, aber nicht für eine vollständige Plattformabdeckung.

Warum zeigt Google immer noch mein altes Favicon an?

Meist liegt es an Crawl- oder Cache-Verzögerungen. Prüfen Sie zuerst, ob die URL erreichbar ist, und warten Sie dann auf den nächsten Recrawl.

Soll ich `icon.svg` oder `favicon.ico` wählen?

In der Praxis behalten Sie meistens beides: ein .ico-Fallback plus ein modernes svg/png.

Favicon in Next.js einrichten: favicon.ico aus SVG erstellen