Favicon-Generator

Laden Sie ein beliebiges Bild hoch und erzeugen Sie alle Standard-Favicon-Größen als PNG-Dateien.

Bild hier per Drag-and-Drop ablegen oder klicken zum Auswählen

Quadratische Bilder funktionieren am besten (PNG, JPG, SVG)

Favicon-Größen erklärt

16×16 · Standard-Favicon im Browser-Tab

32×32 · Retina-Browser-Tab, Verknüpfung in der Taskleiste

48×48 · Site-Verknüpfung unter Windows

180×180 · Apple Touch Icon (iOS-Startbildschirm)

192×192 · Android Chrome, PWA-Manifest-Icon

512×512 · PWA-Splash-Screen, Google-Suche

Eine kurze Geschichte des Favicons

Das Favicon entstand als Microsoft-Funktion im Internet Explorer 5, der im März 1999 veröffentlicht wurde. Microsoft führte die Konvention ein, im Wurzelverzeichnis der Site nach /favicon.ico zu suchen und es neben gemerkten Sites in der Favoritenleiste anzuzeigen, daher der Name „Favicon“ (favorite icon). Die ursprüngliche Wahl war das proprietäre Windows-ICO-Format, das mehrere Bitmap-Größen in einer einzigen Datei aufnehmen kann. Andere Browser übernahmen die Konvention fast sofort und unterstützten zunehmend auch PNG-Favicons, signalisiert über <link rel="icon">-Tags im Document-Head. Apples iPhone (eingeführt 2007) ergänzte die apple-touch-icon-Konvention, ein 180×180-PNG, das verwendet wird, wenn Nutzer eine Website zum iOS-Startbildschirm hinzufügen, in derselben Größe wie ein nativer App-Icon angezeigt. Progressive Web Apps (PWA, etwa 2015 formalisiert) fügten die Datei manifest.json mit ihrem icons-Array hinzu, das 192×192-Varianten (Chromes Installationsaufforderung) und 512×512-Varianten (PWA-Splash-Screens, Android-Startbildschirme, Windows-Startmenü-Anheften) verlangt. SVG-Favicons (in Firefox seit Version 41 von 2015, Chrome seit Version 80 von Februar 2020, Safari seit Version 12.1 von 2019 unterstützt) sind heute die moderne Empfehlung, wenn das Icon eine einfache Form ist, eine Datei skaliert perfekt auf jede Display-Dichte. Die historische favicon.ico-Datei ist weiterhin für Internet Explorer 11 und ältere Browser nötig; moderne Stacks liefern das SVG plus ein ICO-Fallback und ein apple-touch-icon-PNG.

Warum so viele Größen?

Jede Größe im Favicon-Set bedient einen anderen Render-Kontext. 16×16 ist das klassische Browser-Tab-Favicon bei Standard-DPI, die Größe, die Designern beibrachte, wie brutal Pixelbeschränkungen sein können. 32×32 ist die Tab-Größe bei hoher DPI (Retina); viele moderne Browser bevorzugen sie selbst für „Standard“-Displays, weil sie sich besser verkleinert als 16×16 sich vergrößert. 48×48 ist die Größe, die Windows für Taskleisten-Verknüpfungen und angeheftete Site-Favicons verwendet. 180×180 ist das apple-touch-icon, angezeigt, wenn ein Nutzer eine Site zum iOS-Startbildschirm hinzufügt. 192×192 ist Chromes Web-App-Installationsaufforderung und das Standard-Icon des Android-Startbildschirms. 512×512 ist das PWA-Splash-Screen-Icon, die Vorschau der Google-Suchergebnisse und die Kachel-Icons des Windows-Startmenüs. Warum eine einzelne hochaufgelöste Datei nicht reicht: Bei den kleinsten Größen braucht das Icon oft eine von Hand abgestimmte Vereinfachung, um lesbar zu bleiben (ein komplexes Logo wird bei 16×16 zu einem farbigen Klecks), weshalb professionelles Favicon-Design typischerweise zwei oder drei Varianten umfasst, eine detaillierte Version für große Größen, eine vereinfachte für mittlere und eine „nur Marke“-Version für die kleinsten. Dieser Generator skaliert eine einzige Quelle über Standard-Nearest-Neighbor- oder Bilinear-Downsampling, was für einfache Formen gut ist; komplexe Logos brauchen bei den kleinsten Größen unter Umständen manuelle Nachbearbeitung.

Das HTML, das zu den Dateien gehört

Die Dateien zu erzeugen ist die halbe Arbeit; die andere Hälfte sind die Meta-Tags in Ihrem <head>, die dem Browser sagen, welche Datei in welchem Kontext zu verwenden ist. Der minimal tragfähige Favicon-Stack 2026:

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

Der Browser wählt die passendste Datei je nach Pixel-Dichte des Geräts und unterstützten Formaten. Moderne Browser bevorzugen das SVG, wenn vorhanden; ältere Browser greifen auf die PNG-Größen zurück; iOS verwendet das apple-touch-icon; die PWA-Installation liest das Manifest. Das favicon.ico im Wurzelverzeichnis wird auch ohne explizites Link-Tag automatisch als Standard-Fallback aufgegriffen, jede Site sollte eines haben, für die Abwärtskompatibilität mit sehr alten Browsern und Tools.

Wann Sie wirklich Favicons erzeugen müssen

Design für die 16×16-Beschränkung

Das 16×16-Favicon ist die anspruchsvollste Beschränkung im modernen Interface-Design. 256 Pixel (die gesamte Icon-Leinwand) müssen genug Markenidentität vermitteln, damit ein Nutzer Ihren Tab unter zwanzig anderen findet. Praktischer Rat von Designern, die das oft gemacht haben: Vereinfachen Sie aggressiv. Ein komplexes Logo bei 16×16 ist ein farbiger Klecks. Reduzieren Sie Details, bis nur die minimal erkennbare Form übrig ist. Maximieren Sie den Kontrast zum Tab-Hintergrund. Browser-Tabs sind typischerweise hellgrau oder dunkelgrau; ein Icon mit schwachem Kontrast verschwindet im Chrome. Bevorzugen Sie einzelne kräftige Formen gegenüber dünnen Linien. Linien unter 2 px Breite werden bei 16 px zu Grau aliased und unsichtbar. Testen Sie in der tatsächlichen Größe in Ihrem Browser. Was in Ihrem Design-Tool bei 256×256 gut aussieht, kann bei 16×16 unleserlich sein. Öffnen Sie mehrere Tabs Ihrer Site und sehen Sie sie in der Tab-Leiste an, das ist der wirkliche Test. Bedenken Sie den Dark-Mode-Fall. Ein für eine weiße Tab-Leiste entworfenes Icon kann auf einer dunklen Tab-Leiste unsichtbar sein. SVG-Favicons können eine prefers-color-scheme-Media-Query innerhalb des SVG enthalten, für automatische Hell/Dunkel-Anpassung; für ICO- und PNG-Fallbacks entwerfen Sie etwas, das auf beiden Hintergründen funktioniert.

Was dieser Generator erzeugt

Datenschutz: Bildverarbeitung nur im Browser

Ein Logo oder Markenbild, das Sie zum Erzeugen eines Favicons hochladen, kann vertraulich sein, vor-Launch-Markenarbeit, internes Tool-Branding, NDA-geschützte Kunden-Logos. Server-seitige Favicon-Generatoren (der sehr beliebte RealFaviconGenerator und ähnliche) nehmen eine Kopie jedes hochgeladenen Bildes in ihre Infrastruktur, wo sie in Logs und Caches verbleibt. Dieser Generator läuft vollständig in Ihrem Browser über die Canvas-API: das Bild wird vom Browser eingelesen, über die eingebaute Bildskalierungs-Pipeline auf jede Favicon-Größe gebracht und zum Download verpackt, alles in Ihrem Tab. Überprüfen Sie im Network-Tab der DevTools beim Hochladen (nach dem Laden der Seite werden keine Anfragen ausgelöst), oder schalten Sie die Seite nach dem Laden offline (Flugmodus), und der Generator funktioniert weiterhin mit lokalen Dateien. Sicher für nicht-angekündigte Markenarbeit, NDA-geschützte Kunden-Logos, internes Tool-Branding oder jedes Bild, das Sie nicht auf der Festplatte eines Fremden kopiert sehen wollen.

Verwandte Tools

Bild-Kompressor

Komprimieren Sie Bilder bis zu 80 % kleiner. Drag-and-Drop, sofortiger Download. Kein Upload an einen Server.

Bild-Größenänderer

Passen Sie Bilder auf exakte Pixelmaße an. Voreinstellungen für soziale Netzwerke, Web und mehr.

Bild-Konverter

Zwischen PNG-, JPEG- und WebP-Formaten konvertieren. Stapelkonvertierung mehrerer Dateien.