Metaebene: Früher hieß das Favicon

Touch-Icons auf dem IpadFrüher genügte für Websites das Favicon, eine kleine Grafik, die in Lesezeichenlisten oder Fenstertiteln angezeigt wurde und das Zurechtfinden erleichterte. Heute kann man diese Grafik-Container-Datei aus längst vergangenen Windows-Tagen getrost ignorieren, sie wird durch eine Vielzahl neuer Möglichkeiten abgelöst: Meta-Icons, Apple-Touch-Icons, Windows-Tiles und viele mehr gibt es jetzt.

Das Wichtigste Element im Webdesign ist nun eine PNG-Bitmap-Grafik, die mit rund 200 Pixeln im Quadrat auch auf Retina-Displays oder als größeres Icon schön aussieht (das alte Favicon konnte hier in der Regel nur 32 x 32 Pixel abbilden). Eine genaue Größe muss man nicht einhalten, die Browser skalieren sich die Grafik zurecht. Ein Gleichgewicht zwischen viel Pixelmaterial und wenig Dateigröße ist sinnvoll, außerdem ein Motiv, das auch als MIniaturabbildung noch erkennbar ist.

Um die breite Basis aller halbwegs modernen Browser zu bedienen, genügt aus der Individualisierungsvielfalt eine einzige Grafik, die im Kopfbereich der HTML-Struktur notiert wird – auf zwei Arten, denn im Moment verlangt Apple noch eine Extrawurst. Damit hat man dann aber rund 90 % aller Browser abgedeckt:

	<link rel="apple-touch-icon" href="favicon.png">
	<link rel="icon" href="favicon.png">

Favicons in Tab-LeisteDamit zeigt sich dann das Firmenlogo oder eine andere passende Grafik wie gewohnt in den Bookmarks oder der Tab-Leiste, aber auch auf den Home-Bildschirmen von Apple- oder Android-Geräten und an vielen anderen Stellen in den Betriebssystemen. Das gibts bei uns übrigens ohne Aufpreis dazu – soll ja schön aussehen.