Favicon-Assets-Generator

Erstellen Sie ein komplettes Favicon-Paket – ICO, PNGs, Apple-Touch-Icon, PWA-Icons, Web-Manifest und HTML-Snippet – lokal in Ihrem Browser.

Quellbild
Ziehen Sie ein PNG, JPEG, WebP oder SVG hierher oder wählen Sie eines aus. Jede Plattform verwendet dieses Bild, sofern Sie es unten nicht überschreiben.
Website-Informationen
Wird vom Manifest, dem Apple-Touch-Icon und dem HTML-Snippet verwendet.

Wird angezeigt, wenn der App-Name für die Oberfläche zu lang ist.

Optional. Wird im Manifest weggelassen, wenn leer.

Wo die installierte PWA geöffnet wird.

Präfix, das auf jedes href im HTML-Snippet und auf jedes src im icons-Array des Manifests angewendet wird.

Steuert die theme_color im Manifest und das HTML-Tag <meta name="theme-color">.

Manifest background_color. Wird von Browsern verwendet, um Splash-Screens für PWAs zu zeichnen.

Desktop-Browser-Favicon
Steuert favicon.ico, favicon-16x16.png, favicon-32x32.png und (wenn die Quelle SVG ist) favicon.svg.

Visueller Freiraum um die Quelle innerhalb des Icons.

Desktop-Browser-Tab
Desktop-Browser-Tab (dark)
Suchmaschinen-Ergebnis
iOS-Web-Clip
Steuert das 180×180-Pixel apple-touch-icon.png, das auf iOS-Startbildschirmen verwendet wird.

Apple-Icons müssen deckend sein, daher wird diese Füllung immer angewendet.

Visueller Freiraum um die Quelle innerhalb des Icons.

iOS-Startbildschirm
PWA-Icons
Steuert pwa-192x192.png, pwa-512x512.png und die maskierbaren Varianten.

Visueller Freiraum um die Quelle innerhalb des Icons.

Der vom W3C empfohlene Sicherheitsbereich beträgt 40 %. Der Quellinhalt bleibt innerhalb jeder Plattform-Maske sichtbar.

Windows-Taskleiste
Android-Launcher
Generiertes Paket
Klicken Sie auf „Generieren“, um jedes Asset zu rendern, das Zip-Archiv zu erstellen und das HTML-Snippet zu kopieren.
Noch kein Paket
Wählen Sie ein Bild aus und klicken Sie auf „Generieren“, um das Favicon-Paket zusammenzustellen.

Was das Tool erzeugt

Dieser Generator wandelt ein einzelnes Bild in ein vollständiges, modernes Favicon-Bundle um – eine mehrgrößige .ico für ältere Browser, die PNG-Varianten in 16 / 32 / 180 / 192 / 512, eine optionale Original-.svg, ein site.webmanifest für PWAs sowie das HTML-Snippet, das Sie in <head> einfügen. Jedes Byte wird in Ihrem Browser erzeugt; kein Upload, kein Server, keine Analytics.

Was im Bundle enthalten ist

  • favicon.ico – Mehrbild-Datei (16 / 32 / 48) für Browser-Tabs, Lesezeichen und alte Windows-Verknüpfungen.
  • favicon-16x16.png und favicon-32x32.png – moderne PNG-Varianten, die von aktuellen Browsern verwendet werden.
  • favicon.svg – nur enthalten, wenn Ihr Quellbild eine SVG ist und der Schalter „Original-SVG verwenden” aktiviert ist.
  • apple-touch-icon.png – 180×180, deckend, für iOS-Startbildschirme.
  • pwa-192x192.png und pwa-512x512.png – die Standard-PWA-Icons.
  • pwa-maskable-192x192.png und pwa-maskable-512x512.png – maskierbare Varianten mit dem vom W3C empfohlenen Sicherheitsbereich.
  • site.webmanifest – das PWA-Manifest, das mit den obigen Icons verknüpft ist.

Wie Innenabstand, Hintergrund und maskierbare Sicherheitszonen funktionieren

Jede Plattform hat ihren eigenen Innenabstand („Margin”), damit Sie etwas Luft innerhalb der Icon-Fläche lassen können. Der Schalter „Hintergrund hinzufügen” zeichnet ein deckendes Quadrat hinter Ihrer Quelle – nützlich, wenn die Quelle transparent ist und das Ziel Deckkraft erfordert (Apples Startbildschirm) oder einfach für visuellen Kontrast in einem Browser-Tab. Maskierbare PWA-Icons verwenden zusätzlich zum Plattform-Rand eine weitere Sicherheitszone: Alles außerhalb der zentralen ~80 % kann von Android, Windows oder ChromeOS abgeschnitten werden, wenn diese eine kreisförmige, abgerundete oder Squircle-Maske anwenden.

Das Bundle in Ihre Website einbinden

  1. Entpacken Sie das heruntergeladene Archiv in Ihr Web-Root (sodass die Dateien unter /favicon.ico, /site.webmanifest usw. liegen).
  2. Fügen Sie das HTML-Snippet in den <head> Ihrer Website ein.
  3. Wenn Sie Assets aus einem Unterpfad ausliefern (zum Beispiel /static/icons/), legen Sie vor dem Generieren den „Asset-Pfad” fest, damit Snippet und Manifest die richtigen URLs verwenden.
  4. Wenn Sie das Manifest über das hinaus angepasst haben, was dieses Tool bereitstellt (zum Beispiel um categories oder screenshots hinzuzufügen), öffnen Sie site.webmanifest in einem Texteditor und bearbeiten Sie es direkt – es ist einfaches JSON.