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.
Abbildung 1: Favicon im Chrome Browser
Favicon in einem Video erklärt
In diesem Video erklären wir den Begriff „Favicon“
Infografik zum Begriff Favicon
Infografik zum Begriff „Favicon“
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