Favicon-Generator 2026

So funktioniert der Favicon-Generator

Das hochgeladene Bild wird im Browser per FileReader als Data-URL eingelesen und in ein <img>-Element geladen. Anschließend zeichnet ein <canvas> das Bild in der Zielgröße neu, wobei der Browser hochwertige Bicubic-Interpolation für ein sauberes Resize-Ergebnis nutzt.

Das Canvas wird dann via toBlob() als PNG exportiert und über einen unsichtbaren Download-Link an Sie ausgeliefert. Der gesamte Prozess läuft als JavaScript im Browser – Ihr Bild wird nie an einen Server gesendet, ideal für vertrauliche Markenlogos.

Standards: Favicon, Apple Touch Icon und Web Manifest

Das klassische Favicon stammt aus dem Internet Explorer 5 (1999) und ist heute über das HTML-<link rel="icon">-Element in HTML Living Standard verankert. Apple Touch Icons sind eine iOS-Konvention seit 2008 und werden von allen mobilen Browsern verstanden.

Das Web App Manifest (W3C-Empfehlung) erweitert das Favicon-Konzept um PWA-Icons (192/512), Theme-Farben und Display-Modes – Voraussetzung für die Add-to-Homescreen-Funktion in Chrome und Edge.

Anwendungsfälle

Webseite-Launch: Pflichtbestandteil jeder Website, sonst zeigen Browser ein generisches Globus-Icon.
Rebranding: Nach Logo-Änderung alle Favicon-Größen frisch generieren und ausrollen.
PWA: Für installierbare Web-Apps sind 192- und 512-Icons im Manifest Pflicht.
SEO: Google zeigt Favicon in mobilen Suchergebnissen – sichtbares Branding bei jedem Treffer.
Bookmark-Optik: In Browser-Lesezeichen und neuer-Tab-Übersichten erscheint das Favicon prominent.

Datenschutz: Client-Side

Das Bild wird ausschließlich im Browser per Canvas verarbeitet. Es findet kein Upload zu einem Server statt – auch nicht zu Bildbearbeitungs-APIs Dritter. Vertrauliche Logos, ungelaunchte Marken oder NDA-Material können bedenkenlos verarbeitet werden.

Die Verarbeitung erfüllt damit die DSGVO ohne weitere Maßnahmen, da keine personenbezogenen Daten und keine geschützten Bilder Ihren Rechner verlassen.

Typische Fehler

Zu kleines Quellbild: Aus 100×100 entsteht für 512×512 ein verwaschenes Ergebnis. Mindestens 512×512 hochladen.
Komplexe Logos: Filigrane Details verschwinden bei 16×16. Für kleine Größen vereinfachte Icon-Variante nutzen.
Vergessenes Apple Touch Icon: Ohne 180×180 zeigt iOS einen Screenshot der Seite – meist hässlich.
Caching-Probleme: Browser cachen Favicons aggressiv. Versionsparameter im URL (z. B. ?v=2) erzwingt Aktualisierung.
Nicht-quadratisches Bild: Wird verzerrt skaliert. Vor dem Hochladen quadratisch zuschneiden.

Häufige Fragen

Standardmäßig: 16×16 (Browser-Tab), 32×32 (Tab-Retina), 48×48 (Windows-Site-Tile), 180×180 (Apple Touch Icon), 192×192 und 512×512 (Android, PWA-Manifest). Mit diesen sechs PNGs deckt man alle gängigen Plattformen ab. Browser wählen automatisch die passende Größe je nach Display und Kontext.

Für moderne Browser nicht zwingend. Chrome, Firefox, Safari und Edge unterstützen seit Jahren PNG-Favicons. Internet Explorer und Edge Legacy verlangten .ico, sind aber aus dem Marktanteil verschwunden. Wenn .ico gewünscht ist, lassen Sie sich eine multi-size ICO mit ImageMagick oder Online-Konvertern erzeugen – die meisten Sites kommen aber ohne aus.

180×180 PNG, das beim Hinzufügen einer Webseite zum iOS-Homescreen als App-Icon dient. iOS nutzt ein Quadrat ohne Transparenz mit abgerundeten Ecken (vom System gerendert). Wichtig: Das Bild sollte randlos sein – iOS rundet die Ecken automatisch ab und schneidet sonst Inhalte ab.

Das site.webmanifest ist eine JSON-Datei, die definiert, wie Ihre Site als PWA installiert wird. Sie referenziert die Icons (192/512), den Namen, das Theme und Display-Mode (standalone). Browser und Android-Launcher nutzen sie für den Add-to-Homescreen-Flow. Pflicht für Progressive Web Apps.

Für moderne Browser ja – PNG mit Transparenz wirkt sauber im Tab. Für Apple Touch Icon eher nicht: iOS füllt Transparenz mit Schwarz, was selten gewollt ist. Pragmatischer Workflow: Kerngrafik mit transparentem Hintergrund hochladen, der Generator skaliert automatisch und behält die Transparenz.

Google zeigt das Favicon in den mobilen Suchergebnissen neben URL und Titel. Ein klares, gut erkennbares Favicon kann CTR steigern. Google fordert quadratisch, mindestens 8×8 Vielfaches und unter 1 MB. Indirekt: Vertrauen und Markenwiedererkennung verbessern Klickraten – ein gepflegtes Favicon ist eine günstige SEO-Investition.

Seit 2020 unterstützen Chrome, Firefox und Safari auch SVG-Favicons via <link rel='icon' type='image/svg+xml'>. Vorteil: Eine Datei für alle Größen, scharfe Darstellung auch auf 4K-Displays, automatische Dark-Mode-Anpassung via prefers-color-scheme. Nachteil: Komplexere SVGs werden klein gerendert nicht immer optimal – pragmatisch beide Formate liefern (SVG primär, PNG als Fallback).

Mindestens 512×512 Pixel, besser 1024×1024. Aus einem großen Bild lässt sich verlustfrei nach unten skalieren – aus einem kleinen Bild entstehen pixelige Vergrößerungen. Quadratisches Format, Markenelement zentriert, mit etwas Rand zum Beschnitt. Vektorgrafik (SVG) als Quelle ist ideal.

Das Tool ist auf gängige Favicon-Größen voreingestellt. Wenn Sie andere Größen brauchen (etwa für App-Stores), nutzen Sie speziellere Tools wie realfavicongenerator.net oder Figma-Export. Unser Tool deckt den Standard-Web-Workflow ab und liefert in unter einer Minute ein einsatzfertiges Set.