Tutorial
Schritt für Schritt: Favicons für alle Plattformen erstellen
In diesem Tutorial lernst du, wie du mit dem Favicon Generator professionelle Favicons für deine Website erstellst – optimiert für alle Browser und Geräte.
Bild hochladen
Ziehe dein Logo oder Bild per Drag & Drop in den Upload-Bereich. Verwende idealerweise ein quadratisches Bild mit mindestens 512×512 Pixeln. PNG mit transparentem Hintergrund funktioniert am besten.
Formate auswählen
Wähle die Favicon-Formate, die du benötigst. Für eine vollständige Abdeckung empfehlen wir: ICO, PNG 16×16, PNG 32×32, Apple Touch Icon (180×180) und Android Chrome (192×192 und 512×512).
Optionen anpassen
Passe bei Bedarf die Hintergrundfarbe, den Abstand und die Abrundung an. Die Vorschau zeigt dir sofort, wie dein Favicon in verschiedenen Kontexten aussehen wird.
Favicons generieren und herunterladen
Klicke auf "Favicons generieren" und lade die fertigen Dateien als ZIP-Paket herunter. Der generierte HTML-Code kann direkt in den <head>-Bereich deiner Website kopiert werden.
Tipps & Best Practices
- • Verwende ein einfaches, klares Motiv. Favicons sind sehr klein – Details gehen bei 16×16 Pixeln verloren.
- • Teste dein Favicon auf hellem und dunklem Hintergrund. Viele Browser verwenden Dark Mode.
- • SVG-Favicons sind zukunftssicher und skalieren verlustfrei. Moderne Browser unterstützen sie bereits.
- • Vergiss nicht das Apple Touch Icon – es wird auf dem iPhone Home-Screen als App-Symbol angezeigt.
- • Das Web App Manifest (manifest.json) ist wichtig für Progressive Web Apps und Android-Geräte.