Favicon.ico erstellen: Transparenz, mehrere Größen

Ein Favicon ist das erste visuelle Element, das Nutzer von Ihrer Website wahrnehmen – im Browser-Tab, in den Lesezeichen, auf dem Smartphone-Homescreen. Trotzdem wird es oft stiefmütterlich behandelt: Ein 16×16-PNG hochgeladen, fertig. Dabei steckt hinter einem professionellen Favicon mehr, als man denkt.

In diesem Artikel zeige ich, wie Sie aus einem vorhandenen PNG ein .ico-Favicon mit Transparenz und mehreren Größen-Layern erstellen – und welche Dateien Sie 2026 tatsächlich brauchen.

Was macht das ICO-Format besonders?

Das ICO-Format (Windows Icon) hat eine Eigenschaft, die kein anderes Bildformat bietet: Es kann mehrere Bilder unterschiedlicher Größe in einer einzigen Datei speichern. Der Browser wählt automatisch die passende Größe – je nach Kontext.

Warum mehrere Größen in einer Datei?

Wenn Ihr .ico nur eine Größe enthält, muss der Browser skalieren – und das Ergebnis ist oft unscharf, besonders bei 16×16. Enthält die Datei dagegen dedizierte Layer für jede Größe, wird jeder Kontext optimal bedient.

ICO vs. PNG vs. SVG

Empfehlung: ICO für maximale Kompatibilität, SVG für moderne Browser mit Dark-Mode-Support, PNG für Apple- und Android-Geräte.

Transparenz im Favicon: Worauf es ankommt

Transparenz sorgt dafür, dass Ihr Favicon auf jedem Hintergrund gut aussieht – ob heller Browser-Tab, dunkler Dark Mode oder farbige Lesezeichen-Leiste.

Voraussetzungen für transparente Favicons

1. Quellbild mit Alpha-Kanal: Das PNG muss einen Alpha-Kanal enthalten (RGBA, nicht RGB). Prüfen Sie das in Ihrem Grafikprogramm oder per Kommandozeile:

magick identify -verbose favicon.png | grep -i alpha

2. Keine weißen Hintergrundflächen: Wenn Ihr Logo auf einer weißen Fläche liegt, muss diese entfernt werden – sonst erscheint im Browser ein weißes Quadrat statt Transparenz.

3. Kein Farbraum-Problem: ICO unterstützt 32-Bit-Farben mit 8-Bit-Alpha. Verwenden Sie sRGB als Farbraum, keine CMYK-Bilder.

Transparenz in GIMP prüfen und herstellen

Falls Ihr PNG keinen Alpha-Kanal hat:

1. Bild öffnen in GIMP
2. Ebene → Transparenz → Alphakanal hinzufügen
3. Hintergrund auswählen (Zauberstab oder Nach Farbe auswählen)
4. Bearbeiten → Löschen (entfernt die Auswahl und zeigt das Schachbrettmuster)
5. Datei → Exportieren als → PNG (mit Alpha-Kanal)

Methode 1: ICO mit ImageMagick erstellen (empfohlen)

ImageMagick ist das Standardwerkzeug für die Kommandozeilen-Bildverarbeitung. Ab Version 6.8.8-3 unterstützt es die automatische Größenanpassung für ICO-Dateien.

Einfache Methode: auto-resize

magick favicon.png -define icon:auto-resize=64,48,32,16 favicon.ico

Dieser Befehl nimmt Ihr PNG, skaliert es automatisch auf die angegebenen Größen und packt alle Layer in eine einzige .ico-Datei. Die Transparenz wird dabei erhalten.

Erweiterte Methode: Manuelle Kontrolle pro Größe

Für maximale Qualität empfiehlt es sich, jede Größe einzeln zu skalieren und dann zu kombinieren:

# Einzelne Größen erzeugen
magick favicon.png -resize 16x16 -background transparent favicon-16.png
magick favicon.png -resize 32x32 -background transparent favicon-32.png
magick favicon.png -resize 48x48 -background transparent favicon-48.png
magick favicon.png -resize 64x64 -background transparent favicon-64.png

# Zu einer ICO-Datei kombinieren
magick favicon-16.png favicon-32.png favicon-48.png favicon-64.png favicon.ico

Warum die manuelle Methode? Bei kleinen Größen (16×16) kann es sinnvoll sein, das Icon manuell nachzuschärfen oder zu vereinfachen. Ein detailliertes Logo wird bei 16 Pixeln Breite unleserlich – hier hilft eine vereinfachte Variante.

Transparenz explizit erzwingen

Falls die Transparenz verloren geht, helfen diese Parameter:

magick favicon.png -background none -alpha on \
  -define icon:auto-resize=64,48,32,16 favicon.ico

Der Schalter -background none verhindert, dass ImageMagick einen weißen Hintergrund einfügt. -alpha on aktiviert den Alpha-Kanal explizit.

Ergebnis prüfen

magick identify favicon.ico

Ausgabe (Beispiel):

favicon.ico[0] ICO 64x64 64x64+0+0 32-bit sRGB
favicon.ico[1] ICO 48x48 48x48+0+0 32-bit sRGB
favicon.ico[2] ICO 32x32 32x32+0+0 32-bit sRGB
favicon.ico[3] ICO 16x16 16x16+0+0 32-bit sRGB

Vier Layer, 32-Bit (8-Bit Alpha) – genau richtig.

Methode 2: ICO mit GIMP erstellen

GIMP kann ICO-Dateien mit mehreren Layern nativ exportieren.

Schritt für Schritt

1. Quellbild öffnen (PNG mit Transparenz)
2. Bild → Bild skalieren auf die größte benötigte Größe (64×64)
3. Ebene → Ebene duplizieren
4. Duplizierte Ebene auf 48×48 skalieren: Ebene → Ebene skalieren
5. Vorgang wiederholen für 32×32 und 16×16
6. Datei → Exportieren als → favicon.ico
7. Im Export-Dialog: GIMP zeigt die Layer und ihre Größen an. Alle auf 32 bpp, 8-bit Alpha setzen

Wichtig: Jede Ebene in der GIMP-Datei wird zu einem eigenen Layer in der ICO-Datei. Die Ebenengröße bestimmt die Pixelgröße im ICO.

Methode 3: Online-Tools

Für schnelle Ergebnisse ohne Installation:

• favicon.io – PNG zu ICO-Konverter mit automatischer Größenerstellung
• RealFaviconGenerator – Generiert den kompletten Favicon-Stack inkl. Manifest
• CloudConvert – Unterstützt Batch-Konvertierung mit Transparenz

Online-Tools sind praktisch, bieten aber weniger Kontrolle über die Qualität einzelner Layer. Für professionelle Ergebnisse empfehle ich ImageMagick oder GIMP.

Der optimale Favicon-Stack 2026

Ein einzelnes favicon.ico reicht nicht mehr. Moderne Websites brauchen verschiedene Formate für verschiedene Geräte. Die gute Nachricht: Seit 2024 hat sich der Stack deutlich vereinfacht.

Die 5 Dateien, die Sie brauchen

Zusätzlich: Web App Manifest

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

HTML-Einbindung

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

Was Sie nicht mehr brauchen:

• rel="shortcut icon" (veraltet, shortcut ist kein gültiger Link-Typ)
• Windows Tile Icons (msapplication-TileImage)
• Safari Pinned Tab Icon (mask-icon)
• Zahlreiche PNG-Zwischengrößen (48, 96, 128, 256)

SVG-Favicon mit Dark-Mode-Support

Ein SVG-Favicon kann per CSS-Media-Query auf den Dark Mode des Betriebssystems reagieren:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #26c6da; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ccffff; }
    }
  </style>
  <path d="M... Ihr Icon-Pfad ..."/>
</svg>

Das SVG-Favicon wird aktuell von Chrome, Firefox und Edge unterstützt. Safari fällt auf das ICO oder das Apple Touch Icon zurück.

Kompletter Workflow: Vom PNG zum fertigen Favicon-Stack

Ein Shell-Skript, das aus einem einzigen Quell-PNG den kompletten Favicon-Stack generiert:

#!/bin/bash
# Usage: ./generate-favicons.sh source-icon.png

SOURCE="$1"

if [ -z "$SOURCE" ]; then
  echo "Usage: $0 <source-png>"
  exit 1
fi

echo "Generiere Favicon-Stack aus $SOURCE..."

# favicon.ico (16x16 + 32x32 Layer)
magick "$SOURCE" -background none -alpha on \
  -define icon:auto-resize=32,16 favicon.ico

# Apple Touch Icon (180x180, mit 20px Padding)
magick "$SOURCE" -resize 140x140 -gravity center \
  -background transparent -extent 180x180 apple-touch-icon.png

# Android / PWA Icons
magick "$SOURCE" -resize 192x192 -background transparent icon-192.png
magick "$SOURCE" -resize 512x512 -background transparent icon-512.png

echo "Fertig! Erzeugte Dateien:"
echo "  favicon.ico (32x32 + 16x16)"
echo "  apple-touch-icon.png (180x180)"
echo "  icon-192.png (192x192)"
echo "  icon-512.png (512x512)"
echo ""
echo "Nicht vergessen: icon.svg manuell erstellen (Vektorgrafik, Dark-Mode-Support)"

Apple Touch Icon: Warum 20px Padding?

Apple fügt dem Icon auf dem Homescreen abgerundete Ecken und einen leichten Schatten hinzu. Ohne Padding wird Ihr Icon an den Rändern abgeschnitten. Die Empfehlung: 140×140 Pixel Icon auf 180×180 Pixel Canvas zentrieren.

Typische Fehler und ihre Lösung

1. Weißer Hintergrund statt Transparenz

Ursache: Quellbild hat keinen Alpha-Kanal, oder ImageMagick setzt -background white als Standard.

Lösung:

magick favicon.png -background none -alpha on \
  -define icon:auto-resize=32,16 favicon.ico

2. Favicon unscharf im Browser-Tab

Ursache: Nur eine Größe in der ICO-Datei, Browser skaliert herunter.

Lösung: Dedizierte 16×16- und 32×32-Layer erstellen. Bei 16×16 ggf. eine vereinfachte Version des Icons verwenden.

3. Favicon wird nicht aktualisiert

Ursache: Browser-Cache.

Lösung: Cache leeren oder Dateinamen mit Versionierung versehen:

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

4. Favicon fehlt auf iOS

Ursache: Kein apple-touch-icon definiert.

Lösung: Separates 180×180 PNG erstellen und per <link rel="apple-touch-icon"> einbinden.

Fazit

Ein professionelles Favicon ist mehr als eine einzelne Bilddatei. Der optimale Stack 2026 besteht aus fünf Dateien: favicon.ico (Multi-Layer), icon.svg (Dark Mode), apple-touch-icon.png, icon-192.png und icon-512.png. Mit ImageMagick und dem Shell-Skript aus diesem Artikel generieren Sie den kompletten Stack in Sekunden aus einem einzigen Quell-PNG.

Die drei wichtigsten Takeaways:

1. Immer -background none -alpha on verwenden, um Transparenz zu erhalten
2. Dedizierte Layer für 16×16 und 32×32 im ICO erstellen – nicht skalieren lassen
3. SVG als primäres Favicon für moderne Browser mit Dark-Mode-Support einsetzen

Quellen

• How to Favicon in 2026 – Evil Martians
• Favicons with ImageMagick – Ned Batchelder
• Make a multi-resolution favicon.ico – GitHub Gist
• How to Create Transparent Favicons – Favicon Builder
• Favicon Sizes – Complete Guide 2026 – favicon.io
• ImageMagick – Convert Dokumentation