Favicon

Die Kirsche auf der Sahnetorte ist das "Favicon", es hat nichts mit CSS zu tun, aber trotzdem sollte es nicht vergessen werden.

Es ist in der einfachen Version eine kleine "16 x 16px" große Grafik. Die Datei wird als "favicon.ico" in demselben Verzeichnis abgespeichert, wo auch die "index.html" abgelegt wurde. Im <head>-Bereich der HTML-Datei wird auf das Existieren des "Favicons" hingewiesen.

Auf Favicon verweisen


<link href="favicon.ico" rel="icon">

Der Internetexplorer versteht in manchen Versionen das mit dem "icon" nicht richtig und benötigt daher die Angabe: "shortcut icon". Und schon haben wir ein "Favicon" in der Registrierkarte des Browsers zu sitzen. Um ein "Favicon" für alle Geräte wie Tablets oder die unterschiedlichen Smartphones bereitzustellen, sollten auch verschieden "Favicons" bereitgestellt werden. Die zur Zeit gängigsten "Favicontypen" werden wie folgt bezeichnet:

Favicons für verschiedene Endgeräte

android-icon-192x192
apple-icon-57x57.png
apple-icon-60x60.png
apple-icon-72x72.png
apple-icon-76x76.png
apple-icon-114x114.png
apple-icon-120x120.png
apple-icon-144x144.png
apple-icon-152x152.png
apple-icon-180x180.png
favicon.ico
favicon-16x16.png
favicon-32x32.png
favicon-96x96.png
favicon-256x256.png
ms-icon-70x70.png
ms-icon-144x144.png
ms-icon-150x150.png
ms-icon-310x310.png

Mit dieser Auswahl sollten die gängigsten Geräte abgedeckt sein.

Browserpräfix

An dem "Favicon" können wir gut erkennen, dass jeder Browser seine eigenen Ansprüche hat.

Das gilt auch für einige Eigenschaften in CSS. Nicht jeder Browser unterstützt alle Eigenschaften. Gerade der Internetexplorer hing immer der Zeit etwas hinterher, während andere Browser schon etwas weiter sind. Wer aber unbedingt seine neuen CSS-Eigenschaften auch in anderen Browser darstellen möchte, der hat eventuell die Möglichkeit, mit "Browser-Präfix" mehr aus dem Browser herauszuholen. Browser Hersteller implementieren nicht nur die Standardmäßigen CSS-Eigenschaften sondern für eigene Entwicklungszwecke auch weitere Eigenschaften, die mit "Browser-Präfix" genutzt werden können. Bevor "Flexbox" mit "display: flex;" einfach laufen konnte, wurde die Technologie vorher mit diesem "Browserpräfix" ausgeführt:

Ex Browserpräfix für Flexbox


#Box {
 display: flex;
 display: -webkit-box; /*Beispiel für Chrome*/
 display: -ms-flexbox; /*Beispiel für IE10*/
}

Irgendwann, so hofft man, wird auch der letzte Browser die Eigenschaften als Standard ausführen können und dann kann der "Browserpräfix" aus dem Code entfernt werden. Das "Browser-Präfix" wird in verschiedenen Browsern auch unterschiedlich aufgerufen:

Präfix	Browser
-moz-	Firefox
-ms-	Internetexplorer
-o-	Opera alte Versionen
-webkit-	Chrome, Safari, Opera neue Versionen

Um zu prüfen, ob ein Browser eine bestimmte Eigenschaft versteht, kann auf der Seite: https://caniuse.com geprüft werden, welche Features unterstützt werden.

Zurück zur CSS Startseite Weiter mit JavaScript