Favicon für deine Website erstellen — Vollständiger Leitfaden

Was ist ein Favicon und warum ist er wichtig?

Ein Favicon (kurz für „Favorite Icon") ist das kleine Symbol, das in Browser-Tabs, Lesezeichen, Verlaufslisten und Suchergebnissen neben dem Namen deiner Website erscheint. Trotz seiner winzigen Größe spielt ein Favicon eine wichtige Rolle dabei, wie Nutzer deine Website wahrnehmen und mit ihr interagieren.

Denk daran, wie du mehrere offene Browser-Tabs verwaltest. Wenn du zehn oder mehr Tabs hast, die um Platz konkurrieren, ist der Favicon oft das einzige visuelle Erkennungsmerkmal, das dir hilft, die richtige Seite zu finden. Ohne einen zeigt deine Website ein generisches leeres Dokument-Icon — ein sofortiges Signal, dass die Site möglicherweise unfertig oder unvertrauenswürdig ist.

Favicons tragen auf mehrere wichtige Arten zu deiner Website bei:

• Markenwiederkennung — Ein konsistenter Favicon stärkt deine Markenidentität in jedem Browser und auf jedem Gerät
• Nutzererfahrung — Besucher können schnell deinen Tab zwischen Dutzenden offener Seiten finden
• Professionalität — Ein fehlender Favicon deutet auf mangelnde Liebe zum Detail hin
• Suchsichtbarkeit — Google und andere Suchmaschinen zeigen Favicons in mobilen Suchergebnissen an
• Lesezeichen und Startbildschirme — Wenn Nutzer deine Website speichern, wird der Favicon zur visuellen Verknüpfung, die sie mit deiner Marke assoziieren

Kurz gesagt: Ein Favicon ist eines der kleinsten Assets auf deiner Website, aber sein Fehlen fällt sofort auf.

Favicon-Größen erklärt

Einer der häufigsten Verwirrungspunkte ist, welche Größen du tatsächlich benötigst. Verschiedene Browser, Betriebssysteme und Geräte fordern unterschiedliche Icon-Größen an.

16x16 — Browser-Tab (Legacy)

Die ursprüngliche Favicon-Größe, die noch in einigen älteren Browsern für Tab-Icons und die Adressleiste verwendet wird.

32x32 — Browser-Tab (Standard)

Dies ist die primäre Größe für Desktop-Browser-Tabs im Jahr 2026. Chrome, Firefox, Safari und Edge verwenden alle diese Größe für die Tab-Icon-Anzeige.

48x48 — Windows-Taskleiste

Windows verwendet die 48x48-Variante, wenn eine Website an die Taskleiste angeheftet oder in Verknüpfungs-Kacheln angezeigt wird.

180x180 — Apple Touch Icon

Wenn ein iOS-Nutzer deine Website zum Startbildschirm hinzufügt, verwendet Safari ein 180x180 PNG als App-Icon.

192x192 — Android Chrome

Android Chrome verwendet ein 192x192 Icon für die Funktion "Zum Startbildschirm hinzufügen" und Progressive Web App (PWA) Manifeste.

512x512 — PWA-Ladebildschirm

Das 512x512 Icon wird für PWA-Ladebildschirme auf Android-Geräten verwendet. Wenn du eine PWA entwickelst, ist diese Größe für das Bestehen von Lighthouse-Audits obligatorisch.

Schnellreferenz-Tabelle

Größe	Zweck	Format	Erforderlich?
16x16	Legacy-Browser-Tabs	ICO	Empfohlen
32x32	Desktop-Browser-Tabs	ICO/PNG	Ja
48x48	Windows-Taskleiste	ICO/PNG	Empfohlen
180x180	Apple Touch Icon	PNG	Ja
192x192	Android-Startbildschirm, PWA	PNG	Ja
512x512	PWA-Ladebildschirm	PNG	Für PWAs

Favicon-Formate: ICO vs. PNG vs. SVG

ICO — Das universelle Format

Das ICO-Format ist seit der Einführung von Favicons durch Microsoft im Internet Explorer 5 der Standard. Eine ICO-Datei kann mehrere Größen (16x16, 32x32, 48x48) in einer einzigen Datei bündeln.

PNG — Der moderne Standard

PNG-Favicons bieten bessere Komprimierung, Transparenzunterstützung und schärferes Rendering bei bestimmten Größen. Die meisten modernen Browser unterstützen PNG-Favicons vollständig.

SVG — Die skalierbare Zukunft

SVG-Favicons sind vektorbasiert, was bedeutet, dass eine einzelne Datei in jeder Auflösung scharf aussieht. Sie unterstützen auch CSS-Media-Queries für automatische Dunkelmodus-Anpassung:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1a1a2e; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e0e0e0; }
    }
  </style>
  <rect width="32" height="32" rx="6" />
  <text x="16" y="22" text-anchor="middle" fill="#fff" font-size="18" font-weight="bold">T</text>
</svg>

Welches Format solltest du verwenden?

Der empfohlene Ansatz für 2026 ist, alle drei bereitzustellen:

1. Eine ICO-Datei mit 16x16-, 32x32- und 48x48-Größen für maximale Kompatibilität
2. PNG-Dateien bei 180x180 und 192x192 für Apple- und Android-Geräte
3. Eine SVG-Datei für moderne Browser mit Dunkelmodus-Unterstützung

Wie du ein Favicon erstellst

Option 1: Einen Online-Favicon-Generator verwenden

Der schnellste Weg, ein komplettes Favicon-Paket zu erstellen, ist ein dediziertes Tool. Probiere unseren kostenlosen Favicon-Generator — er akzeptiert jedes Bild und erstellt automatisch alle benötigten Größen und Formate.

Option 2: Von Grund auf in einem Grafikeditor gestalten

Wenn du vollständige kreative Kontrolle möchtest, beginne mit einem 512x512 Canvas in Figma, Adobe Illustrator oder Inkscape.

1. Erstelle ein neues 512x512 Artboard
2. Gestalte dein Icon mit Einfachheit im Hinterkopf — feine Details gehen bei 16x16 verloren
3. Exportiere PNG-Versionen bei 512, 192, 180, 48, 32 und 16 Pixeln
4. Konvertiere die kleineren Größen mit einem Tool wie ImageMagick in eine ICO-Datei

ICO-Datei mit ImageMagick generieren

# Einzelne Größen aus einem Quellbild generieren
magick source-512.png -resize 16x16 favicon-16.png
magick source-512.png -resize 32x32 favicon-32.png
magick source-512.png -resize 48x48 favicon-48.png

# In eine einzige ICO-Datei bündeln
magick favicon-16.png favicon-32.png favicon-48.png favicon.ico

HTML-Code zum Hinzufügen von Favicons zu deiner Website

Füge die folgenden Tags im <head>-Bereich deines HTML ein:

<head>
  <!-- Standard-Favicon (ICO für universelle Unterstützung) -->
  <link rel="icon" href="/favicon.ico" sizes="48x48" />

  <!-- SVG-Favicon für moderne Browser mit Dunkelmodus-Unterstützung -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml" />

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

  <!-- Web App Manifest für Android und PWAs -->
  <link rel="manifest" href="/site.webmanifest" />
</head>

Deine site.webmanifest-Datei sollte die größeren PNG-Icons referenzieren:

{
  "name": "Deine Website",
  "short_name": "DeineSite",
  "icons": [
    {
      "src": "/favicon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Framework-spezifische Implementierung

Next.js (App Router):

// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  icons: {
    icon: [
      { url: "/favicon.ico", sizes: "48x48" },
      { url: "/favicon.svg", type: "image/svg+xml" },
    ],
    apple: "/apple-touch-icon.png",
  },
};

Best Practices für 2026

Mehrere Formate bereitstellen

Verlasse dich nicht auf eine einzelne Favicon-Datei. Stelle ICO für Legacy-Browser, PNG für Apple und Android sowie SVG für moderne Browser bereit.

Dunkelmodus mit SVG unterstützen

Immer mehr Nutzer browsen im Dunkelmodus. Ein SVG-Favicon mit einer prefers-color-scheme-Media-Query passt seine Farben automatisch an das Systemthema des Nutzers an.

Das Design einfach halten

Dein Favicon wird so klein wie 16x16 Pixel gerendert. Verwende fette Formen, kontrastreiche Farben und minimale Details. Ein einzelner Buchstabe oder ein einfaches geometrisches Symbol funktioniert am besten.

Dateigröße optimieren

Favicons werden bei jedem Seitenaufruf geladen. Führe deine PNG-Dateien durch einen Optimierer wie pngquant oder optipng. SVG-Dateien sollten mit svgo bereinigt werden.

# PNG-Favicons optimieren
pngquant --quality=65-80 favicon-192.png -o favicon-192.png
optipng -o7 favicon-32.png

# SVG-Favicon optimieren
svgo favicon.svg -o favicon.svg

Web App Manifest verwenden

Auch wenn du keine PWA entwickelst, teilt eine site.webmanifest-Datei Android Chrome mit, wo deine Icons zu finden sind und definiert die Designfarbe deiner App.

Häufige Fehler, die du vermeiden solltest

Nur favicon.ico verwenden

Ein einzelnes ICO-File zu verwenden bedeutet, dass dein Icon auf hochauflösenden Apple- und Android-Geräten unscharf aussieht. Schließe immer dedizierte PNG-Dateien bei 180x180 und 192x192 ein.

Das Apple Touch Icon ignorieren

Wenn du das apple-touch-icon weglässt, erstellt iOS einen Screenshot deiner Seite und verwendet ihn als Startbildschirm-Icon. Das Ergebnis ist fast immer ein unlesbarer, hereingezoomter Schnappschuss deines Layouts.

Nach Updates den Cache nicht löschen

Browser cachen Favicons aggressiv. Wenn du dein Icon aktualisierst, sehen Nutzer möglicherweise noch Tage oder Wochen die alte Version. Füge einen Versions-Query-Parameter hinzu, um eine Aktualisierung zu erzwingen:

<link rel="icon" href="/favicon.ico?v=2" sizes="48x48" />

Fazit

Ein gut implementierter Favicon ist ein kleines Detail, das die Gesamtqualität deiner Website widerspiegelt. Indem du die richtigen Größen, Formate und HTML-Markup bereitstellst, stellst du sicher, dass deine Marke in jedem Browser, auf jedem Gerät und jeder Plattform konsistent repräsentiert wird.

Um schnell loszulegen, verwende unseren kostenlosen Favicon-Generator, um alle benötigten Dateien aus einem einzigen Quellbild zu erstellen. Lade dein Logo oder Design hoch, lade das komplette Paket herunter und füge die HTML-Tags zu deiner Website hinzu — der gesamte Prozess dauert weniger als eine Minute.

Die Kernpunkte für 2026: ICO, PNG und SVG zusammen bereitstellen; Dunkelmodus mit einer SVG-Media-Query unterstützen; das Design einfach und fett halten; und deine Favicons immer auf echten Geräten testen, bevor du sie live schaltest.