Favicon-Generator

Logo oder Symbol hochladen und alle Standard-Favicon-Größen als PNG herunterladen. Inkl. Apple Touch Icon und PWA-Icons. Nichts verlässt Ihr Gerät.

So funktioniert Favicon-Generator

Favicon Generator nimmt ein beliebiges Bild, das Sie bereitstellen, und skaliert es mithilfe der Canvas-drawImage-API auf die Standard-Favicon-Abmessungen: 16x16, 32x32, 48x48, 180x180 (Apple Touch Icon), 192x192 (Android Chrome) und 512x512 (PWA-Manifest). Alle sechs Größen werden in Ihrem Browser generiert und als einzelne PNG-Dateien heruntergeladen. Ihr Quellbild verlässt Ihr Gerät niemals.

Ein vollständiges Favicon-Set deckt den gesamten Bereich von Browser-Tab-Icons, Lesezeichen, Startseiten-Verknüpfungen und PWA-Splash-Screens ab. Die Verwendung eines hochauflösenden Quellbildes (mindestens 512x512 Pixel) gibt dem Verkleinerungsalgorithmus die meisten Details zum Arbeiten. Die HTML-Link-Tags, die Sie benötigen, um jede generierte Datei zu referenzieren, werden in einem Snippet angezeigt, das Sie direkt in das head-Element Ihrer Seite einfügen können.

Verfasst von Bastien Sulyan

So wird Favicon-Generator verwendet, Schritt für Schritt

Ziehen Sie Ihr Quellbild auf den Upload-Bereich. Verwenden Sie für beste Ergebnisse ein quadratisches Bild mit 512 Pixel oder mehr.
Sehen Sie sich die sechs generierten Größen im Ergebnisbereich an.
Laden Sie jede der sechs PNG-Dateien einzeln aus dem Ergebnisbereich herunter.
Kopieren Sie das HTML-Snippet, das die Link-Tags für alle Größen anzeigt.
Platzieren Sie die PNG-Dateien im Root Ihrer Website und fügen Sie die Link-Tags in Ihren Seiten-Head ein.

Häufige Anwendungsfälle

Ein Entwickler richtet eine neue Website ein und benötigt alle Favicon-Größen, die aus dem Markenlogo generiert wurden, ohne ein Design-Tool-Abonnement.
Ein PWA-Autor generiert die 192x192- und 512x512-Icons, die im Web-App-Manifest für die Installation auf dem Startbildschirm erforderlich sind.
Eine Bloggerin aktualisiert ihre Website-Identität und ersetzt das Standard-Favicon durch ein benutzerdefiniertes Icon aus ihrem Logo.
Ein Freiberufler erstellt schnell das vollständige Favicon-Set für ein Kundenprojekt, ohne auf die Installation von Offline-Design-Software zu warten.

Häufig gestellte Fragen

Welche Bildformate kann ich als Quelle verwenden?

Jedes Format, das der Browser dekodieren kann, funktioniert als Eingabe: JPEG, PNG, WebP, GIF und SVG. Bei SVG-Quellen rastert der Browser den Vektor auf ein Canvas, bevor er skaliert wird, sodass die Ausgabe-PNGs Rasterbilder sind.

Warum ist mein Favicon im Browser-Tab unscharf?

Die 16x16- und 32x32-Größen sind sehr klein. Wenn das Quellbild feine Details oder dünne Linien enthält, überleben sie die Verkleinerung nicht. Ein einfaches, kräftiges Design mit klaren Formen funktioniert bei kleinen Größen viel besser als eine komplexe Illustration.

Generiert das Tool ICO-Dateien?

Ja. Neben den sechs PNGs stellt das Tool zusätzlich eine favicon.ico zusammen, die die Bilder in 16x16, 32x32 und 48x48 in einer einzigen Datei bündelt. Das ist das Format, das ältere Windows-Browser und manche Crawler weiterhin am Root der Website erwarten. Moderne Browser kommen mit den PNG-Links gut zurecht, daher kostet die gemeinsame Veröffentlichung nichts und überlässt jedem Client die Wahl.

Wird das Quellbild auf einem Server verarbeitet?

Nein. Die Canvas-drawImage-Aufrufe, die jede Größe erzeugen, laufen in Ihrem Browser-Tab. Das Quellbild wird von Ihrer lokalen Festplatte gelesen, und die sechs PNG-Ausgaben werden im Arbeitsspeicher erstellt und als Downloads angeboten. Keine Dateidaten passieren einen Server.

Welche Größe sollte ich für das Apple Touch Icon verwenden?

iOS und iPadOS verwenden das 180x180 Pixel große PNG, das vom apple-touch-icon-Link-Tag referenziert wird. Diese Größe wird verwendet, wenn ein Nutzer Ihre Website auf seinem Apple-Gerät zum Startbildschirm hinzufügt. Das Tool generiert diese Datei zusammen mit den anderen Größen.

Kann ich ein rechteckiges Bild als Quelle verwenden?

Ja, aber die Ausgabe wird letterboxed oder pillarboxed, um auf das quadratische Canvas zu passen. Für beste Ergebnisse beginnen Sie mit einem quadratischen Bild oder schneiden Sie Ihr Quellbild auf ein Quadrat zu, bevor Sie das Tool verwenden.

Anleitungen und Artikel zu diesem Tool

Ein Favicon aus einem PNG erstellen