Jonathan T. Neal geht in seinem Blog der Frage nach wie eine Webseite am Besten mit einem Favicon versorgt wird. Hier geht’s zu seinem Artikel ›Understanding the Favicon‹.
Bevor wir uns den technischen Fragen nähern, hier eine kurze Definition des Begriffes ›favicon‹ aus der Wikipedia:
Ein Favicon (kurz für favorite icon, engl. für Favoriten-Symbol) ist ein kleines, 16×16 oder 32×32 Pixel großes Icon, Symbol oder Logo, das unter anderem in der Adresszeile eines Browsers links von der URL angezeigt wird und meist dazu dient, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen.
Quelle: Wikipedia: Favicon
Ursprünglich war das Favicon für die Ausgabe in Browsern vorgesehen, mittlerweile kommt es jedoch auch auf den Startbildschirmen von Smartphones und unter Windows 8 häufig vor, was die Frage nach Größe und Möglichkeiten der Einbindung aufwirft.
Es bietet sich daher an, ein Favicon in unterschiedlichen Größen anzubieten. Mittlerweile halte ich die Verwendung von „klassischen“ Favicons in 32×32 Pixeln und für den Einsatz auf Startbildschirmen 144×144 Pixel oder 241×241 Pixel für sinnvoll. Das wären dann 4 Dateien:
- 32×32 Pixel – png und ico (klassische Favicons)
- 144×144 Pixel – png (transparenter Hintergrund, für Windows 8)
- 241×241 Pixel – png (Apple-Touch-Icon)
Diese Icons sollten laut des eingangs erwähnten Artikels folgendermaßen eingebunden werden:
<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">
Da der IE10 keine Conditional Comments mehr annimmt, sollte zusätzlich zu diesen Angaben ein favicon.ico im Root-Verzeichnis der Webseite liegen. Auf den Startbildschirmen der iOS-Geräte gibt es die Möglichkeit die Icons entweder mit Überlagerungen darstellen zu lassen, oder durch den Zusatz -precomposed unverändert.
Weitere Artikel zum Thema:
- Jonathan T. Neal – Understanding the Favicon.
- Jonathan Snook – Making A Good Favicon
- Jon Hicks – Create the perfect favicon
- Martin Wolf – Apple Touch Icon und Reeder