Was ist ein Favicon?
Ein Favicon (Favorite Icon) ist das kleine Symbol, das im Browser-Tab neben dem Seitentitel angezeigt wird. Es hilft Nutzern, deine Website zwischen vielen offenen Tabs wiederzuerkennen. Favicons werden auch in Lesezeichen-Listen, im Verlauf und auf dem Startbildschirm von Mobilgeräten angezeigt.
Moderne Websites benötigen Favicons in verschiedenen Größen und Formaten. Das klassische favicon.ico hat 16x16 oder 32x32 Pixel. Für Apple-Geräte wird ein Apple Touch Icon mit 180x180 Pixeln benötigt. Progressive Web Apps (PWAs) verlangen zusätzlich Icons in 192x192 und 512x512 Pixeln.
Formidex generiert aus einem einzigen Bild alle benötigten Favicon-Größen und -Formate. Du lädst dein Logo oder Symbol hoch und erhältst ein vollständiges Set, das du direkt in dein Webprojekt einbinden kannst.
Wie funktioniert die Favicon-Generierung?
Das Tool skaliert dein Ausgangsbild auf alle benötigten Größen: 16x16, 32x32, 48x48 für das klassische ICO-Format, 180x180 für das Apple Touch Icon und 192x192 sowie 512x512 für die PWA-Manifest-Icons. Dabei wird bilineare Interpolation verwendet, um bei der Verkleinerung möglichst viele Details zu erhalten.
Du erhältst die generierten Icons als einzelne Dateien. Das Tool zeigt dir auch die HTML-Tags an, die du in den Head-Bereich deiner Website einfügen musst, damit Browser und Geräte die richtigen Icons finden.
Tipps für beste Ergebnisse
Verwende ein möglichst einfaches Symbol als Ausgangsbild. Bei 16x16 Pixeln sind feine Details nicht erkennbar. Logos mit klaren Formen und wenigen Farben funktionieren am besten. Komplexe Bilder werden bei kleinen Größen zu einem unkenntlichen Matsch.
Lade ein quadratisches Bild hoch oder schneide es vorher zu. Nicht-quadratische Bilder werden gestreckt oder erhalten Ränder, was selten gut aussieht. Ein quadratisches Ausgangsbild liefert die besten Ergebnisse in allen Größen.
Teste das Favicon auf verschiedenen Geräten und in verschiedenen Browsern. Auf dunklen Browser-Themes kann ein dunkles Favicon verschwinden. Erwäge einen hellen Rand oder eine kontrastreiche Farbwahl, die auf hellen und dunklen Hintergründen funktioniert.
Häufige Anwendungsfälle
Website-Branding: Jede professionelle Website braucht ein Favicon. Es ist oft der erste visuelle Eindruck deiner Marke im Browser und ein unverzichtbares Element für die Wiedererkennung in der Tab-Leiste.
Progressive Web Apps: PWAs benötigen Icons in mehreren Größen für die Installation auf dem Startbildschirm. Das Web App Manifest verlangt mindestens ein 192x192- und ein 512x512-Pixel-Icon. Ohne diese Icons funktioniert die Installation nicht korrekt.
Apple Touch Icons: Wenn jemand deine Website auf dem iPhone oder iPad zum Homescreen hinzufügt, wird das Apple Touch Icon angezeigt. Ohne ein 180x180-Pixel-Icon erstellt iOS einen wenig ansehnlichen Screenshot der Seite als Platzhalter.