Favicon-Generator: Die komplette .ICO-Anleitung (2026)

Das Favicon, dieses winzige 16×16-Pixel-Symbol neben dem Tab-Titel, ist eines der am meisten übersehenen Details im Web. Die meisten Sites liefern entweder kein Favicon (zeigen ein generisches Browser-Symbol, das universelle Indiz einer unfertigen Site) oder ein als .ico umbenanntes JPEG (das nicht konsistent über Browser hinweg funktioniert).

Diese Anleitung deckt ab, wie eine ordentliche 2026-Favicon-Implementierung aussieht: die Formate, die Du brauchst, die Größen, die zählen, Dark-Mode-Unterstützung und wie Du es korrekt installierst. Alles lokal generiert, Dein Logo wird nie auf einen Server hochgeladen.

Warum Favicons wichtiger sind, als Du denkst

Ein Favicon erfüllt drei Aufgaben gleichzeitig:

1. Identifiziert Deine Site in Browser-Tabs, Lesezeichen und im Verlauf.
2. Steigert die Markenerkennung, wenn Nutzer mehrere Tabs offen haben.
3. Signalisiert Professionalität. Sites ohne ordentliches Favicon wirken unfertig, selbst große Marken scheitern hier manchmal.

Studien zeigen, dass Nutzer mit 10+ offenen Tabs eine Site am Favicon identifizieren, bevor sie den Titel lesen. Dein Favicon ist Wertvoll genug, um es ernst zu nehmen.

ICO vs PNG vs SVG

ICO (favicon.ico)

Das ursprüngliche Favicon-Format, 1999 von Microsoft eingeführt. Seine Superkraft: es ist ein Container. Eine einzige .ico-Datei enthält mehrere PNG-kodierte Bilder in verschiedenen Auflösungen (typisch 16×16, 32×32, 48×48). Der Browser bzw. das OS wählt das richtige für den Kontext.

Verwende es für: maximale Kompatibilität, besonders Windows-Desktop-Verknüpfungen und Outlook-Signaturen.

PNG (favicon-32x32.png, favicon-192x192.png usw.)

Moderne Browser (Chrome, Firefox, Safari, Edge) bevorzugen PNG. Schärfere Darstellung, Alpha-Kanal-Unterstützung, kleinere Dateigröße als ICO bei gleicher Qualität.

Verwende es für: moderne Browser, Apple Touch Icons (iOS), Android Chrome PWA-Icons, Windows-Tile-Icons.

SVG (favicon.svg)

Vektorformat. Scharf in jeder Auflösung, unterstützt CSS und Dark-Mode-bewusste Füllungen, viel kleiner als PNG für einfache Icons.

Verwende es für: Zukunftssicherheit. Moderne Browser (90%+) unterstützen SVG-Favicons. Mit PNG-Fallback für ältere Browser kombinieren.

Best Practice: alle drei ausliefern

<!-- Moderne Browser bevorzugen dies, falls verfügbar -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- Moderne Browser Fallback -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Legacy/Windows -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- iOS-Homescreen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android PWA + Theme-Farbe -->
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#c59a6d">

Favicon-Generator gibt genau dieses Set an Dateien plus den Snippet aus, deploy-ready.

Die Größen, die wirklich wichtig sind

Größe	Dateiname	Verwendet von
16×16	innerhalb favicon.ico	Browser-Tab, Adressleiste
32×32	favicon-32x32.png + innerhalb favicon.ico	Browser-Tab High-DPI, Taskleiste
48×48	innerhalb favicon.ico	Windows-Desktop-Verknüpfung
180×180	apple-touch-icon.png	iOS-Homescreen, watchOS
192×192	android-chrome-192x192.png	Android-Homescreen
512×512	android-chrome-512x512.png	Android-Splashscreen, PWA
150×150	mstile-150x150.png	Windows 10/11 Start-Kachel
unbegrenzt	favicon.svg	Moderne Browser, Retina

Du brauchst nicht alle für eine einfache Site, aber ein Generator, der sie alle produziert, kostet nichts extra und macht Dich zukunftssicher.

Dark-Mode-Favicons (Best Practice 2026)

Moderne Browser unterstützen Dark-Mode-bewusste Favicons über SVG mit CSS:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    path { fill: #000; }
    @media (prefers-color-scheme: dark) {
      path { fill: #fff; }
    }
  </style>
  <path d="M..."/>
</svg>

Das Favicon passt sich an das OS-Theme des Nutzers an, schwarz auf hell, weiß auf dunkel. Manche Nutzer (Entwickler, Accessibility-Verfechter) achten aktiv auf dieses Detail.

Best Practices für das Quellbild

Vor dem Generieren Deine Quelle vorbereiten:

1. Quadratisch. Mindestens 512×512, idealerweise 1024×1024. Nicht-quadratische Quellen werden zugeschnitten oder gepolstert.
2. Einfach. Bei 16×16 px werden komplexe Logos zu unleserlichem Brei. Test: blinzle auf Dein Logo auf einem 16-Pixel-Raster, kannst Du es noch erkennen?
3. Hoher Kontrast. Das Symbol muss vor jeder Browser-Tab-Farbe (hell oder dunkel) lesbar sein. Ziele auf mindestens 4.5:1 internen Kontrast.
4. Transparenter Hintergrund (PNG/SVG). Solide Hintergründe wirken in Browser-Tab-Leisten mit Padding kantig.

Wenn Dein volles Logo zu detailliert ist, mache eine vereinfachte Marke für das Favicon, einen einzelnen Buchstaben, ein Symbol, eine abstrakte Form. Viele Marken tun das (Apples Apfel, Twitters Vogel, Spotifys Kreise).

Datenschutz: warum lokale Generierung wichtig ist

Das schmutzige Geheimnis von Online-Favicon-Generatoren: die meisten laden Dein Quell-Logo auf ihren Server, generieren die Symbole und schicken Dir per E-Mail einen Link.

Das bedeutet, Deine unveröffentlichte Markenidentität liegt auf fremder Hardware. Für ein Stealth-Startup, ein NDA-Kundenprojekt oder einen Produkt-Launch ist das inakzeptabel.

Die Alternative: lokal mit HTML5 Canvas + WebAssembly für ICO-Encoding generieren. DuneTools Favicon-Generator macht genau das, Dein Logo verlässt Deinen Browser nie, die Generierung dauert ein paar hundert Millisekunden, Du lädst ein ZIP mit allen 12 Datei-Varianten plus dem HTML-Snippet herunter.

Deployment-Checkliste

1. Lege alle generierten Dateien im Root Deiner Site ab (/favicon.ico, /favicon.svg usw.). Die meisten Browser schauen hier automatisch.
2. Füge die <link>- und <meta>-Tags vom Generator innerhalb <head> ein.
3. Füge <link rel="manifest" href="/site.webmanifest"> hinzu und erstelle site.webmanifest mit den Icon-Definitionen (der Generator macht das für Dich).
4. Teste auf Chrome-, Safari-, Firefox-Tab. Hard-Refresh (Cmd+Shift+R oder Strg+F5), Favicons cachen aggressiv.
5. Zum iPhone-Homescreen hinzufügen (Safari → Teilen → Zum Homescreen hinzufügen), prüfe, ob das Apple-Touch-Icon erscheint.
6. Im Dark Mode testen (System → Theme wechseln), prüfe, ob SVG sich anpasst.

Häufige Fehler

1. JPEG zu .ico umbenennen. ICO hat sein eigenes Format. Umbenennen konvertiert nicht. Verwende einen Generator.
2. Nur ein einzelnes 16×16 PNG. Sieht in Tabs okay aus, schrecklich überall sonst (Taskleiste, mobiler Homescreen, PWA-Splash).
3. Apple Touch Icon vergessen. Wenn Nutzer Deine Site zum iPhone-Homescreen hinzufügen und Dein Symbol fehlt, verwendet iOS einen Screenshot. Sieht schrecklich aus.
4. Kein theme-color Meta-Tag. <meta name="theme-color"> lässt Chrome/Safari Mobile Deine Markenfarbe in der Adressleiste verwenden, kleines Detail, große Wirkung.
5. Dark Mode nicht testen. Ein Logo, das auf dunklen Hintergründen unsichtbar ist, ist ein Logo, das in Millionen von Nutzer-Tabs fehlt.

Praxis-Checkliste

Vor dem Launch:

• favicon.ico generiert (Multi-Size 16/32/48)
• favicon.svg mit Dark-Mode-CSS generiert
• favicon-16x16.png und favicon-32x32.png generiert
• apple-touch-icon.png (180×180) generiert
• android-chrome-192x192.png und 512x512 generiert
• site.webmanifest mit Icon-Definitionen erstellt
• Alle <link>-Tags innerhalb <head> eingefügt
• <meta name="theme-color"> zur Marke passend hinzugefügt
• Hard-Refresh und alle Größen verifiziert
• Zum iOS-Homescreen hinzugefügt, Apple-Touch-Icon verifiziert
• Dark Mode getestet, SVG-Anpassung verifiziert

Zusammenfassung

Eine komplette 2026-Favicon-Implementierung hat 8-12 Dateien, dauert 5 Minuten zu generieren mit dem richtigen Tool und verbessert die wahrgenommene Professionalität Deiner Site spürbar. Lass keines der Formate aus, in 2026 gibt es keinen guten Grund dafür, und die Kosten sind ein Upload zu Favicon-Generator.