So funktioniert es
- 1Laden Sie ein Bild (z. B. Ihr Logo) oder geben Sie einen Buchstaben bzw. ein Emoji ein.
- 2Wählen Sie Hintergrundfarbe, Schriftfarbe und abgerundete Ecken.
- 3Laden Sie die Dateien einzeln herunter.
- 4Kopieren Sie den HTML-Code in den <head> Ihrer Website.
Welche Dateien erstellt werden
PNG-Icons in 16, 32 und 48 Pixeln für Browser-Tabs, 180 × 180 als Apple Touch Icon für den iPhone-Homescreen, 192 und 512 Pixel für Android und Progressive Web Apps, eine echte favicon.ico mit mehreren eingebetteten Größen sowie eine site.webmanifest. Dazu erhalten Sie den passenden HTML-Code zum Einbinden.
Tipps für ein gutes Favicon
In 16 × 16 Pixeln ist kein Platz für Details. Verwenden Sie ein vereinfachtes Logo-Element oder einen einzelnen Buchstaben mit kräftigem Kontrast. Ein quadratisches Ausgangsbild mit mindestens 512 Pixeln liefert die besten Ergebnisse.
Favicon und Google
Google zeigt das Favicon in den mobilen und Desktop-Suchergebnissen neben Ihrer Domain an. Ein erkennbares Icon wirkt professionell und kann die Klickrate erhöhen. Das Favicon sollte ein Vielfaches von 48 × 48 Pixeln groß und über die Startseite verlinkt sein.
Häufige Fragen
Wo lade ich das Favicon hoch?
Legen Sie die Dateien ins Stammverzeichnis Ihrer Website und fügen Sie den generierten HTML-Code in den <head> ein. In WordPress können Sie alternativ unter „Design → Customizer → Website-Informationen“ ein Website-Icon hochladen.
Brauche ich noch eine favicon.ico?
Moderne Browser nutzen auch PNG oder SVG, aber viele Programme, Feedreader und ältere Browser fragen weiterhin /favicon.ico ab. Die Datei sollte daher vorhanden sein.
Warum wird mein neues Favicon nicht angezeigt?
Browser speichern Favicons sehr hartnäckig zwischen. Leeren Sie den Cache oder öffnen Sie die Seite in einem privaten Fenster. Google aktualisiert das Favicon in den Suchergebnissen erst nach dem nächsten Crawl.
Mit den Ergebnissen nicht zufrieden?
Sprechen Sie mit Webin Agency über schnelle, SEO-freundliche Websites, E-Commerce und Google-Ads-Betreuung.