Favicon Generator: Favicon kostenlos online erstellen

Ein Favicon ist das kleine Icon einer Website. Es erscheint im Browser-Tab, in den Lesezeichen und als App-Icon auf dem Startbildschirm von Smartphones. Damit es überall scharf aussieht, braucht eine Website mehrere Größen: Der Favicon Generator erzeugt 16, 32 und 48 px in der favicon.ico, 180 px für iOS sowie 192 und 512 px für Android.

Der Favicon Generator ist kostenlos und braucht kein Konto. Dein Bild wird nicht hochgeladen: Die Erzeugung läuft komplett über die Canvas-API in deinem Browser, nichts wird an einen Server gesendet oder gespeichert. Ein Bild darf bis zu 15 MB groß sein.

Du bekommst favicon.ico mit 16, 32 und 48 px in einer Datei, apple-touch-icon.png (180 × 180), android-chrome-192x192.png, android-chrome-512x512.png und eine site.webmanifest. Jede Datei lädst du einzeln oder gesammelt als favicon-package.zip herunter. Dazu kommt ein HTML-Snippet mit 6 Zeilen für den <head> deiner Seite: Es bindet alle Dateien ein und endet mit der Theme-Farbe, bei #18e888 zum Beispiel mit <meta name="theme-color" content="#18e888">.

Es gibt nicht die eine Größe: Der Browser-Tab zeigt 16 × 16 px, die Windows-Taskleiste 32 × 32 px, Explorer und Verknüpfungen 48 × 48 px. iOS nutzt 180 × 180 px für den Startbildschirm, Android 192 × 192 und 512 × 512 px. Der Generator erzeugt alle diese Größen aus einem Bild. Weil feine Details und viel Text bei 16 × 16 px verloren gehen, zeigt dir die Vorschau 16, 32 und 48 px in Originalgröße und die größeren Icons verkleinert, bevor du die Dateien einbindest.

Lade das Bild im Tab „Bild hochladen“ hoch. Du verschiebst den Ausschnitt per Ziehen, zoomst zwischen 50 und 250 % und kannst einen transparenten Rand automatisch zuschneiden lassen. Der Generator packt 16, 32 und 48 px in eine echte favicon.ico mit mehreren Größen und erzeugt dazu die PNG-Icons für iOS und Android. Am besten startest du mit einem quadratischen Bild von mindestens 512 × 512 px, denn das ist die größte erzeugte Datei.

Ja. Im Tab „Text oder Emoji“ gibst du bis zu 4 Zeichen ein, am besten wirken 1–2 Buchstaben oder ein einzelnes Emoji. Du wählst Hintergrundfarbe, Textfarbe, die Form Abgerundet, Eckig oder Kreis und die Textgröße zwischen 25 und 80 %. Daraus entstehen dieselben Dateien wie aus einem hochgeladenen Bild.

Lade favicon.ico, apple-touch-icon.png, die beiden Android-Chrome-Icons und die site.webmanifest in das Stammverzeichnis deiner Website, denn das HTML-Snippet verweist auf Pfade wie /favicon.ico und /site.webmanifest. Kopiere dann das Snippet in den <head> deiner Seiten. Bearbeitest du den <head> nicht selbst, etwa in WordPress, lädst du dort ein Website-Icon hoch, zum Beispiel die android-chrome-512x512.png. Eine direkte Verbindung zu deiner Website oder deinem CMS hat das Tool nicht.

Sie füllt immer den Hintergrund des Apple-Touch-Icons, weil iOS Transparenz dort unzuverlässig verarbeitet. Ist „Transparenter Hintergrund“ ausgeschaltet, füllt sie auch favicon.ico und die Android-Icons. Außerdem steht sie als theme_color und background_color in der site.webmanifest und als theme-color-Meta-Tag im HTML-Snippet.