Favicon-Generator

Was ist ein Favicon und warum reicht eine einzelne ICO-Datei nicht mehr?

Das Favicon — kurz für „Favorite Icon” — ist das kleine Bild, das jeder Browser-Tab, Lesezeichen-Eintrag und Suchergebnis neben dem Seitentitel zeigt. Eingeführt 1999 von Internet Explorer 5 als 16×16-Pixel-ICO-Datei in der Site-Root, war es lange Zeit ein einzelnes Bild für alle Plattformen.

Mit dem Aufstieg von Retina-Displays, mobilen Betriebssystemen, Progressive Web Apps und der dauerhaften Browser-Tab-Sichtbarkeit hat sich das Bild geändert. Heute braucht eine vollständig kompatible Site mindestens fünf bis sieben verschiedene Bild-Größen plus eine Web App Manifest, damit alle Display-Targets korrekt bedient werden:

• 16×16 / 32×32 — klassische Browser-Tabs, in der favicon.ico verpackt
• 48×48 — Windows Site-Pinning
• 96×96 — moderne Chrome-Favicon-Größe
• 180×180 — iOS apple-touch-icon (seit iOS 7)
• 192×192 / 512×512 — Android Home-Screen-Icon und PWA-Manifest

Dieses Tool erzeugt das komplette Set aus einer einzigen Vorlage — lokal im Browser, ohne Server, ohne Upload.

Pipeline-Übersicht — was passiert im Browser?

Logo (PNG / JPG / SVG)
    ↓
[1] ImageBitmap-Decode      ─→ natürliche Größe lesen
    ↓
[2] Canvas-Rasterung        ─→ 7 Größen (16/32/48/96/180/192/512)
                                 mit optionaler Mask-Clip für 192/512
    ↓
[3] PNG-Encode pro Layer    ─→ canvas.toBlob('image/png')
    ↓
[4] Custom ICO-Encoder      ─→ 16/32/48 → favicon.ico (PNG-in-ICO, Vista+)
    ↓
[5] Median-Cut-Quantizer    ─→ theme-color Light + Dark
    ↓
[6] site.webmanifest        ─→ JSON.stringify mit icons-Array
    ↓
[7] HTML-Snippet            ─→ <link>- und <meta>-Tags
    ↓
[8] client-zip              ─→ alles in einem ZIP

Alle Schritte laufen in einem Browser-Tab. Der ICO-Encoder ist als 2-KB-TypeScript-Modul eingebaut — er schreibt direkt in ein ArrayBuffer und verpackt die PNG-Layer im standardisierten ICO-Format mit korrektem Header (00 00 01 00), ICONDIRENTRY-Tabelle und Offset-Berechnung.

Maskable-Safe-Zone — was ist das und warum ist sie wichtig?

Ein klassisches Android-Launcher-Icon ist ein Quadrat: 192×192 oder 512×512 Pixel mit Inhalt bis an die Kanten. Seit Android Oreo (2017) wendet jedoch jedes OS eine eigene Maske auf das Icon an — Pixel-9 zeigt Kreise, Samsung-Geräte zeigen Squircles, ältere Pixel zeigen Teardrops. Wer ein Square-Icon einreicht, sieht auf manchen Geräten weiße Ränder, auf anderen abgeschnittene Logos.

Die Lösung ist das Maskable-Icon-Format, seit 2019 in der PWA-Manifest-Spec verankert. Es definiert eine 80%-Safe-Zone in der Mitte des Bildes:

   192px maskable PNG
   ┌─────────────────────┐
   │     mask-zone       │
   │  ┌───────────────┐  │
   │  │               │  │   Innerer Kreis: 80% der Kanten-
   │  │   safe-zone   │  │   länge (Radius = size × 0.4)
   │  │  (immer       │  │   = bei 192 px: 76.8 px Radius
   │  │   sichtbar)   │  │   Pixel hier bleiben garantiert
   │  │               │  │   sichtbar — egal welche Maske.
   │  └───────────────┘  │
   │     mask-zone       │
   └─────────────────────┘

Was außerhalb der Safe-Zone liegt, kann auf manchen Geräten weggeclippt werden. Das Tool zeigt den 80%-Kreis im Live-Editor als gestrichelte Linie an. Über die Skalierungs- und Offset-Regler positionierst du dein Logo so, dass alle Marken-Pixel innerhalb liegen.

Die vier Mask-Shapes im Picker zeigen, wie das Icon auf den jeweiligen Geräten aussieht:

• Kreis — Pixel 9, ältere iOS-Versionen, klassische Round-Launcher
• Squircle — iOS 18+ (Superellipse-Approximation), Samsung One UI 6+
• Rounded Square — Android Material 3, OnePlus, Realme
• Teardrop — Google Pixel mit Teardrop-Theme aktiviert

Dark-Mode-SVG — warum und für welche Browser?

Wenn deine Favicon-SVG auf hellem System-Theme als dunkles Symbol gut funktioniert, kann sie auf dunklem Theme schwer lesbar werden — der dunkle Tab-Hintergrund verschluckt die dunklen Pfade. Lösung: eine einzige SVG-Datei mit eingebettetem @media (prefers-color-scheme: dark), die ihre fill-Farbe automatisch umschaltet.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <style>
    path { fill: #0F0F0F; }
    @media (prefers-color-scheme: dark) {
      path { fill: #F5F5F5; }
    }
  </style>
  <path d="…dein Logo…" />
</svg>

Browser-Support für SVG-Favicon mit Media-Query:

• ✅ Chrome 76+, Edge 79+ — voll funktional seit 2019
• ✅ Firefox 67+ — voll funktional
• ⚠️ Safari (alle Versionen) — offener WebKit-Bug seit 2020 (#262971), Safari rendert SVG-Favicons mit @media als statisches Bild
• ✅ Mobile Chrome / Firefox — funktional

Wir liefern trotzdem klassische PNG-Favicons mit, damit Safari einen sauberen Fallback hat. In der Praxis sieht ein Safari-Nutzer im Dark-Mode also den 32-Pixel-PNG-Fallback, der je nach Logo-Design ggf. neutral genug ist. Für vollständigen Dark-Mode-Support auf Safari müsstest du heute (noch) zwei separate Favicons hosten und per JavaScript umschalten — wir halten den Scope minimal und liefern den Single-File-SVG-Weg, der für drei der vier Major-Browser sauber funktioniert.

Was unterscheidet diesen Generator von Online-Konvertern?

Die meisten frei zugänglichen Favicon-Generatoren folgen einem ähnlichen Schema: Datei-Upload → Server-Verarbeitung → Download-Link. Das Modell hat mehrere Nachteile:

1. Privacy — Logos sind Marken-Assets. Ein Server-Upload bedeutet, dass dein Markenzeichen mindestens temporär auf einer fremden Infrastruktur liegt. Für Pre-Launch-Designs, Kunden-Logos oder vertrauliche Branding-Materialien ist das ein echtes Problem.
2. Maskable-Editor fehlt — die meisten Online-Tools beschneiden Logos ohne Vorschau auf die OS-Masken. Ergebnis: Apps mit weißen Rändern auf Pixel-Phones, abgeschnittene Logos auf Samsung.
3. Dark-Mode-SVG fehlt komplett — kein freier Generator bietet die Single-File-Dark-Mode-SVG. Das Feature ist 2019 standardisiert, aber nicht in den UI-Workflows angekommen.
4. Theme-Color manuell — niemand extrahiert die theme-color automatisch aus dem Logo. Nutzer müssen sie per Color-Picker raten.

Dieser Generator macht alle vier Punkte anders:

• Pure-Client — das Logo bleibt im Browser-Tab. Sichtbar im Netzwerk-Panel: kein POST, kein Upload.
• Maskable-Editor mit Live-Vorschau — der 80%-Safe-Zone-Kreis ist immer sichtbar, vier Mask-Shapes lassen sich umschalten.
• Dark-Mode-SVG mit eingebettetem @media — eine einzige SVG-Datei für beide Modi (Chrome, Firefox, Edge).
• Median-Cut-Brand-Color-Extraktion — der dominante und der Akzent-Ton landen automatisch in den theme-color-Meta-Tags.

Welche bewussten Lücken hat der Generator?

Wir bauen einen Favicon-Generator, kein Logo-Maker. Was bewusst nicht enthalten ist:

• KI-Logo-Generierung — Dienste wie iconikai oder AutopptAI bauen Logos aus Text-Prompts. Das gehört in den Logo-Design-Workflow vor unserem Tool, nicht in unseres.
• Account / Save-Slots / Projektgeschichte — verletzt unser Pure-Client-Versprechen. Wenn du den Tab schließt, ist das Ergebnis weg — das ist Feature, nicht Bug.
• Microsoft Tile-XML (browserconfig.xml) — Edge hat Live Tiles in Windows 11 abgeschafft, die Datei ist obsolet.
• Animated Favicon (APNG, SVG-SMIL) — Browser-Support ist inkonsistent und der Use-Case schmal. Wer Animationen braucht, hostet sie selbst.
• Branded Color-Themes / Templates — wir sind ein Konverter, kein Logo-Designer. Die theme-color-Vorschläge sind algorithmisch, nicht kuratiert.

Das Tool macht eine Sache gut und sagt klar, wo die Grenze liegt.

Welche verwandten Tools passen zum Favicon-Workflow?

Weitere Werkzeuge aus dem kittokit-Ökosystem rund um Bild-Verarbeitung:

• SVG zu PNG — wenn du nur einzelne PNG-Größen aus deiner SVG brauchst, nicht das ganze Favicon-Set.
• Bildformat konvertieren — PNG zu WebP oder AVIF für Web-Auslieferung; beide bei gleicher Qualität kleiner als PNG.
• SVG optimieren — vor dem Favicon-Build die SVG-Pfade säubern und Metadaten entfernen.