FavIcon einbinden
Basics
Das kleine Symbol bei der Registerkarte oben im Internet-Browser wird FavIcon genannt.
Mit einem FavIcon ergänzen Sie die Website um ein individuelles Symbol, welches für die User einen grafischen Wiedererkennungswert bietet.
Als FavIcon eignet sich ein Symbol oder das Logo der Website, damit der User in der Tab-Leiste des Internet-Browsers eine visuelle Verbindung zur Website herstellen kann. Dieses FavIcon kann ganz einfach selbst mit einem Bildbearbeitungsprogramm (z. B. Photoshop) erstellt werden.
Dazu das gewünschte Symbol oder Icon im Bildbearbeitungsprogramm öffnen und zuschneiden bzw. auf eine quadratische Bildgröße (Tipp: Arbeitsfläche anpassen) bringen. Das Bild dann auf die gewünschte Größe z. B. (512x512px) verkleinern und als PNG mit transparenten Hintergrund unter dem Namen favicon.png in den Root-Ordner des Webprojekts speichern.
Das FavIcon wird immer im Head der Webseite eingebettet (einfache Einbindung):
Das FavIcon sollte immer im Root-Ordner (Projektordner) des Webprojekts liegen.
Mit dem FavIcon Generator kann ganz einfach ein FavIcon (für unterschiedliche Endgeräte) erstellt werden.
Icons für verschiedene (mobile) Endgeräten
Auch mobile Geräte nutzen FavIcons und zwar dann, wenn der Benutzer eine Direktverlinkung zu der Website, ein sogenanntes Touch-Icon auf dem Home-Screen seines Endgerätes erstellen möchte.
- Für aktuelle Browser sollte das Favicon als PNG (Portable Network Graphic) hinterlegen (favicon.png) werden.
- Ältere Browser benötigen das klassische Favicon als ico-Datei (favicon.ico).
- Mobile Browser auf Basis von Android Chrome und iOS Safari nutzen das Apple Touch-Icon.
- Tipps zur Erstellung eines Apple Touch Icons finden Sie hier.
- Für den Internet-Explorer und Edge solltest du Grafiken für Kacheln (Windows 8 Tiles) bereitstellen.
Apple Touch Icons und Windows Kacheln (Windows 8 Tiles) benötigen Grafiken in größerer Auflösung:
Je nach Gerät und Version werden Icons in den Größen 57×57, 60×60, 72×72, 76×76, 114×114, 120×120, 128×128, 144×144, 152×152px und 228x228px benötigt.
Für Windows 8 Tiles benötigen Sie Grafiken in den Formaten 70×70, 144×144, 150×150, 310×150 und 310×310px.
Praktische Vorgehensweise
Die hier vorgestellten Bildgrößen für das FavIcon ändern sich gefühlt mit jeder neuen Generation von mobilen Geräten. Um einen besseren und aktuellen Überblick zu behalten lohnt sich die Verwendung eines praktischen Online-Tools zur Erstellung von einem FavIcon:
FavIcon Generator. For real.