Favicon

Was ist ein Favicon?

Ein Favicon ist eine Bilddatei meist im .ico Format mit einer Auflösung von 16×16 Pixeln, die dazu dient, in einer Webseite eingebunden zu werden um eine Wiedererkennung beim User zu erzielen. Das Favicon wird in der Browserzeile, beim Abspeichern der Seite innerhalb der Favoriten oder aber auch beim Ablegen der Webseite auf einem Handy Startbildschirm, verwendet. Fav entspricht dem Wort favorite (dt. Favorit) und Icon dem Symbol.

Favicon im Browser
Abbildung 1: Favicon im Chrome Browser

Welche Größen und Bildformate werden genutzt?

Am Beispiel iOS Safari und den eingesetzten Touch Displays, wird beispielsweise eine .png Datei im Format 180 x 180 verwendet. Einbindung wie folgt:

<link rel=“apple-touch-icon“ sizes=“180×180″ href=“/icons/apple-touch-icon.png“>

Für klassische Browser wie Firefox, Chrome, Safari kann es in verschiedenen Formaten als .ico oder .png Datei vorgegeben werden, darunter 16×16, 32×32 oder 48×48. Einbindung wie folgt:

<link rel=“icon“ type=“image/png“ sizes=“32×32″ href=“/icons/favicon-32×32.png“>

<link rel=“icon“ type=“image/png“ sizes=“16×16″ href=“/icons/favicon-16×16.png“>

<link rel=“shortcut icon“ href=“/icons/favicon.ico“>

Größe (in Pixel) Bildschirm Einsatzort
16×16 Desktop Internetbrowser: Internet Explorer, Google Chrome, Mozilla Firefox, Opera uvm
24×24 Desktop Internet Explorer 9 (Windows)
32×32 Desktop Retina Displays (Apple)
64×64 Desktop Safari Reader
max. 180×180 Smartphone Apple: Apple Touch Icons
128 x 128 Smartphone Android: Google Play Store
max. 196×196 Smartphone Android: Chrome Browser
max. 310×310 Desktop Windows Metro Kacheln 8.1

Wie erstellen Sie ein Favicon?

Verwenden Sie beispielsweise Ihr Logo um den Wiedererkennungswert zu steigern. Bilder werden im menschlichen Gehirn schneller und besser wahrgenommen. Mittels einem Favicon Generator (mehr dazu in den weiterführenden Links) lässt sich die kleine Grafik von z.b. 16×16 Pixeln problemlos gestalten und speichern. Die generierte .ico Datei laden Sie dann mittels FTP in das Hauptverzeichnis Ihres Webspace. Durch einen Code Schnippsel im Head Bereich der Website, geben Sie den Pfad des Favicons vor:

Einbindung bei einer WordPress Seite

Öffnen Sie die header.php Datei im Theme Ordner (wp-content/themes/ThemeName/header.php) und fügen Sie folgenden Code in den Head Bereich ein:

[php]

<head>

<link rel=“shortcut icon“ href=“<?php bloginfo(‚url‘); ?>/favicon.ico“ type=“image/x-icon“ />

</head>

[/php]

Einbindung in einem HTML Dokument (statische Seite)

Öffnen Sie die Index.html und fügen Sie folgenden Code in den Head Bereich ein:

[php]

<head>

<link rel=“shortcut icon“ href=“favicon.ico“ />

</head>

[/php]

Vorteile eines Favicon

Da das Favicon einen hohen Wiedererkennungswert hat und in verschiedenen Stellen eingesetzt wird, sollten Sie den geringen Aufwand vollziehen. Beispiele zur Nutzung des Favicon:

  • In der Browserzeile, z.b. Tabs, Registerkarten oder Lesezeichen
  • Als Lesezeichen auf Windows Desktops
  • Als Verknüpfung auf den Smartphone-Bildschirmen
  • Als Kachel im Startmenü unter Windows 8 oder 10
  • In Linkverzeichnissen
  • In den Serps diverser Suchmaschinen

Favicon innerhalb der Suchmaschinenoptimierung

Für die SEO ist die Einbindung des Favicon ein Bestandteil der Optimierung, da der Wiedererkennungswert für den Nutzer eine Rolle spielt und in verschiedenen Plattformen die Einblendung eines Favicon für Aufmerksamkeit sorgt. Weiterhin dient das Favicon zur Markenbildung und der Usability, was von Suchmaschinen letztendlich belohnt wird.

Weiterführende Links

Favicon Generator: https://www.ionos.de/tools/favicon-generator

Formate und Größen von Favicons: https://stackoverflow.com/questions/48956465/favicon-standard-2020-svg-ico-png-and-dimensions