Sie sind hier

» » Das Favicon

Das Favicon

Kleines Bild – große Wirkung.

Was ist ein Favicon?

Das Wort "Favicon" ist eine Kurzform vom englischen "favorite icon" (= Favoriten-Symbol).

Es ist ein kleines Zeichen, Symbol oder Logo, das eine Webseite in einem Browser eindeutig erkennbar macht und zählt mit zu den wichtigen Faktoren bei der Erstellung einer Webseite.

Eni Favicon im Browser

Ein Favicon im Browser

Die im Gegensatz zur eigentlichen Gestaltung einer Webseite eher unauffällig und klein wirkenden Favicons entwickeln ihre Nützlichkeit meist erst in den gespeicherten Lesezeichen.

Die meisten Browser zeigen das Favicon einer Webseite auf der linken Seite der Adresszeile an, neben der URL. Einige Browser können das Favicon auch in der Registerkarte neben dem Seitentitel anzeigen. Favicons werden zusammen mit Lesezeichen oder Favoriten automatisch gespeichert und in den jeweiligen Listen angezeigt.

Favicons gibt es schon seit den frühen 2000er Jahren und werden (theoretisch) von allen gängigen Webbrowsern unterstützt. Verschiedene Browser verwenden jedoch unterschiedliche Dateiformate eines Favicon. Die meisten Browser unterstützen Favicons als GIF-, PNG- oder JPG-Dateien, Internet Explorer zeigt nur Favicons im ICO-Format an.

Alt vs. Neu

Ursprünglich war das Favicon für die Ausgabe in Browsern auf einem herkömmlichen Desktop-PC vorgesehen und hatte bisher immer nur die Größe von 16x16 Pixeln. Mittlerweile kommt es aber auch auf den Startbildschirmen von Smartphones, in mobilen Browsern oder unter Windows 8 zum Einsatz.

Folgende Tabelle zeigt die Darstellung eines Favicons auf unterschiedlichen Betriebssystemen und Browsern. In der Spalte "Alt" sehen Sie Beispiele, in denen wie bisher nur das 16x16 Pixel große Icon eingebunden ist, in der Spalte "Neu" sind dagegen angepasste Icons in mehreren Größen und Bildformaten in die Beispiele eingebunden (welche genau das sind, erfahren Sie im nächsten Kapitel).

Favicon Beispiele Alt vs. Neu

Angepasste Dateiformate und -größen des Favicons

Was können Sie also unternehmen, damit das Favicon Ihrer Webseite immer korrekt angezeigt wird? Am besten erstellen Sie, wie oben schon genannt, an die verschiedenen Anforderungen angepasste Icons in unterschiedlichen Größen und ­Dateiformaten.

Klassisches Favicon für Webbrowser

Die Standardgröße eines Favicon ist 16x16 Pixel im ICO-Dateiformat, auch wenn die meisten Browser Favicons in den Größen 32x32, 48x48 oder 64x64 Pixel erkennen. Favicons, die größer als 16x16 Pixel sind, werden in der Regel vom Browser skaliert, sodass sie korrekt angezeigt werden können. Am einfachsten generieren Sie eine einzige ICO-Datei, in der diese vier Größen auf Ebenen enthalten sind.

16x16 Pixel

16x16 Pixel

32x32 Pixel

32x32 Pixel

48x48 Pixel

48x48 Pixel

64x64 Pixel

64x64 Pixel

Favicon für Apple- und Android-Geräte

Mit Smartphones und Tablets haben die "Apple Touch Icons" in der mobilen ­ ­Datenwelt Einzug gehalten. Diese haben im Wesentlichen den selben Nutzen wie das Favicon in den herkömmlichen Webbrowsern.

Bei den Apple Touch Icons sollten Sie allerdings einige Besonderheiten beachten:

Die unterschiedlichen Auflösungen und Displaygrößen der verschiedenen Geräte erschweren den Einsatz von nur einem einzelnen Icon. Es kann leicht verzerrt oder unscharf wirken, weil die mobilen Browser die Bildgröße herunterrechnen, um das Icon passend zu machen. Um diesem Nachteil entgegen zu wirken, verwenden Sie gezielt maßgeschneiderte Größen und somit mehrere Icons von 57x57 bis 180x180 Pixeln.

57x57 Pixel, für iPhone und iPod ohne Retina-Display und iOS 6

57x57 Pixel, für iPhone und iPod ohne Retina-Display und iOS 6

60x60 Pixel, für iPhone und iPod ohne Retina-Display und iOS 7

60x60 Pixel, für iPhone und iPod ohne Retina-Display und iOS 7

72x72 Pixel, für iPad 1. und 2. Generation mit iOS 6

72x72 Pixel, für iPad 1. und 2. Generation mit iOS 6

76x76 Pixel, für iPad 1. und 2. Generation mit iOS 7+

76x76 Pixel, für iPad 1. und 2. Generation mit iOS 7+

114x114 Pixel, für iPhone mit Retina-Display und iOS 6

114x114 Pixel, für iPhone mit Retina-Display und iOS 6

120x120 Pixel, für iPhone mit Retina-Display und iOS 7+

120x120 Pixel, für iPhone mit Retina-Display und iOS 7+

144x144 Pixel, für iPad mit Retina-Display und iOS 6

144x144 Pixel, für iPad mit Retina-Display und iOS 6

152x152 Pixel, für iPad mit Retina-Display und iOS 7+

152x152 Pixel, für iPad mit Retina-Display und iOS 7+

180x180 Pixel, für iPhone 6+ mit iOS8

180x180 Pixel, für iPhone 6+ mit iOS8

Wenn Sie bei älteren iOS-Versionen (iOS 6 und älter) auf den vom Betriebssystem automatisch hinzugefügten Glanzeffekt verzichten möchten, müssen Sie die Icons mit dem Zusatz „precomposed“ im Dateinamen abspeichern. Dies gilt auch für den Einsatz der Icons in älteren Android-Versionen (älter als Android 2.3). Denn obwohl der Name dieser Icons das Wort „Apple“ enthält, werden sie auch auf Android-Geräten verwendet.

Die Apple Touch Icons werden allerdings auf den Android-Geräten nur noch für kurze Zeit unterstützt, da sie laut Google als "deprecated" (= veraltet) eingestuft werden. Google empfiehlt daher ein neues Android-Icon in der Größe von 192x192 Pixeln.

192x192 Pixel, für Android-Geräte

192x192 Pixel, für Android-Geräte

Sowohl die Apple Touch Icons als auch das Android Icon speichern Sie im PNG-Dateiformat ab.

Favicon für Windows 8

Die Oberflächenstruktur von Windows 8 und den Windows Phones wird aus sogenannten "Tiles" (=Kacheln/Fließen) zusammengesetzt. Um auch hier dem Design angepasste Icons zum Einsatz bringen zu können, erstellen Sie weitere Dateien – die "Windows Tile Icons".

Für den Internet Explorer 10 unter Windows 8 gibt es nur eine Größe für die Kachel – 144x144 Pixel.

Damit sich ein Windows Tile Icon besser in das Design von Windows 8 inte­griert, sollten Sie einfarbige Icons als PNG-Dateien mit transparentem Hintergrund ­erstellen. Die Hintergrundfarbe der Kachel legen Sie dann später beim Einbinden der Icons in die Webseite über die Meta-Angaben im Quellcode fest. In den folgenden Beispielen ist die Hintergrundfarbe bereits eingefügt, da die Icons in weiß auf weißem Hintergrund nicht zu sehen wären.

144x144 Pixel, für Windows 8

144x144 Pixel, für Windows 8

Favicon für Windows 8.1 und Windows 10

Wie schon bei den Apple Touch Icons, stehen Ihnen auch hier für den Internet Explorer 11 unter Windows 8.1 und dem neuen Browser "Edge" unter Windows 10 verschiedene Größen  für die optimale Darstellung von angehefteten oder häufig aufgerufenen Websites auf der Windows Live Oberfläche zur Verfügung.

Es gibt vier verschieden große ­Kacheln:

  1. Klein: "msapplication-square70x70logo"
  2. Mittel: "msapplication-square150x150logo"
  3. Breit: "msapplication-wide310x150logo"
  4. Groß: "msapplication-square310x310logo"

Trotz dieser von Microsoft so vorgegeben Bezeichnungen der Kacheln empfiehlt Microsoft selbst die Verwendung von größeren Icons, um auch Geräte mit höherer Pixeldichte abzudecken. Die empfohlenen Größen sind:

128x128 Pixel, kleine Kachel für Windows 8.1

128x128 Pixel, kleine Kachel

270x270 Pixel, mittlere Kachel für Windows 8.1

270x270 Pixel, mittlere Kachel

558x270 Pixel, breite Kachel für Windows 8.1

558x270 Pixel, breite Kachel

558x558 Pixel, große Kachel für Windows 8.1

558x558 Pixel, große Kachel


Zusätzliche Icons

Um Ihr Icon z.B. auch im Browser Safari auf Mac OS optimal darstellen zu ­können, erstellen Sie weitere PNG-Dateien in folgenden Größen:

16x16 Pixel, für diverse Browser

16x16 Pixel, für diverse Browser

32x32 Pixel, für Safari auf MacOS

32x32 Pixel, für Safari auf MacOS

96x96 Pixel, für GoogleTV

96x96 Pixel, für GoogleTV

Für das neueste Betriebssystem – Mac OS X El Capitan – hat sich Apple eine Neuerung einfallen lassen. Es werden ab jetzt für die gepinnten Seiten (=Favoriten) in Safari favicons, „mask-icon“ genannt, mit einem bisher unbenutzen Dateiformat eingesetzt. Zum ersten Mal in der Geschichte des favicons wird anstatt eines klassischen Pixelbildes ein auf Vektoren basiertes Bildformat verwendet: denn Apple hat sich für das SVG-Format entschieden.

Mehr über die Unterschiede von Pixelbildern und Vektordateien erfahren Sie in unserem ePaper „Pixel oder Vektor – Die Vor- und Nachteile der verschiedenen Dateiformate“.

Das favicon im SVG-Format hat eine bestimmte Anforderung an die Gestaltung: Es muss einfarbig schwarz auf transparentem Hintergrund dargestellt werden. Komplettiert wird das Bild dann in den Meta-Angaben Ihrer Webseite mit einer zusätzlich angegebenen Farbe. Wenn die Registerkarte nicht aktiviert ist, stellt Safari das Symbol in grau dar, wenn die Registerkarte aktiv ist, verwendet Safari die angegebene Farbe.

SVG für Safari pinned tabs in Mac OS X El Capitan

SVG für Safari pinned tabs in Mac OS X El Capitan

 

Gestaltungsraster

Sowohl Apple als auch Google haben Design-Vorgaben veröffentlicht, an die Sie sich beim Gestalten Ihres Favicons halten sollten, damit dieses sich in das Erscheinungsbild der jeweiligen Systeme intergriert. Andererseits dürfen Sie sich vom vorgegebenen Raster auch nicht zu sehr reglementieren lassen, wenn manche Linien nicht genau ausgerichtet werden können.

Gestaltungsraster für Apple Touch Icons

Gestaltungsraster für Apple Touch Icons

Gestaltungsraster für Android Icons

Gestaltungsraster für Android Icons

Beim erstellen der Apple Touch Icons sollten Sie darauf achten, dass Sie die abgerundeten Ecken des Icons nicht selbst anlegen müssen, das übernimmt das ­Betriebssystem auf den Endgeräten für Sie.

Das Favicon in eine Webseite einbinden

Favicon.ico

Der einfachste Weg ein Favicon auf Ihrer Webseite einzubinden ist, die „favicon.ico“-Datei in das Rootverzeichnis der Webseite hochzuladen. Wenn ein Benutzer diese Seite lädt, sucht der Browser eigenständig diese Datei. Sie wird dann automatisch neben der URL oder im Seitentitel angezeigt. Im Quellcode machen Sie keine weiteren Angaben.

Apple Touch Icons

Um das Apple Touch Icon beispielsweise mit der Größe 152x152 Pixeln in Ihre Webseite einzubinden, laden Sie dieses ebenfalls in das Rootverzeichnis Ihrer Webseite hoch und fügen folgenden HTML-Code im Head-Bereich Ihrer Webseite ein:

<link rel="appple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png" />

Mit allen anderen Apple Touch Icons verfahren Sie ebenso, d.h. für jedes Icon, das Sie einbinden, benötigen Sie eine Zeile Code. Hier ist es dann auch von Vorteil, wenn Sie die Abmessungen der verschieden großen Icons in die Dateinamen mit aufnehmen ("apple-touch-icon-152.png" für das 152x152 Pixel große Icon, "apple-touch-icon-144.png" für das 144x144 Pixel große Icon, usw.).

Android Icon

Das Android Icon wird wie folgt eingebunden:

<link rel="icon" type="image/png" href="/android-icon.png" sizes="192x192" />

Windows 8

Für das Windows Tile Icon mit der Größe von 144x144 Pixeln und der Hintergrundfarbe #13a29c geben Sie folgenden Code an:

<meta name="msapplication-TileColor" content="#13a29c" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />

Die Hintergrundfarbe des Icons können Sie frei bzw. passend zur Farbwelt Ihrer Webseite wählen. Sie haben bei den Windows Tile Icons außerdem die Möglichkeit, einen kleinen Text anzugeben, der dann mit angezeigt wird. Lassen Sie ­diese Zeile weg, wird automatisch der Seitentitel und der Untertitel Ihrer Webseite ­eingebunden.

<meta name="application-name" content="Hier steht der Text" />

Windows 8.1 und Windows 10

Ab Windows 8.1 führen Sie die diversen Kacheln nicht mehr im Quellcode der Seite selbst auf, sondern in einer separaten XML-Datei, "browserconfig.xml" genannt, auf die Sie im Quellcode mit folgendem Meta-Tag verweisen:

<meta name="msapplication-config" content="browserconfig.xml" />

Mit dieser XML-Datei  können Sie dann die einzelnen gewünschten Kacheln ­einbinden:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/tiny.png" />
      <square150x150logo src="/medium.png" />
      <wide310x150logo src="/wide.png" />
      <square310x310logo src="/large.png" />
      <TileColor>#13a29c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Zusätzliche Icons

Die weiteren Icons binden Sie wie folgt in den Quellcode ein:

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="mask-icon" href="favicon.svg" color="#13a29c" />

Zusammenfassung

Laden Sie alle erstellten Icons in das Rootverzeichnis Ihrer Webseite hoch. Dann geben Sie im Head-Bereich des Quellcodes den vollständigen HTML-Code für alle Icons zusammen ein:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180.png" />
<link rel="icon" type="image/png" href="/android-icon.png" sizes="192x192" />
<meta name="msapplication-config" content="browserconfig.xml" />
<meta name="application-name" content="Hier steht der Text" />
<meta name="msapplication-TileColor" content="#13a29c" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
<link rel="mask-icon" href="favicon.svg" color="#13a29c" />

Empfehlung für die Praxis

Wenn Sie nicht alle diese Icons erstellen möchten, reichen für die gängigsten Anwendungen auch nur vier Dateien, allerdings kann es dann durchaus vorkommen, dass bei manchen Anwendungen wieder nur ein Standard-Icon eingesetzt wird:

  1. Die Datei "favicon.ico", die die oben beschriebenen vier Größen enthält
  2. Das Apple Touch Icon mit 180 Pixeln als "apple-touch-icon.png"
  3. Das Android Icon mit 192 Pixeln als "android-icon.png"
  4. Die mittlere Kachel mit 270 Pixeln für Windows als "tile-icon.png"

 

Diese Checkliste herunterladen:

  • Die Sammlung mit sämtlichen Icon-Varianten aus dem Beispiel oben können Sie sich hier als .zip-Datei herunterladen