Grafik/Favicon

Ein Favicon ist ein kleines Extra-Feature, das beim Anzeigen der Seite(n) in der Adresszeile des Browsers erscheint und dann im Menü der Favoriten dem Eintrag vorangestellt wird. Auf mobilen Seiten werden Favicons für größere Touch-Icons auf dem Startbildschirm oder auf der Startseite des Browsers dargestellt.

Webseiten mit Favicons haben einen höheren Wiedererkennungswert, da Bilder vom Gehirn auch schneller/besser wahrgenommen werden. Wenn ein Besucher beispielsweise ein Lesezeichen der Seite anlegt, findet er die Website über das Favicon in der Lesezeichenliste schneller wieder.

Empfehlung: Verwenden Sie Favicons, da Browser sowieso nach ihnen suchen und ein Fehler zu längeren Seitenladezeiten und 404-Fehlermeldungen führen kann.

Favicons für Desktop-Computer

Das Favicon selbst ist eine kleine Grafik, die im Windows-Icon-Format (Dateien *.ico) vorliegen und eine Größe von entweder 16x16, 32x32 oder von 48x48 Pixeln haben sollte. Um solche Grafiken zu erstellen, benötigen Sie ein Grafikprogramm oder Online-Tool, das Grafiken im ICO-Format abspeichern kann.

Die Verknüpfung zwischen einer Webseite und einem Favicon kann auf zwei Weisen hergestellt werden. Automatisch erkannt wird das Favicon, wenn es unter dem festen Dateinamen favicon.ico im Wurzelverzeichnis einer Domain liegt.

Wenn Sie das Favicon anders nennen oder speichern möchten, können Sie im head-Bereich einer Datei folgendes notieren:

Einbinden eines favicon im head

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Für Angaben im Attribut href gelten die Regeln zum Referenzieren in HTML, der MIME-Type lautet image/x-icon oder (weniger verbreitet) image/vnd.microsoft.icon. Liegt das Favicon im Wurzelverzeichnis, ist es wie oben angeführt via /favicon.ico zu referenzieren. Der Name der Icon-Datei ist in diesem Fall egal, nur die Dateiendung muss für den Internet Explorer .ico lauten (erst IE 11 akzeptiert auch .gif und .png!). Andere Browser akzeptieren auch davon abweichende Grafikformate.

Favicons für mobile Geräte

Mobile Geräte benutzen ebenfalls eine Art Favicon, um touch-Icons für die Startseite zu erstellen. Hier sind 32x32px oder 48x48px aber zu klein, sodass größere png-Grafiken verwendet werden.

• 
• 
• 
• 
• 

Details: caniuse.com

Deshalb benötigt man für die verschiedenen Systeme vier verschiedene Icons:

• favicon.ico, für ältere Browser (IE 6-9, ...)
• favicon.png, für moderne Desktop Browser
• ein Apple Touch icon für mobile Browser auf iOS Safari, aber auch Android Chrome und andere
• eine Icon-Kachel für IE auf Windows 8 und 10.

Erstellen von Favicons für mobile Geräte

<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/favicon.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

• favicon.ico
  • muss im Rootverzeichnis liegen (Konvention von IE)
• favicon.png
  • Auflösung von 32x32px
  • größere Auflösung für Android
• apple-touch-icon.png
  • muss im Rootverzeichnis liegen, sonst gibt es eine 404-Fehlermeldung
  • Auflösung von 180x180px, die höchste unterstützte Auflösung von iOS (iOS 8 auf iPhone 6+ und Retina iPad). Ältere Browser werden das Bild herunterskalieren.
• mstile-144x144.png
  • sollte im Rootverzeichnis liegen, kann aber durch eine browserconfig.xml umgeleitet werden.
  • Durch Angabe eines Werts für msapplication-TileColor können Sie die Hintergrundfarbe der Kachel bestimmen.

Beachten Sie: Wie bereits oben erwähnt, sind die obersten beiden Link-Elemente auf favicon.ico und favicon.png nicht nötig, wenn die Favicons im Rootverzeichnis liegen. Die Datei favicon.ico muss aber vorhanden sein!
Apple-Geräte benötigen auch keine Referenzierung im HTML, wenn der Favicon mit dem richtigen Dateinamen im Rootverzeichnis liegt; allerdings ist diese Zeile für Android-Geräte nötig.
Angesichts der geringen Verbreitung von mobilen Windows-Geräten muss jeder selbst entscheiden, ob eigene Favicons (und deren Einbindung) nötig sind.

apple-touch-icon-precomposed

Favicons, die Sie mit apple-touch-icon referenzieren, werden vom Browser durch abgerundete Ecken, Schattenwurf und Glanz modifiziert.

Referenzieren von Favicons, die nicht verändert werden sollen

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon.png">

Alternativ können Sie durch Angabe von apple-touch-icon-precomposed den Browser anweisen, das Favicon unverändert anzuzeigen.

Empfehlung: Probieren Sie aus, wie Ihre Icons mit den browsereigenen Veränderungen aussehen. (Dabei müssen Sie während der Entwicklung immer den Browser-Cache leeren, um den aktuellen Stand angezeigt zu bekommen.) Wenn Ihnen die Modifikationen nicht gefallen, verwenden Sie apple-touch-icon-precomposed!

Seit iOS7 werden Touch-Icons aber nicht mehr durch Browser verändert, sodass der Bedarf hierfür eigentlich entfällt.

SVG-Favicons

Eine gute und zukunftsssichere Alternative zu den png-Grafiken ist eine SVG-Grafik, die sich stufenlos skalieren lässt und dabei immer scharf und gut aussieht.

• 
• 
• 
• 
• 

Details: caniuse.com

Referenzieren eines SVG-Favicons

<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">

praktische Vorgehensweise

Die hier vorgestellten Auflösungen ändern sich gefühlt mit jeder neuen Generation von mobilen Geräten. Anstatt eine Vielzahl von verschiedenen Formaten zu erstellen und einzubinden, lohnt sich ein Test welche Formate für welche Systeme überhaupt benötigt werden:

• Favicon Generator. For real.
  • überprüft vorhandene Favicons
  • erstellt verschiedene Grafiken in allen benötigten Größen und Grafikformaten

Siehe auch

• Self-Forum: Favicons – Icons – Logos (Teil 1: Einführung) von performer

Quellen

Weblinks

• github: Favicon Cheat Sheet
• realfavicongenerator
• simpli: Here's Everything You Need to Know About Favicons in 2017
• css-tricks: Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?