Wie erstelle ich Favicons aus einem Logo?

Logo ablegen oder einfuegen, die sechs PNG-Groessen abwarten, dann eine Datei oder das ZIP-Pack herunterladen. Alles laeuft im Browser - nichts wird hochgeladen.

Welche Groessen sind enthalten?

Das Pack enthaelt 16x16, 32x32, 48x48, 180x180 (apple-touch-icon.png), 192x192 und 512x512 PNG - die ueblichen Groessen fuer Tabs, Windows, iOS und Android.

Was, wenn mein Logo nicht quadratisch ist?

Der Generator passt das Bild in jedes Quadrat ein (object-fit contain) und laesst transparenten Rand. Fuer ein randloses Icon das Logo vorher quadratisch zuschneiden.

Enthaelt das ZIP HTML?

Ja. Das ZIP legt eine kleine Textdatei mit link-Tags bei, die Sie in den head einfuegen koennen. Denselben Schnipsel koennen Sie auch auf der Seite kopieren.

Kann ich SVG als Favicon nutzen?

Sie koennen SVG als Quelle laden, wenn der Browser es dekodiert. Die Ausgabe ist immer PNG fuer breite Unterstuetzung. Behalten Sie ein separates SVG-Favicon fuer Vektor-Tabs in unterstuetzenden Browsern.

Wird mein Logo auf einen Server hochgeladen?

Nein. FileReader, Canvas und ZIP laufen nur in diesem Tab. Sicher fuer unveröffentlichte Markenzeichen. Pruefen Sie DevTools Network waehrend der Erzeugung.

Generator-Tools

Favicon-Generator

Machen Sie aus einem Logo oder Icon ein vollstaendiges Favicon-PNG-Pack im Browser - ohne Konto und ohne Upload.

Ihr Bild verlaesst den Browser nicht. Favicon-PNGs werden lokal mit Canvas erzeugt - es gibt keinen Upload-Endpunkt.

Logo oder Icon hier ablegen oder zum Durchsuchen klicken

JPG, PNG, WebP, GIF, BMP oder SVG (max. 8 MB). Lokal gelesen - nichts wird hochgeladen.

Oder Bild mit Strg+V / Cmd+V einfuegen.

Über Favicon-Generator

Machen Sie aus einem Logo oder Icon ein vollstaendiges Favicon-PNG-Pack im Browser - ohne Konto und ohne Upload. Ein Bild wird zu PNG in 16, 32, 48, 180 (Apple Touch), 192 und 512 px, optional als ZIP, plus fertige HTML-Link-Tags. Canvas-Skalierung bleibt auf diesem Geraet. Kombinieren Sie es mit dem Bildkompressor, wenn die Quelle riesig ist, oder dem Open-Graph-Tag-Generator fuer Social Previews.

So verwenden Sie Favicon-Generator

Legen Sie ein JPG, PNG, WebP, GIF, BMP oder SVG ab (max. 8 MB) oder fuegen Sie ein Bild ein. Die Datei wird lokal gelesen - nichts wird hochgeladen.
Warten Sie auf die sechs PNG-Vorschauen: 16, 32, 48, Apple-Touch 180, Android 192 und 512. Nicht-quadratische Quellen werden mit transparentem Rand eingepasst.
Laden Sie einzelne PNGs oder das ZIP-Pack herunter (enthaelt eine Textdatei mit HTML-Link-Tags).
Kopieren Sie den HTML-Schnipsel in den document head und legen Sie die PNGs an den passenden Pfaden ab (meist Site-Root).
Pruefen Sie in DevTools Network, dass das Erzeugen keine Anfrage ausloest.

Beispiele für Favicon-Generator

Quadratisches Logo fuer eine neue Site

Legen Sie ein 1024-px-PNG-Logo ab. Laden Sie das ZIP herunter, entpacken Sie nach /public und fuegen Sie die HTML-Tags in den Root-Layout-Head ein.

Breites Wordmark mit Rand

Ein querformatiges Wordmark wird in jedem Quadrat zentriert mit transparenten Raendern, damit Browser-Tabs den Text nicht abschneiden.

Nur Apple Touch Icon

Erzeugen Sie das Pack und laden Sie nur apple-touch-icon.png (180x180) herunter, wenn Sie die anderen Groessen schon haben und nur iOS-Homescreen-Icons brauchen.

PWA-Icons fuer Chrome

Nutzen Sie android-chrome-192x192.png und android-chrome-512x512.png im icons-Array Ihres Web-App-Manifests nach dem ZIP-Download.

Zuerst komprimieren, dann Favicon

Ist die Quelle ein riesiges Foto vom Logo, zuerst den Bildkompressor nutzen, ein kleineres PNG speichern, dann den Favicon-Generator oeffnen.

Häufige Anwendungsfälle

Vollstaendiges Favicon-Set fuer eine Next.js- oder Static-Site ausliefern
Apple Touch Icons fuer iOS-Homescreen-Lesezeichen erzeugen
Android-Chrome- / PWA-Groessen aus einem Logo erzeugen
Marken-Icons aktualisieren ohne Upload-Tool
HTML-Link-Tags zusammen mit dem PNG-Pack kopieren

Häufig gestellte Fragen zu Favicon-Generator

Wie erstelle ich Favicons aus einem Logo?: Logo ablegen oder einfuegen, die sechs PNG-Groessen abwarten, dann eine Datei oder das ZIP-Pack herunterladen. Alles laeuft im Browser - nichts wird hochgeladen.
Welche Groessen sind enthalten?: Das Pack enthaelt 16x16, 32x32, 48x48, 180x180 (apple-touch-icon.png), 192x192 und 512x512 PNG - die ueblichen Groessen fuer Tabs, Windows, iOS und Android.
Was, wenn mein Logo nicht quadratisch ist?: Der Generator passt das Bild in jedes Quadrat ein (object-fit contain) und laesst transparenten Rand. Fuer ein randloses Icon das Logo vorher quadratisch zuschneiden.
Enthaelt das ZIP HTML?: Ja. Das ZIP legt eine kleine Textdatei mit link-Tags bei, die Sie in den head einfuegen koennen. Denselben Schnipsel koennen Sie auch auf der Seite kopieren.
Kann ich SVG als Favicon nutzen?: Sie koennen SVG als Quelle laden, wenn der Browser es dekodiert. Die Ausgabe ist immer PNG fuer breite Unterstuetzung. Behalten Sie ein separates SVG-Favicon fuer Vektor-Tabs in unterstuetzenden Browsern.
Wird mein Logo auf einen Server hochgeladen?: Nein. FileReader, Canvas und ZIP laufen nur in diesem Tab. Sicher fuer unveröffentlichte Markenzeichen. Pruefen Sie DevTools Network waehrend der Erzeugung.

Bildkompressor

Kostenloser Bildkompressor im Browser. JPG, PNG und WebP mit Qualitaet und Maximalgroesse verkleinern, dann herunterladen. Nichts wird hochgeladen.

Bild-zu-Base64-Konverter

Wandeln Sie ein Bild in Base64 oder eine Data-URL im Browser um - Ihr Bild verlaesst den Browser nie. Screenshots einfuegen, CSS/HTML/Markdown kopieren oder Base64 wieder als herunterladbare Datei dekodieren.

QR-Code-Generator

Kostenloser QR-Code-Generator im Browser. Erstellen Sie URL-, Text- oder WLAN-QR-Codes, wählen Sie Größe und Farben, laden Sie PNG oder SVG herunter. Nichts wird hochgeladen.

Open-Graph-Tag-Generator

Erzeugen Sie Open-Graph- und Twitter-Card-Meta-Tags aus Titel, Beschreibung, URL und Bild. Kostenloser OG-Generator mit Live-HTML und Social-Vorschau.