T
Tooltastic
Jetzt ausprobieren

Favicon Generator

Favicons in allen Formaten erstellen – kostenlos & direkt im Browser

PNG, JPG, SVG, GIF, WebP 100% lokal im Browser ZIP-Download

Ausgangsbild

Lade ein Bild hoch oder füge es ein

Bild hierher ziehen

oder klicken zum Auswählen

Strg+V zum Einfügen aus der Zwischenablage
PNG, JPG, SVG, GIF, WebP | Empfohlen: quadratisch, mindestens 512×512 px

Aktuelles Bild

Beliebte Emojis

Konfiguration

0% 25% 50%
0% 10% 20%

Wähle die gewünschten Favicon-Größen

Vorschau

Browser-Tab
tooltastic.eu
Lesezeichen
Tooltastic
Example
Site
Home-Screen
Tooltastic
Suchergebnisse

tooltastic.eu

Tooltastic – Free Online Tools

Free online tools for developers and designers...

Download

Lade deine Favicons und den Einbindungscode herunter

Gesendet! Prüfe dein Postfach.

HTML-Code

Füge diesen Code in den -Bereich deiner HTML-Datei ein

Web App Manifest

Favicon-Dateien in den public/-Ordner kopieren, dann in index.html einbinden:

Favicon-Dateien in den app/-Ordner kopieren oder die Metadata API verwenden:

Über den Customizer oder per Code in der functions.php:

So verwendest du deine Favicons

1

ZIP-Datei entpacken

Entpacke die heruntergeladene Datei in das Stammverzeichnis deiner Website.

2

HTML-Code einfügen

Kopiere den HTML-Code oben und füge ihn in den -Bereich jeder Seite ein.

3

Manifest hinzufügen

Kopiere den Manifest-Code in deine site.webmanifest oder manifest.json Datei.

4

Testen

Öffne deine Seite in verschiedenen Browsern und prüfe, ob das Favicon korrekt angezeigt wird.

Enthaltene Dateien

favicon.ico – Klassisches Favicon für alle Browser
favicon-16x16.png – Kleines Favicon
favicon-32x32.png – Standard-Favicon
apple-touch-icon.png – Apple-Geräte
android-chrome-192x192.png – Android Home-Screen
android-chrome-512x512.png – Android Splash-Screen
site.webmanifest – Web-App-Manifest
favicon.svg – Skalierbares Vektor-Favicon
Tutorial
Schritt-für-Schritt-Anleitung
Häufige Fragen
Antworten auf häufige Fragen

Was ist ein Favicon?

Ein Favicon (Kurzform für „Favorites Icon") ist das kleine Symbol, das im Browser-Tab, in den Lesezeichen und in den Google-Suchergebnissen neben dem Seitentitel angezeigt wird. Es ist ein wichtiger Bestandteil der visuellen Identität einer Website.

Warum braucht jede Website ein Favicon?

Favicons verbessern die Wiedererkennung deiner Website, erhöhen das Vertrauen der Nutzer und sorgen für ein professionelles Erscheinungsbild in Browser-Tabs, Lesezeichen und Suchergebnissen.

Wie funktioniert der Favicon Generator?

Lade ein beliebiges Bild hoch (PNG, JPG, SVG, GIF oder WebP), konfiguriere Hintergrundfarbe und Abrundung, sieh dir die Echtzeit-Vorschau an und lade alle Favicon-Dateien als ZIP-Paket herunter – inklusive HTML-Code und Web-App-Manifest.

Unterstützte Favicon-Formate

Der Favicon Generator erstellt Favicons in allen gängigen Formaten: ICO, PNG (16×16 bis 512×512), SVG, Apple Touch Icon, Android Chrome, Web App Manifest und Microsoft Browserconfig.

Kompatibel mit allen gängigen Browsern

Favicons werden von allen modernen Browsern unterstützt. ICO-Dateien sind abwärtskompatibel bis Internet Explorer 5, während SVG-Favicons von Chrome 80+, Firefox 41+, Edge 80+ und Safari 9+ unterstützt werden.

Häufige Fragen zum Favicon Generator

Antworten auf die wichtigsten Fragen rund um Favicons

Ein Favicon (Favorites Icon) ist das kleine Symbol, das im Browser-Tab, in Lesezeichen, in Google-Suchergebnissen und auf dem Smartphone-Home-Screen angezeigt wird. Es hilft Nutzern, deine Website schnell wiederzuerkennen.

Ideal ist ein quadratisches Bild mit mindestens 512×512 Pixeln. Daraus werden alle kleineren Formate generiert. Je größer und schärfer das Original, desto besser das Ergebnis.

PNG mit transparentem Hintergrund ist ideal. SVG funktioniert ebenfalls hervorragend, da es verlustfrei skaliert. JPG ist möglich, unterstützt aber keine Transparenz.

Für eine optimale Abdeckung empfehlen wir mindestens: favicon.ico (für ältere Browser), PNG 32×32 (Standard), Apple Touch Icon 180×180 (für iOS) und PNG 192×192 (für Android). Die weiteren Formate sind optional, sorgen aber für eine perfekte Darstellung überall.

Kopiere den generierten HTML-Code in den <head>-Bereich deiner HTML-Datei. Lade die Favicon-Dateien in das Stammverzeichnis deiner Website hoch. Der Generator erstellt den vollständigen Code mit allen nötigen Link-Tags.

Das Apple Touch Icon wird angezeigt, wenn ein Nutzer deine Website auf dem iPhone oder iPad zum Home-Screen hinzufügt. Es sollte 180×180 Pixel groß sein und wird wie ein App-Symbol dargestellt.

Das Web App Manifest (manifest.json) ist eine JSON-Datei, die Informationen über deine Web-App enthält, einschließlich der Icons für Android-Geräte. Es ist Pflicht für Progressive Web Apps (PWA).

Nein. Die gesamte Verarbeitung findet lokal in deinem Browser statt. Deine Bilder verlassen niemals deinen Computer – es werden keine Daten an Server gesendet.

ICO ist das klassische Favicon-Format und kann mehrere Größen in einer Datei enthalten. PNG ist moderner, bietet bessere Komprimierung und wird von allen modernen Browsern unterstützt. Beide Formate parallel einzusetzen bietet die beste Kompatibilität.

SVG-Favicons skalieren verlustfrei auf jede Größe, unterstützen Dark-Mode-Anpassungen via CSS Media Queries und haben eine sehr kleine Dateigröße. Sie sind die Zukunft der Favicons.

Verwende ein PNG-Bild mit Alphakanal als Ausgangsbild. Der Generator behält die Transparenz bei. Achte darauf, dass dein Motiv auf hellem und dunklem Hintergrund gut erkennbar ist.

Ja. In den Optionen kannst du eine Hintergrundfarbe festlegen oder den Hintergrund transparent lassen. Die gewählte Farbe wird auch im Web App Manifest und in der Browserconfig verwendet.

Die browserconfig.xml ist eine Konfigurationsdatei für Microsoft-Browser und Windows-Kacheln. Sie definiert die Icons und Farben, die auf der Windows-Startseite und im Internet Explorer verwendet werden.

Nach dem Upload zeigt dir die Vorschau, wie dein Favicon im Browser-Tab, in Lesezeichen und auf dem Home-Screen aussieht. Zusätzlich kannst du mit dem Google Favicon Checker testen, wie es in den Suchergebnissen erscheint.

Häufige Ursachen: falscher Dateipfad im HTML-Code, Browser-Cache (versuche Strg+F5), fehlende Dateien im Stammverzeichnis oder falsche MIME-Types auf dem Server. Prüfe die Browser-Konsole auf Fehlermeldungen.

Ja! Das Tool ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Du kannst Bilder direkt aus der Galerie hochladen.

Animierte Favicons (GIF) werden nur von wenigen Browsern unterstützt und sind nicht empfehlenswert. Unser Generator erstellt statische Favicons, die überall funktionieren.

ICO-Dateien sollten unter 100 KB bleiben, PNG-Favicons unter 50 KB. Unser Generator optimiert die Dateigröße automatisch für die bestmögliche Balance zwischen Qualität und Ladezeit.

Mit SVG-Favicons ist das möglich: Über CSS Media Queries im SVG kann das Favicon auf den Darstellungsmodus reagieren. Der Generator unterstützt die Erstellung solcher adaptiven SVG-Favicons.

Ja, der Favicon Generator ist vollständig kostenlos. Es gibt keine versteckten Kosten, keine Wasserzeichen und keine Nutzungsbeschränkungen.

Favicons in allen Formaten erstellen

Der Favicon-Generator erstellt aus einem einzigen Bild alle Symbole, die eine moderne Website braucht: das klassische ICO, PNGs in verschiedenen Größen, das Apple Touch Icon und Icons für Android und Progressive Web Apps. Statt jedes Format einzeln in einem Bildbearbeitungsprogramm zu exportieren, lädst du ein Motiv hoch und erhältst ein komplettes Paket – alles im Browser, ohne Upload.

Typische Anwendungsfälle

  • Neue Website starten: Erzeuge in einem Schritt alle Favicon-Dateien und den passenden HTML-Code für ein frisches Projekt.
  • Marken-Relaunch: Aktualisiere das Browser-Symbol nach einem Logo-Wechsel konsistent über alle Geräte und Plattformen.
  • PWA und Mobile: Liefere hochauflösende Icons für den Homescreen von iOS und Android sowie für das Web-App-Manifest.
  • Symbole für helle und dunkle Tabs: Erstelle Varianten deines Icons, die auf hellen wie dunklen Browser-Tabs gut erkennbar bleiben.

So erstellst du dein Favicon

  1. 1 Lade ein quadratisches Bild – idealerweise mindestens 512 × 512 Pixel – per Drag & Drop hoch.
  2. 2 Das Tool rendert sofort eine Vorschau in den unterschiedlichen Größen.
  3. 3 Lade das fertige Favicon-Paket herunter.
  4. 4 Kopiere die bereitgestellten HTML-Tags in den Head-Bereich deiner Seite.

Worauf es bei Favicons ankommt

Ein gutes Favicon bleibt auch bei 16 Pixeln erkennbar, deshalb funktionieren klare, kontrastreiche Motive am besten. Weil verschiedene Browser und Betriebssysteme unterschiedliche Formate erwarten, deckt das Tool das gesamte Spektrum von ICO bis SVG ab. Die Verarbeitung läuft komplett lokal über die Canvas-Funktionen des Browsers – dein Originalbild wird also nirgendwo hochgeladen. Lege das Favicon zusätzlich im Stammverzeichnis ab, damit auch ältere Browser es zuverlässig finden.

Weitere Tools

Kostenlose Tools, die gut dazu passen – direkt im Browser, ohne Anmeldung.

QR-Code Generator QR-Codes für URLs, WLAN & mehr erstellen OG Meta Generator Open Graph & Twitter Tags erstellen SVG Placeholder Eigene Platzhalterbilder erstellen Mail-Signatur E-Mail-Signaturen gestalten