So erstellen Sie ein Favicon
Ein modernes Favicon ist weit mehr als ein 16×16-Bild. Hier finden Sie den kompletten Workflow für ein Setup, das in jedem Browser, Betriebssystem und Gerät scharf aussieht.
Was ist ein Favicon?
Ein Favicon ist das kleine Icon, das der Browser im Tab, in der Lesezeichenleiste und in der Chronik anzeigt. Auf Mobilgeräten dient es als Homescreen-Icon, unter Windows als Verknüpfungssymbol.
Moderne Websites liefern mehrere Auflösungen und Formate aus, damit jede Oberfläche eine scharfe Darstellung erhält.
Quellbild vorbereiten
Starten Sie mit einem quadratischen Bild ab 512×512 px – idealerweise ein SVG mit quadratischer viewBox. Alles Kleinere wird beim Herunterskalieren unscharf.
Vermeiden Sie dünne Linien und kleinen Text – sie verschwinden bei 16×16.
Mehrgrößen-.ico erzeugen
Bündeln Sie 16, 32, 48, 64, 128 und 256 in einer einzigen favicon.ico. Browser wählen automatisch die passende Größe.
Unser Favicon-Generator erledigt das clientseitig in unter einer Sekunde.
HTML-Tags einfügen
Legen Sie favicon.ico im Site-Root ab. Ergänzen Sie dann SVG, apple-touch-icon und Manifest-Icons im <head> für ein vollständiges Setup.
In jedem Browser prüfen
Hard-Reload (Strg+F5) in Chrome, Safari, Firefox und Edge durchführen. Lesezeichenleiste, Tab und eine Homescreen-Installation kontrollieren.