ICO/Favicon-Generierungs-Leitfaden: Website-Icons und PWA-Icons

Warum brauchen Sie ein Favicon?

Ein Favicon ist das kleine Icon, das in Browser-Tabs, Lesezeichenleisten und Handy-Startbildschirmen angezeigt wird. Eine professionelle Website muss eines haben — andernfalls:

Der Browser-Tab zeigt ein Standard-Leer-Icon, was die Markenerkennung verringert
Benutzer können Ihre Seite in Lesezeichen nicht schnell finden
PWA-Installationen fehlt ein App-Icon

Favicon-Größenspezifikationen

Verschiedene Plattformen und Kontexte erfordern unterschiedliche Größen:

Größe	Zweck	Format
16×16	Browser-Tab (kleinste)	ICO/PNG
32×32	Browser-Tab (Standard)	ICO/PNG
48×48	Windows-Taskleiste	ICO
180×180	Apple Touch Icon (iOS)	PNG
192×192	Android Chrome	PNG
512×512	PWA-Start-Icon	PNG

Über das ICO-Format

ICO ist ein Containerformat — eine einzelne ICO-Datei kann mehrere Icon-Größen enthalten. Der Browser wählt automatisch die am besten geeignete Größe. Deshalb ist eine ICO-Datei nur wenige Dutzend KB groß, funktioniert aber in allen Szenarien.

Verwendung des ICO-Generierungstools

Schritt 1: Quellbild vorbereiten

Wählen Sie ein hochauflösendes quadratisches Bild als Quelle. Empfehlungen:

Mindestens 512×512 (1024×1024 bevorzugt)
Einfache Grafik, die auch winzig erkennbar bleibt
Kleinen Text vermeiden — bei 16×16 unlesbar

Schritt 2: Hochladen und generieren

ICO-Generator öffnen
Quellbild hochladen (PNG, JPG, SVG unterstützt)
Benötigte Größen auswählen (Standard: alle — 16, 32, 48, 180, 192, 512)
Auf „Generieren" klicken

Schritt 3: Dateien herunterladen

Das Tool erzeugt zwei Ausgaben:

favicon.ico — Multi-Size-ICO mit 16×16, 32×32, 48×48
favicon-*.png — einzelne PNG-Dateien für jede Größe

Favicon in HTML referenzieren

Platzieren Sie die Dateien im Stammverzeichnis Ihrer Website oder im Ordner public/, fügen Sie dann zu <head> hinzu:

<!-- ICO (Unterstützung für ältere Browser) -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG (moderne Browser) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

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

Framework-Konfiguration

Framework	Konfiguration
Next.js	Im Verzeichnis `app/` ablegen, automatisch erkannt
Vite	Im Verzeichnis `public/` ablegen
Nuxt	In `public/` oder `assets/` ablegen
Create React App	Im Verzeichnis `public/` ablegen

PWA-Icon-Konfiguration

PWA erfordert Icon-Deklarationen in manifest.json:

{
  "name": "My App",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Hinweise zu Maskable-Icons

PWA-maskable-Icons müssen den gesamten Inhalt innerhalb der sicheren Zone (innere 80%) haben. Die äußeren 20% können vom Betriebssystem auf einen Kreis oder eine andere Form zugeschnitten werden.

Design-Tipps

Tipp 1: Grafik vereinfachen

Ein Favicon hat nur 16×16 Pixel — komplexe Designs werden zu einem unscharren Chaos. Nur das Kernelement beibehalten:

❌ Vollständiges Logo + Text
✅ Kerngrafik oder Anfangsbuchstabe

Tipp 2: SVG als Quelle verwenden

SVG-Vektorquellbilder bleiben bei jeder Größe scharf. SVG mit Formatkonvertierung in PNG konvertieren, bevor ICO generiert wird.

Tipp 3: Dark-Mode-Unterstützung

Moderne Browser unterstützen das media-Attribut für Dark-Mode-Favicons:

<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

Häufige Probleme

Generiertes ICO wird im Browser nicht angezeigt?

Dateipfad überprüfen
Browser-Cache leeren (Strg+Umschalt+R zum erzwungenen Aktualisieren)
Prüfen, dass link-Tags innerhalb von <head> stehen

ICO-Datei ist größer als ein einzelnes PNG?

ICO enthält mehrere Größen, daher ist es naturgemäß größer. Ein typisches 16+32+48-ICO ist etwa 15-30 KB — völlig akzeptabel.

Brauche ich sowohl ICO als auch PNG?

Ja, beides bereitstellen. ICO unterstützt ältere Browser; PNG bietet bessere Rendering-Qualität in modernen Browsern.

Zusammenfassung

Favicons sind vielleicht klein, aber ein entscheidender Teil der Website-Branding. Der ICO-Generator ermöglicht es Ihnen, schnell einen vollständigen Satz ICO- und PNG-Dateien aus einem einzigen Quellbild zu erstellen — für Browser-Tabs, Apple Touch Icons, Android Chrome und PWA-Start-Icons. Denken Sie daran: hochauflösende einfache Quelle, Multi-Size-ICO und vollständige HTML-Referenzen.