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.
Inhaltsverzeichnis
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 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:
<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.[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 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.
<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
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[Bearbeiten]
Favicons, die Sie mit apple-touch-icon
referenzieren, werden vom Browser durch abgerundete Ecken, Schattenwurf und Glanz modifiziert.
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon.png">
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[Bearbeiten]
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
<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any">
praktische Vorgehensweise[Bearbeiten]
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[Bearbeiten]
- Self-Forum: Favicons – Icons – Logos (Teil 1: Einführung) von performer
Quellen[Bearbeiten]
- ↑ Wikipedia: Favicon (en)
- ↑ MSDN: Erstellen von benutzerdefinierten Kacheln für IE11-Websites
- ↑ apple: Specifying a Webpage Icon for Web Clip
- ↑ How To Set an Apple Touch Icon for Any Site
favicon.ico
favicon.png
apple-touch-icon.png
mstile-144x144.png
browserconfig.xml
umgeleitet werden.[2]msapplication-TileColor
können Sie die Hintergrundfarbe der Kachel bestimmen.