Bild → Icon

Favicon und PWA-Icons generieren

Die .zip enthält:

favicon-16.png16×16
favicon-32.png32×32
favicon-48.png48×48
apple-touch-icon.png180×180
icon-192.png192×192
icon-512.png512×512
manifest.jsonPWA
head-snippet.html<head>

So funktioniert es

Bild → Icon — Favicon und PWA-Icons generieren. Alle Verarbeitung erfolgt in deinem Browser — kein Upload, keine Anmeldung, keine E-Mail. Für immer kostenlos.

Zuletzt aktualisiert: 2026-05-06

Editor's note

Wir haben das gebaut, weil jedes Framework eine andere Favicon-Größe will, Apple ständig neue erfindet und das PWA-Manifest seine eigenen 192- und 512-Pixel-Varianten braucht. An dem Morgen, als wir achtundzwanzig separate Icon-Dateien im Multilities-Projekt gezählt haben, war beschlossene Sache, dass wir das nie wieder von Hand machen. Das ZIP, das dieses Tool ausspuckt, ist genau das Bundle, das wir bei einer neuen Seite in public/ ablegen — alles Kleinere hinterlässt zwei Monate später einen 404 in irgendjemands Manifest und ein iOS-Homescreen-Icon, das auf Screenshots verwaschen aussieht.

Die Centre-Crop-Vorschau gibt es, weil wir dem Tool immer wieder hochformatige Logos gefüttert und uns gewundert haben, warum bei 16×16 die Kopfpartie der Buchstaben fehlte. Jetzt siehst du den Crop, bevor du dich festlegst. Wir haben bewusst weder Hintergrundentfernung noch Rounded-Corner-Masking eingebaut — das sind Designentscheidungen, die in deine Quelldatei gehören und nicht von einem Utility geraten werden sollen. Bring ein sauberes, quadratisches PNG mit, der Rest ist Mechanik.

Über Bild → Icon

Bild → Icon verwandelt ein einzelnes Quell-PNG in ein komplettes Favicon- und PWA-Icon-Set, inklusive manifest.json und HTML-Head-Snippet zum Verkabeln. Es ist ein Ein-Klick-Favicon Generator und PWA-Icon-Erzeuger für Entwickler, die sich den manuellen ImageMagick-Tanz sparen wollen.

Lade dein Logo hoch — das Tool zentriert und beschneidet es zu einem Quadrat, erzeugt jede benötigte Größe (16, 32, 48, 180, 192, 512), packt alles mit einem Manifest in eine Zip-Datei und liefert ein Copy-Paste-HTML-Snippet für deinen <head>.

Die Erzeugung läuft in deinem Browser, sodass unveröffentlichtes Branding deine Maschine nicht verlässt. Die Ausgabe ist eine saubere .zip, die du direkt in den public/-Ordner deines Projekts committen kannst.

So verwenden Sie Bild → Icon

Ziehe ein quadratisches PNG in den Upload-Bereich — quadratische Bilder funktionieren am besten, idealerweise mit transparentem Hintergrund.
Prüfe die mittig zugeschnittene Vorschau, um sicherzustellen, dass dein Logo nicht abgeschnitten wird; nicht-quadratische Quellen werden automatisch beschnitten.
Klicke Generate icon set & download .zip und warte einen Moment, bis jede Größe gerendert ist.
Entpacke das Archiv in den public/- (oder static/-) Ordner deines Projekts.
Füge das mitgelieferte HTML-Head-Snippet in deinen <head> ein und referenziere die manifest.json über das passende <link>-Tag.
Mache einen Hard-Refresh in einem privaten Fenster, um zu bestätigen, dass das neue Favicon und PWA-Install-Icon erscheinen.

Häufige Anwendungsfälle

Eine neue Website starten, bei der du ein Logo-PNG hast, aber keine Zeit, manuell 8 verschiedene Größen zu exportieren.
Eine bestehende App um PWA-Unterstützung erweitern — die 192- und 512-px-Icons erfüllen die Manifest-Anforderungen out of the box.
Das Favicon nach einem Rebrand auffrischen, ohne das Designteam um Re-Exports zu bitten.
Apple Touch Icons (180 px) erzeugen, damit iOS-Homescreen-Verknüpfungen scharf aussehen.
Konsistente Icon-Sets für mehrere Umgebungen (Staging, Production) aus einer einzigen Quelldatei generieren.

Tipps und häufige Fehler

Starte mit einer hochauflösenden Quelle (mindestens 512×512), damit die herunterskalierten Größen scharf bleiben.
Nutze einen transparenten Hintergrund — opake Hintergründe sehen in den abgerundeten Masken von iOS seltsam aus.
Teste das Favicon in einem Inkognito-Fenster; Browser cachen Favicons aggressiv.
Hat dein Logo sehr dünne Linien, können sie bei 16×16 verschwinden — gestalte bei Bedarf eine vereinfachte Marke für winzige Größen.

Häufig gestellte Fragen

Welche Größen enthält das generierte Set?

16, 32, 48 (Favicons), 180 (Apple touch icon), 192 und 512 (PWA). Plus ein manifest.json und ein HTML-Snippet zum Einfügen in dein Projekt.

Was, wenn meine Quelle nicht quadratisch ist?

Wir beschneiden automatisch zentriert auf ein Quadrat. Für beste Ergebnisse: quadratisches Bild mit zentriertem Hauptmotiv.

Welches Format eignet sich am besten als Quelle?

PNG mit transparentem Hintergrund. SVG zuerst über unser SVG → PNG-Tool umwandeln.

Brauche ich 2026 noch eine separate .ico-Datei?

Moderne Browser nutzen problemlos PNG-Favicons, die per <link rel="icon" type="image/png"> referenziert werden. Die alte /favicon.ico ist nur nötig, wenn du sehr alte IE-Versionen unterstützt. Viele Teams behalten sie aus Sicherheit trotzdem bei.

Warum zeigt mein PWA-Icon einen weißen Hintergrund statt transparent zu sein?

Manche Plattformen (insbesondere iOS) flatten Transparenz auf Weiß. Gestalte das Icon mit der Annahme, dass ein solider Hintergrund erscheint, oder liefere im Manifest eine maskable-Icon-Variante mit korrekter Safe-Zone.

Kann ich Icons aus einem SVG erzeugen?

Wandle das SVG zuerst mit unserem SVG → PNG Tool in ein hochauflösendes PNG um (versuche 1024 px Breite) und füttere dann das PNG in Bild → Icon. Der Umweg über PNG sorgt dafür, dass jede Größe identisch rastert.