Favicon-Generator | ICO und PNG in mehreren Größen

Laden Sie ein Bild hoch, schneiden Sie es quadratisch zu und erzeugen Sie eine favicon.ico mit mehreren Größen (16, 32, 48px und mehr) sowie einen vollständigen PNG-Satz. Hochwertige Lanczos-Verkleinerung und fertiger HTML-Code, alles direkt im Browser verarbeitet.

Zuletzt aktualisiert: 2026-09-11

Favicon einbinden (nach Muster)

Wie ein Favicon eingebunden wird, hängt davon ab, wie weit die Unterstützung reichen soll. Hier finden Sie die nötigen Muster – vom absoluten Minimum bis zu vollständiger PWA- und Dunkelmodus-Unterstützung. Alle Beispiele gehen davon aus, dass die erzeugten Dateien im Stammverzeichnis liegen.

Muster 1: Minimum (nur favicon.ico ablegen)

Ganz ohne HTML: Legen Sie einfach /favicon.ico im Dokumentstamm ab. Browser suchen diesen Pfad implizit, das Symbol erscheint also ohne jede Auszeichnung.

your-site/
└── favicon.ico   ← einfach hier ablegen (kein HTML nötig)

<!-- Wer es ausdrücklich schreiben möchte, kommt mit dieser einen Zeile aus -->
<link rel="icon" href="/favicon.ico" sizes="any">

Geeignet für	Private Seiten, interne Werkzeuge und alles, wo es nur sichtbar sein muss
Hinweise	Mit `sizes="any"` behandeln Browser die ICO korrekt als letzte Rückfalloption, sobald Sie später SVG- oder PNG-Symbole ergänzen. Empfohlen wird, 16, 32 und 48px in der ICO zu bündeln.

Muster 2: Standardaufbau (empfohlen)

Zusätzlich zur ICO noch PNG-Dateien und ein Apple Touch Icon – mit Abstand der heute gebräuchlichste Aufbau. Er deckt alles ab, vom Desktop-Browser bis zum Hinzufügen zum iOS-Startbildschirm.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Geeignet für	Unternehmensseiten, Blogs, Magazine – ganz normale Websites
Hinweise	Transparente Bereiche eines `apple-touch-icon` werden schwarz gefüllt, exportieren Sie also immer ein deckendes PNG mit Hintergrundfarbe. iOS rundet zudem die Ecken ab; rund 10% Innenabstand verhindern, dass die Ränder abgeschnitten werden.

Muster 3: Vollständiger PWA-Aufbau

Bei einer PWA, die vom Startbildschirm aus wie eine App startet, werden die Symbole in site.webmanifest eingetragen. Ohne 192px und 512px stuft Chrome die App nicht als installierbar ein.

<!-- HTML (innerhalb von head) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

<!-- site.webmanifest -->
{
  "name": "My Site",
  "short_name": "Site",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Geeignet für	PWAs, Web-Apps und Dienste, die überwiegend auf dem Smartphone genutzt werden
Hinweise	iOS wertet die im Manifest deklarierten Symbole nicht aus, ein `apple-touch-icon` bleibt daher zusätzlich nötig. `display: "standalone"` blendet die Browser-Oberfläche aus, sodass die Seite wie eine native App startet.

Muster 4: SVG-Favicon mit Dunkelmodus-Unterstützung

Ein SVG-Favicon ist auflösungsunabhängig, und CSS innerhalb der SVG kann die Farben im Dunkelmodus wechseln. Geben Sie daneben ICO- und PNG-Dateien für Browser an, die es nicht unterstützen.

<!-- HTML (innerhalb von head). Es gewinnt das erste Format, das der Browser lesen kann -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- favicon.svg (Farbe im Dunkelmodus umkehren) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
  </style>
  <path d="M4 4h24v24H4z"/>
</svg>

Geeignet für	Websites mit vektorbasiertem Logo oder wenn das Symbol im Dunkelmodus anders aussehen soll
Hinweise	Chrome, Firefox und Edge unterstützen SVG-Favicons. Safari ignoriert SVG in `rel="icon"` derzeit, die Rückfalloptionen in PNG und ICO sind daher zwingend.

Muster 5: Unterverzeichnisse und Cache-Erneuerung

Was zu schreiben ist, wenn die Symbole nicht im Stammverzeichnis liegen oder wenn nach dem Austausch weiterhin das alte Symbol erscheint. Favicons werden hartnäckig zwischengespeichert, das Ändern der URL ist die zuverlässigste Lösung.

<!-- Bei einem eigenen Verzeichnis den Pfad ausdrücklich angeben -->
<link rel="icon" href="/assets/icons/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png?v=2">

<!-- Bei Auslieferung aus einem Unterverzeichnis (z. B. /docs/) auf den absoluten Pfad achten -->
<link rel="icon" href="/docs/favicon.ico" sizes="any">

Geeignet für	CDN-Auslieferung, Websites mit zentraler Asset-Verwaltung und ausgetauschte Symbole
Hinweise	Allein die implizite Suche nach `/favicon.ico` im Stammverzeichnis lässt sich nicht umlenken. Auch wer die Symbole aus einem Unterverzeichnis ausliefert, sollte deshalb eine Kopie im Stammverzeichnis behalten.

Welche Datei wird wo verwendet

Eine kurze Übersicht, wo jede Datei tatsächlich zum Einsatz kommt. Sie brauchen nicht alle – wählen Sie nach den Umgebungen aus, die Sie abdecken möchten.

Datei	Größe	Einsatzort
favicon.ico	16 / 32 / 48px	Browser-Tabs, Lesezeichen und Windows-Taskleiste. Wird auch ohne Auszeichnung im Stammverzeichnis gesucht
favicon-16x16.png	16×16	Browser-Tab auf Bildschirmen mit Standardauflösung
favicon-32x32.png	32×32	Browser-Tab auf Retina- und anderen hochauflösenden Bildschirmen sowie in der Lesezeichenleiste
apple-touch-icon.png	180×180	Das Symbol beim Hinzufügen zum Startbildschirm von iOS oder iPadOS. Transparenz wird schwarz gefüllt
android-chrome-192x192.png	192×192	Startbildschirm-Symbol unter Android (über das Manifest)
android-chrome-512x512.png	512×512	PWA-Splashscreen und App-Übersichten (über das Manifest)
site.webmanifest	—	Die PWA-Konfigurationsdatei mit Symbolen, Themenfarbe und Startverhalten
favicon.svg	Skalierbar	Chrome, Firefox und Edge. Ermöglicht einen Farbwechsel im Dunkelmodus

Was ist ein Favicon-Generator?

Ein Favicon-Generator ist ein Werkzeug, mit dem Sie aus einem einzigen Bild sowohl eine favicon.ico als auch PNG-Dateien in mehreren Größen auf einmal erstellen können. favicon.ico ist ein besonderes Dateiformat, das mehrere Auflösungen wie 16px, 32px und 48px in einer einzigen Datei bündeln kann; Browser, Betriebssystem und die jeweilige Anzeigefläche – Browser-Tab, Lesezeichenleiste oder Taskleiste – wählen daraus automatisch die passende Größe aus. Ohne dieses Werkzeug müssten Sie jede Größe von Hand einzeln exportieren und die Zuschnitte, Ränder und Farbeinstellungen jedes Mal neu abstimmen; hier erledigen Sie den gesamten Weg vom quadratischen Zuschnitt bis zu den Ausgabeeinstellungen allein durch Klicks im Browserfenster.

Das Einlesen des Bildes, der Zuschnitt, die Verkleinerung sowie die Umwandlung in ICO und PNG laufen vollständig als JavaScript in Ihrem Browser ab. Das hochgeladene Bild verlässt zu keinem Zeitpunkt Ihr Gerät und wird nicht an einen Server übertragen – ein Vorteil, der besonders bei Firmenlogos vor der offiziellen Veröffentlichung oder bei Bildmaterial, das laut Markenrichtlinien noch nicht öffentlich sein darf, beruhigend ist. Für die Verkleinerung selbst kommt das Lanczos-Verfahren zum Einsatz, das den Kantenkontrast des Ursprungsbilds so gut wie möglich erhält; selbst bei einer so kleinen Zielgröße wie 16px verschwimmen Schriftzüge und feine Logokonturen dadurch deutlich weniger stark als bei einer einfachen linearen Verkleinerung.

So erstellen Sie ein Favicon

Bild hochladen Ziehen Sie das Logo oder Icon-Bild per Drag & Drop in das Feld oder klicken Sie darauf, um eine Datei auszuwählen. Unterstützt werden PNG, JPEG, SVG, WebP, GIF und BMP, sodass Sie so gut wie jedes vorhandene Ausgangsmaterial direkt verwenden können.
Auf ein Quadrat zuschneiden Verschieben Sie den eingeblendeten Rahmen per Drag, um die Position festzulegen, und ziehen Sie an den vier Ecken, um den erfassten Bereich zu vergrößern oder zu verkleinern. Da ein Favicon zwingend quadratisch sein muss, ist das Seitenverhältnis des Rahmens dauerhaft auf 1:1 fixiert und lässt sich nicht verzerren.
Ausgabeeinstellungen wählen Legen Sie nach Bedarf fest, welche Größen in der favicon.ico gebündelt werden sollen, welche PNG-Größen zusätzlich ausgegeben werden, welcher Verkleinerungsalgorithmus zum Einsatz kommt und ob ein Innenabstand oder eine Hintergrundfarbe ergänzt wird. Für die meisten Websites genügen dabei bereits die vorausgewählten Standardwerte.
Erstellen und in der Vorschau prüfen Ein Klick auf „Favicons erstellen" erzeugt alle gewählten Größen auf einmal. In der Vorschau in Originalgröße lässt sich genau beurteilen, wie die Grafik im winzigen 16px-Format tatsächlich wirkt, bevor Sie sie veröffentlichen.
Herunterladen und einbinden Laden Sie einzelne Dateien herunter oder wählen Sie den ZIP-Sammeldownload für den gesamten Satz, und fügen Sie den mitgelieferten HTML-Code in den Bereich Ihrer Website ein. Damit sind alle Einbindungen auf einen Schlag erledigt.

Tipps für die Nutzung

Beginnen Sie mit einem quadratischen Bild von mindestens 512×512px, dann bleibt die Kontur bis hinunter zu 16px erhalten. Ist Ihr Bild nicht quadratisch, wählen Sie mit dem eingebauten Zuschnitt genau den quadratischen Ausschnitt aus, den Sie brauchen.
Lanczos3 bildet einen gewichteten Mittelwert benachbarter Pixel, während die negativen Nebenkeulen des Kerns die Kanten wieder anheben. Dadurch bleibt mehr von der Kontur erhalten als bei der browsereigenen Skalierung, was sich bei Logos und Schrift deutlich zeigt.
Das prägende Merkmal von ICO ist, dass eine einzige Datei mehrere Größen enthalten kann. Bündeln Sie 16, 32 und 48px, dann greifen Tab, Lesezeichenleiste und Windows-Taskleiste jeweils zu der für sie gemachten Grafik.
Bei Apple Touch Icons werden transparente Bereiche schwarz gefüllt, ein deckendes PNG mit Hintergrundfarbe ist daher die sichere Wahl. Rund 10% Innenabstand verhindern außerdem, dass die abgerundete Maske von iOS die Ränder abschneidet.
Browser halten Favicons hartnäckig im Cache. Erscheint ein Austausch nicht, hängen Sie einen Parameter wie ?v=2 an die URL an oder laden Sie die Seite mit einem harten Reload neu.

Anwendungsfälle

Favicon-Erstellung beim Aufbau einer neuen Website

Vor der Veröffentlichung lässt sich der komplette Satz aus ICO- und PNG-Dateien samt fertigem HTML-Code in einem Arbeitsgang vorbereiten, sodass keine Größe versehentlich im vergessen wird.

Gebündelte Erstellung der PWA-Icon-Größen

Für das Hinzufügen zum Startbildschirm und den Splashscreen benötigte PNGs in 192px und 512px lassen sich zusammen mit der site.webmanifest in einem Durchgang erzeugen, statt jede Größe einzeln nachzupflegen.

Stapelkonvertierung eines bestehenden Markenlogos

Ein vorhandenes Logobild kann eingelesen und unter Anpassung von Innenabstand und Hintergrundfarbe direkt in Icons für die unterschiedlichen Endgeräte und Anzeigekontexte umgewandelt werden, ohne für jedes Ziel neu anzusetzen.

Austausch bei CMS- oder Static-Site-Generator-Projekten

Beim Erneuern des Favicons einer mit WordPress, Hugo oder ähnlichen Systemen gepflegten Website lassen sich alle benötigten Dateiformate lückenlos zusammenstellen, ohne im Nachhinein ein Format zu vermissen.

Komplette Icon-Erneuerung beim Rebranding

Passend zu einem Logowechsel lassen sich Tab-, Lesezeichen- und Startbildschirm-Icons gemeinsam aktualisieren, während die Vorschau die Wirkung in jedem einzelnen Anzeigekontext vorab überprüfbar macht.

Glossar

favicon.ico: Der Dateiname, den Browser stillschweigend direkt im Stammverzeichnis einer Website suchen, auch ohne jede Verlinkung im HTML. Gespeichert wird im ICO-Format, das mehrere Auflösungen in einer einzigen Datei zusammenfassen kann, sodass je nach Anzeigefläche automatisch die passende Größe zum Einsatz kommt.
Apple Touch Icon: Das Icon, das angezeigt wird, wenn eine Website unter iOS über „Zum Home-Bildschirm" hinzugefügt wird. Da transparente Bildbereiche dabei schwarz aufgefüllt werden, empfiehlt es sich, für dieses Icon ausdrücklich eine deckende Hintergrundfarbe festzulegen, statt sich auf Transparenz zu verlassen.
Lanczos-Verfahren: Ein Verkleinerungsalgorithmus, der einen aus der sinc-Funktion abgeleiteten, auf einen endlichen Bereich begrenzten Kern verwendet. Da er den Kantenkontrast beim Verkleinern besser bewahrt als einfachere Verfahren, eignet er sich besonders gut für Schriftzüge und Logos, bei denen feine Linien leicht verlorengehen.
PWA (Progressive Web App): Sammelbegriff für Techniken, mit denen sich eine Website wie eine native App zum Startbildschirm hinzufügen und teilweise auch offline nutzen lässt. Dafür werden in der Regel Icons in 192px und 512px sowie eine site.webmanifest benötigt.
site.webmanifest: Eine Konfigurationsdatei, die Name, Icons, Themenfarbe und weitere Metadaten einer PWA definiert. Sie wird im Stammverzeichnis der Website abgelegt und aus dem HTML heraus referenziert, damit Browser und Betriebssystem sie automatisch finden.
Nächster-Nachbar-Verfahren: Ein Verkleinerungsalgorithmus, der für jeden Zielpixel einfach die Farbe des nächstgelegenen Ursprungspixels übernimmt, ohne Farbwerte zu mischen. Dadurch bleiben scharfe, klar abgegrenzte Kanten wie bei Pixel-Art-Grafiken vollständig erhalten, statt weichgezeichnet zu werden.

Häufige Fragen

Ja. ICO ist ein Containerformat für mehrere Auflösungen, und Betriebssystem oder Browser wählen die passende je nach Kontext: Tab, Lesezeichen, Taskleiste oder Verknüpfung. Enthält die Datei nur 32px, verkleinert der Browser sie für die 16px-Darstellung selbst und die Kontur verwischt. 16, 32 und 48px zusammen sind die klassische Kombination.

Sie decken nahezu jede Situation ab, aber /favicon.ico ist nach wie vor ein Pfad, den Browser auch ohne jede Auszeichnung implizit suchen. Feedreader, Lesezeichendienste und manche Crawler holen sich diese ICO im Stammverzeichnis, ohne Ihr HTML je auszuwerten. Wer sie zusätzlich bereitstellt, lässt keine Lücke.

Größen unter 64px werden als BMP (32-Bit BGRA) abgelegt, 64px und größer als PNG. Seit Windows Vista kann ICO beides aufnehmen, üblich ist jedoch BMP für kleine Größen zugunsten der Kompatibilität und PNG für große zugunsten der Dateigröße. Dieses Werkzeug folgt dieser Konvention.

Nach dem Hochladen erscheint ein Zuschnittrahmen, mit dem Sie einen beliebigen quadratischen Bereich wählen. Ziehen Sie den Rahmen zum Verschieben, nutzen Sie die Ecken zum Skalieren; das Seitenverhältnis bleibt auf 1:1 fixiert. Die Schaltfläche „Auf ganzes Bild zurücksetzen" wählt das größte passende Quadrat mittig aus.

SVG-Dateien lassen sich als Ausgangsbild verwenden, die Ausgabe erfolgt aber immer als PNG und ICO. Für ein SVG-Favicon legen Sie das ursprüngliche SVG auf Ihrer Website ab und verweisen mit <link rel="icon" type="image/svg+xml"> darauf. Die hier erzeugten ICO- und PNG-Dateien daneben anzugeben, ergibt einen zuverlässigen Rückfall für Browser, die SVG-Icons ignorieren.

Übrigens – Die Herausforderung, auf sechzehn Pixeln zu zeichnen

1999 zeigte Internet Explorer 5 erstmals ein kleines Symbol neben den Einträgen der Favoritenliste. Der Mechanismus war reizvoll schlicht: Eine Datei namens favicon.ico im Stammverzeichnis ablegen, und sie wurde gefunden. Der Name selbst ist eine Verkürzung von „favorite icon". Das Element <link rel="icon"> wurde erst später in der HTML-Spezifikation festgeschrieben, und die implizite Suche nach einer ICO im Stammverzeichnis überlebt bis heute allein aus Gründen der Abwärtskompatibilität.

Dass ICO das Windows-Symbolformat übernahm, erwies sich als überaus folgenreich. Eine einzige ICO-Datei kann mehrere Auflösungen aufnehmen, sodass der 16px-Tab und die 48px-Taskleiste tatsächlich unterschiedliche Grafiken zeigen können. Das ist mehr als Bequemlichkeit: Auf einer Fläche von 16×16 Pixeln lässt ein mechanisch verkleinerter 48px-Entwurf feine Striche verschwinden und Schrift unleserlich werden. Icon-Gestalter zeichneten jede Größe von Hand, weil das der einzige Weg war, dieses Problem zu lösen.

Die moderne Favicon-Erzeugung ersetzt das Zeichnen von Hand durch eine andere Frage: Wie klug lässt sich verkleinern? Ein einfacher Mittelwert (bilinear) verliert Kantenkontrast, reines Abtasten (nächster Nachbar) wirft feine Striche ganz weg. Die Lanczos-Neuabtastung verwendet eine auf endlich viele Keulen gestutzte sinc-Funktion: Die Hauptkeule bewahrt die ursprüngliche Information, die negativen Nebenkeulen heben die Kanten wieder an. Genau diese sanfte Betonung der Kontur brauchen winzige Icons.

Die Anforderungen sind seither nur gewachsen. 2007 kam mit dem iPhone das Apple Touch Icon (anfangs 57px, heute 180px), PWAs machten 192px und 512px nötig, und SVG-Favicons mit Unterstützung für den Dunkelmodus stehen inzwischen ebenfalls zur Debatte. Verglichen mit einer einzigen abgelegten Datei wirkt das nach viel Aufwand – umgekehrt heißt es aber auch, dass jene paar Dutzend Pixel im Browser-Tab von außerordentlich vielen Menschen gesehen werden.

Alle Wissenstexte ansehen