Favicon

Favicon ist die Kurzform von „favorite icon“. Der Internet Explorer 5 zeigte das Symbol ab 1999 bei den gespeicherten Favoriten an, also bei den Lesezeichen. Die Datei hieß favicon.ico und lag im Hauptverzeichnis der Website. Diese Konvention funktioniert bis heute, auch wenn längst andere Formate dazugekommen sind.

Das Symbol ist winzig, taucht aber an vielen Stellen auf. Wer zehn Tabs offen hat, erkennt deine Seite am Symbol, weil der Titel abgeschnitten ist. Legt jemand deine Seite auf dem Smartphone als Verknüpfung auf den Startbildschirm, wird das Icon dort zum App-Symbol.

In den Suchergebnissen steht es links neben deinem Seitennamen. Fehlt es, setzt Google ein graues Standardsymbol ein. Das wirkt unfertig, gerade wenn die Konkurrenz darüber und darunter ihr Logo zeigt.

• favicon.ico mit 32 × 32 Pixeln für ältere Browser.
• Eine SVG-Datei, die in jeder Größe scharf bleibt und von aktuellen Browsern bevorzugt wird.
• Das apple-touch-icon mit 180 × 180 Pixeln für iPhone und iPad.
• Icons mit 192 × 192 und 512 × 512 Pixeln im Web-App-Manifest für Android.

Google verlangt für die Suchergebnisse ein quadratisches Bild, dessen Seitenlänge ein Vielfaches von 48 Pixeln ist. In WordPress lädst du unter „Website-Icon“ ein Bild mit mindestens 512 × 512 Pixeln hoch, die kleineren Größen erzeugt das System selbst.

Im Quelltext stehen die Dateien als Verweise im Kopfbereich der Seite. Fehlt dieser Verweis, fragt der Browser von sich aus nach favicon.ico im Hauptverzeichnis. Liegt dort keine Datei, landet bei jedem Seitenaufruf ein Fehler 404 im Protokoll des Servers.

Ein komplettes Logo mit Schriftzug wird in dieser Größe zu einem Fleck. Besser funktioniert ein einzelner Buchstabe oder eine Bildmarke mit klaren Flächen und starkem Kontrast. Feine Linien und kleine Schrift verschwinden.

Prüfe das Symbol vor hellem und vor dunklem Hintergrund, denn viele Menschen nutzen den Browser im Dunkelmodus. Ein schwarzes Logo auf transparentem Grund ist dort unsichtbar. Eine SVG-Datei kann für diesen Fall eine eigene Farbvariante mitbringen.

Ein Favicon entsteht aus dem Logo. Brauchst du erst ein Logo, ist es Teil des Logodesigns, bei einem bestehenden Auftritt kommt es aus dem Corporate Design.

Verwandte Begriffe: UI-Design · CMS · Responsive Webdesign