Design
Favicon Generator
Erstelle das komplette Favicon-Paket aus einem Bild, Buchstaben oder Emoji: favicon.ico, SVG, PNGs, Apple Touch Icon, Android- und Maskable-Icons, Web-App-Manifest und den passenden HTML-Code – als ZIP, ohne Upload.
- Läuft komplett in deinem Browser
- Keine Datenübertragung
- Ohne Anmeldung
- Kostenlos
Vorlage
Hintergrund & Form
Apple-Touch- und Maskable-Icon bekommen immer einen deckenden, eckigen Hintergrund – iOS und Android runden die Ecken selbst ab.
Angaben für das Web-App-Manifest
Vorschau
Erzeuge …Dateien
In den <head> einfügen
Anleitung
So funktioniert’s
- Vorlage wählen
Entweder Buchstaben oder ein Emoji eingeben – oder ein eigenes Bild bzw. Logo hochladen, am besten quadratisch und mindestens 512 × 512 Pixel groß, ideal als SVG.
- Gestalten
Hintergrundfarbe, Form (Quadrat, abgerundet, Kreis) und Abstand einstellen. Die Vorschau zeigt sofort, wie das Icon im Browser-Tab und auf dem Handy aussieht.
- Herunterladen
Mit „Alle als ZIP“ bekommst du sämtliche Dateien auf einmal. Lade sie in den Hauptordner deiner Website (oder den angegebenen Ordner) hoch.
- Einbinden
Den HTML-Code rechts in den <head> jeder Seite einfügen. Danach kann es etwas dauern, bis Browser das neue Favicon zeigen – sie speichern alte Icons lange zwischen.
FAQ
Häufige Fragen
Welche Favicon-Dateien brauche ich wirklich?
Heute reichen wenige: favicon.ico für ältere Browser und Programme, favicon.svg für moderne Browser, apple-touch-icon.png (180 px) für iPhone und iPad sowie zwei Android-Icons (192 und 512 px) im Web-App-Manifest. Genau dieses Paket erzeugt das Tool.
Was ist ein Maskable Icon?
Android schneidet App-Icons je nach Hersteller rund, eckig oder in Tropfenform zu. Ein Maskable Icon hat deshalb einen vollflächigen Hintergrund und hält den Inhalt in der mittleren Schutzzone (80 %), damit beim Zuschneiden nichts Wichtiges verloren geht.
Warum ist das Apple Touch Icon nicht transparent?
iOS füllt transparente Bereiche schwarz und rundet die Ecken selbst ab. Deshalb bekommt dieses Icon immer einen deckenden, eckigen Hintergrund in der gewählten Farbe.
Warum sehe ich noch das alte Favicon?
Browser speichern Favicons hartnäckig. Hilfreich sind ein harter Reload (Strg+F5), ein neuer Tab oder ein Versionsanhang wie favicon.ico?v=2 im HTML-Code.
Kann ich mein Logo verwenden?
Ja – am besten als SVG. Detailreiche Logos sind in 16 × 16 Pixeln aber kaum zu erkennen. Oft wirkt nur das Bildzeichen oder der Anfangsbuchstabe besser als das ganze Logo mit Schriftzug.
Werden meine Bilder hochgeladen?
Nein. Alles – auch das Erstellen der ZIP-Datei – passiert in deinem Browser.