Favicon / App-Icon einpflegen

Das Favicon ist das kleine Icon, das z.B. im Browser in den Tab-Reitern dargestellt wird:

Es erscheint auch in den Lesezeichen, die sich Ihre Homepagebesucher evtl. setzen. Zum Beispiel wenn sie sich Ihre Homepage im Smartphone auf den Homescreen holen: Dann erscheint Ihre Homepage dort mit einem quadratischen Button wie eine App.

Dieses Favicon oder auch App Icon können Sie nun selbst einpflegen. Am besten nutzen Sie dafür den Bildanteil Ihres Logos.

Denken Sie daran: Das Favicon wird später wirklich winzig dargestellt. Ein kompliziertes oder filigranes Bild ist daher nicht als Favicon geeignet – man würde nicht erkennen, was es darstellt.

1. Öffnen Sie das Logo mit einem Bild-Bearbeitungsprogramm.
2. Nehmen Sie die evtl. vorhandene Schrift aus Ihrem Logo heraus.
3. Machen Sie die Bilddatei idealerweise quadratisch – oder schneiden Sie das Bild so heraus, dass eine genügende Menge Weißraum drum herum vorhanden ist, aus dem Sie dann später das quadratische Favicon ausschneiden können.
4. Der Hintergrund des Bildes ist idealerweise weiß.
5. Speichern Sie die Bilddatei z.B. als .jpg ab.

… und hochladen

6. Gehen Sie im Backend zu „Einstellungen“ -> Reiter „Allgemein“ -> Favicon: „Bild hinzufügen“.
7. Wählen Sie das eben erstellte Favicon-Bild aus und laden Sie es hoch.
8. Nicht vergessen: Auf „Aktualisieren“ klicken.

Testen Sie, wie das Favicon wirkt:

Oben im Browser-Tab ist es besonders winzig – aber kann man da noch erkennen, was es ist? Wenn nicht, dann sollten Sie vielleicht das Logobild noch stärker vereinfachen.

Öffnen Sie die Homepage mit Ihrem Smartphone und holen Sie sie sich als App-Lesezeichen auf den Homescreen:

Android/Chrome

• Tippen Sie auf die drei senkrecht untereinander liegenden Punkte, die im Browserfenster ganz oben rechts sind.
• Tippen Sie dann auf „Zum Startbildschirm hinzufügen“.

iOS/Safari

• Tippen Sie ganz unten in der Browserleiste auf das mittig gelegene Icon mit dem Pfeil, der aus einem Quadrat heraus nach oben zeigt.
• Streichen Sie vorsichtig nach oben, um weiter unten „Zum Home-Bildschirm“ mit einem Pluszeichen zu finden. Da klicken Sie drauf.

Sie finden das Lesezeichen nun ganz hinten als letztes hinzugefügt. Sieht es auch hier gut aus? Dann haben Sie alles richtig gemacht!

Tipp

Machen Sie diese Möglichkeit, sich Ihre Homepage sich bequem auf den Homescreen des Smartphones zu holen, überall bekannt.