Warum Ihre Website ein Favicon braucht
Ein Favicon ist das kleine Symbol im Browser-Tab, in Lesezeichen, in manchen Suchvorschauen und gelegentlich auf dem Startbildschirm eines Smartphones. Es ist klein, hilft Besuchern aber, Ihre Website schnell wiederzuerkennen.
Der einfachste Weg beginnt mit einem sauberen Bild und einem Favicon-Generator. Das Werkzeug erstellt aus einer Quelldatei die ueblichen Icon-Groessen fuer moderne Websites.
Mit dem richtigen Bild starten
Verwenden Sie moeglichst ein quadratisches Bild. Ein Symbol, ein Logo-Zeichen, ein Buchstabe oder eine einfache App-Icon-Form funktioniert besser als ein langer detailreicher Schriftzug. Bei 16×16 oder 32×32 Pixeln verschwinden feine Details schnell.
Pruefen Sie vor dem Erzeugen:
- Das Motiv bleibt in kleiner Groesse erkennbar.
- Der Kontrast ist ausreichend.
- Das Icon haengt nicht von winzigem Text ab.
- Die Hauptform sitzt mittig.
- Das Bild ist vor dem Skalieren nicht unscharf.
Wenn das Bild Zuschnitt oder Bearbeitung braucht, nutzen Sie zuerst den Bildeditor und erzeugen danach das Favicon aus der fertigen quadratischen Datei.
Standardgroessen erzeugen
Oeffnen Sie den Favicon-Generator, laden Sie das Bild hoch und erstellen Sie das Icon-Paket. Ein gutes Paket enthaelt mehrere Groessen, weil Browser und Geraete unterschiedliche Dateien nutzen.
Kleine Icons erscheinen in Browser-Tabs. Groessere Icons sind fuer Verknuepfungen, hochaufloesende Displays und app-aehnliche Darstellungen nuetzlich.
HTML-Code einfuegen
Kopieren Sie nach dem Erzeugen den HTML-Link-Code in den head-Bereich Ihrer Website. So wissen Browser, welche Icon-Dateien verwendet werden sollen.
Wenn Ihre Website ein gemeinsames Layout nutzt, fuegen Sie den Code dort ein, damit alle Seiten dasselbe Favicon verwenden. Nach dem Veroeffentlichen kann ein harter Refresh oder ein privates Fenster helfen, falls der Browser noch das alte Icon zwischenspeichert.
Haeufige Fehler
Der haeufigste Fehler ist ein zu breites Logo. Im Seitenkopf sieht es gut aus, als kleines Tab-Icon wird es unlesbar. Nutzen Sie eine vereinfachte Marke.
Ein weiterer Fehler ist zu wenig Kontrast. Ein dunkles Symbol auf dunklem oder transparentem Hintergrund kann in manchen Browser-Themes verschwinden.
Aendern Sie das Favicon ausserdem nicht staendig. Es ist ein Teil der visuellen Wiedererkennung Ihrer Website.
Abschlusscheck
Pruefen Sie, ob das Icon in kleinen Groessen klar bleibt, die Dateien am richtigen Ort liegen und der HTML-Code auf der Website eingebunden ist.
Fuer einen schnellen Ablauf: quadratisches Bild vorbereiten, den Favicon-Generator oeffnen, Standardgroessen erzeugen und den Code in Ihre Website einfuegen.