Favicon-Generator
Erstellen Sie ein komplettes Favicon-Paket aus einem Logo, einem Schriftsymbol oder einem Monogramm — favicon.ico, moderne PNGs, Apple-Touch-Icon, PWA-Icons, Web-Manifest und HTML-Snippet.
Logo einfügen, ein Schriftsymbol wählen oder ein Monogramm eingeben — wir erzeugen jedes Favicon, das eine moderne Website benötigt: vom klassischen favicon.ico über das Apple-Touch-Icon und die PWA-Icons bis zum fertigen HTML-Snippet zum Einfügen.
Über Favicon-Generator
Der Favicon Generator erstellt jedes Icon, das eine moderne Website braucht, aus einer einzigen Quelle: Laden Sie ein Logo-PNG hoch, wählen Sie ein Schrift-Icon oder tippen Sie ein Monogramm. Das Paket enthält das klassische favicon.ico (16, 32 und 48 px), moderne PNG-Favicons, das 180-px-Apple-Touch-Icon, 192- und 512-px-PWA-Icons, eine site.webmanifest und den HTML-Head-Codeschnipsel.
Die Gestaltung erfolgt im Tool: Wählen Sie eine Hintergrundfarbe oder lassen Sie Transparenz, schneiden Sie auf ein Quadrat, eine abgerundete Form oder einen Kreis zu, passen Sie Innenabstand und Grafikgröße an und legen Sie die Themenfarbe fest, die von der Browser-Oberfläche und dem PWA-Manifest genutzt wird. Eine Live-Vorschau zeigt Ihr Icon in echten Kontexten – ein 16-px-Browser-Tab, ein Lesezeichen, die Apple-Touch-Kachel und ein PWA-Icon.
Alles wird auf einem Canvas in Ihrem Browser gerendert, und „Erzeugen“ fügt das gesamte Paket zu einer ZIP-Datei mit einer README zusammen. Die Installation erfolgt in zwei Schritten: entpacken Sie es in Ihr Website-Stammverzeichnis und fügen Sie den mitgelieferten Codeschnipsel in Ihren <head> ein.
So verwenden Sie Favicon-Generator
- Wählen Sie Ihre Quelle: laden Sie ein PNG-Logo hoch, wählen Sie ein Schrift-Icon, oder tippen Sie ein Monogramm.
- Gestalten Sie es – Hintergrundfarbe oder Transparenz, Form, Innenabstand und Grafikgröße.
- Füllen Sie Website-Name, Kurzname und Themenfarbe für das PWA-Manifest aus.
- Prüfen Sie die Vorschauen: Browser-Tab, Lesezeichen, Apple-Touch- und PWA-Kontexte.
- Klicken Sie auf „Favicons erzeugen“ und entpacken Sie das Paket in Ihr Website-Stammverzeichnis.
- Fügen Sie den HTML-Codeschnipsel aus dem Paket in den <head> Ihrer Seite ein.