Grafik/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.

Favicons für Desktop Computer[Bearbeiten]

Das Favicon selbst ist eine kleine Grafik, die im Windows-Icon-Format (Dateien *.ico) vorliegen und eine Größe von entweder 32x32 oder von 16x16 Pixeln haben sollte. Um solche Grafiken zu erstellen, benötigen Sie ein Grafikprogramm, 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 Domäne liegt.

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

Beispiel: 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-Typ 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.[1]

Favicons für mobile Geräte[Bearbeiten]

Mobile Geräte benutzen ebenfalls eine Art Favicon, um touch-Icons für die Startseite zu erstellen. Hier sind 32x32px aber zu klein. 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.
Beispiel: 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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
  • 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.
  • favicon.png
    • Auflösung von 32x32px (größere Bilder sind möglich, werden aber nicht besser dargestellt)
  • favicon.ico
    • muss im Rootverzeichnis liegen (Konvention von IE)
  • 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.
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.

apple-touch-icon-precomposed[Bearbeiten]

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

Beispiel: 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.

Quellen[Bearbeiten]

  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

Weblinks[Bearbeiten]