Favicon

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
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.

der Klassiker: Favicons im ico-Format

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">

Warum Sie das Favicon heute nicht mehr so verlinken sollen, wird weiter unten erklärt.

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. Die Dateiendung musste früher .ico lauten, mittlerweile sind auch abweichende Grafikformate wie .gif und .png möglich.[1]

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.

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.[2]
    • 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.[3][4]
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 zukunftssichere Alternative zu den png-Grafiken ist eine SVG-Grafik, die sich stufenlos skalieren lässt und dabei immer scharf und gut aussieht.

In Anbetracht der aktuellen Browserunterstützung für das SVG-Favicon ist ein Fallback erforderlich. In diesem Fall wird das PNG-Format verwendet, wenn der Browser SVG nicht als Favicon akzeptiert.

Wenn der User-Agent versucht, ein Icon zu verwenden, aber dieses Icon sich bei näherer Betrachtung als ungeeignet herausstellt (z.B. weil es ein nicht unterstütztes Format verwendet), dann muss der User-Agent das nächstgeeignete Icon versuchen, das durch die Attribute bestimmt wird.
WHATWG: Docs[5]

Der übliche Ansatz für ältere Browser, die weder das PNG-Favicon-Format unterstützen, besteht darin, eine favicon.ico-Datei im Stammverzeichnis zu speichern. Achten Sie darauf, innerhalb des <head>-Abschnitts keinen <link> darauf zu setzen, da dies dazu führt, dass die Browser die favicon.ico als Standard auswählen.

Referenzieren eines SVG-Favicons mit Fallback
<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">
<link rel="icon" href="/favicon.png" type="image/png">
<!-- favicon.ico im Stammverzeichnis, aber nicht verlinkt -->

Nachdem ich dies in allen modernen Browsern getestet habe, ergibt sich die folgende Reihenfolge, in der die Browser mit dem obigen Code nach dem Favicon suchen werden:

  1. SVG (hoffentlich!)
  2. PNG (keine Sorge, das ist auch gut!)
  3. ICO (oh, jetzt geht's wieder los!)
Hauptartikel: Barrierefreie SVGs

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:

Siehe auch

Quellen

  1. Wikipedia: Favicon (en)
  2. MSDN: Erstellen von benutzerdefinierten Kacheln für IE11-Websites
  3. apple: Specifying a Webpage Icon for Web Clip
  4. How To Set an Apple Touch Icon for Any Site
  5. WHATWG:Docs

Weblinks