Sinn und Zweck
Das Favicon ist ein kleines Symbol, in der Regel das Logo der Firma oder Website, welches in gängigen Browsern neben dem Seitentitel in der Adressleiste angezeigt wird. Ebenfalls wird dieses beim Erstellen einer Verlinkung auf dem Desktop, bei mobilen Geräten auf dem Home Screen als Icon, sowie beim Speichern der Website in den Lesezeichen verwendet. Es schafft beim Besucher einen Wiedererkennungswert und hinterlässt zudem einen professionellen Eindruck.
Wie es bisher war
Zu Urzeiten handelte es sich bei dem Favicon um ein Bild, welches jeweils unter https://ihrewebsite.ch/favicon.ico abgelegt wurde. Der Browser prüft auch ohne Verlinkung im HTML-Code, ob sich dort ein entsprechendes Bild befindet, welches er verwenden kann. Auch heute ist es noch immer sinnvoll, unter diesem Pfad ein derartiges bereitzustellen, da z.B. RSS-Reader oder andere meist einfache Tools nur diesen Pfad prüfen und keine anderweitigen Definitionen im Code.
Das dort verwendete .ICO-Format kann mehrere Bilder in verschiedenen Auflösungen enthalten. In der Regel genügt eine 32x32 Pixel Variante, in einigen Fällen, wenn es sich beispielsweise schlecht verkleinern lässt und zur Unschärfe neigt, empfiehlt es sich auch eine saubere 16x16 Version zu hinterlegen.
Die moderne Version
Da die Bildschirmauflösungen immer grösser werden, steigen auch die Anforderungen diesbezüglich an das Favicon. Es besteht daher bei modernen Browsern die Möglichkeit, auch Bilder im PNG-Format oder im besten Fall sogar als SVG zu verwenden. Diese müssen auch nicht mehr im Hauptverzeichnis liegen, sondern können sauber z.B. in einem Ressourcenordner abgelegt und dann verlinkt werden.
Hier folgen einige Beispiele, wie Sie diese verlinken können. Auch das gleichzeitige Hinterlegen mehrerer Grössen und Formate ist möglich:
- <link rel="icon" href="/favicon.ico" sizes="any">
- <link rel="icon" href="/favicon.png" type="image/png" sizes="32x32">
- <link rel="icon" href="/favicon.png" type="image/png" sizes="96x96">
- <link rel="icon" href="/icon.svg" type="image/svg+xml">
Progressive Web-App (PWA) manifest
Besteht die Möglichkeit, dass Ihre Website als progressive Web-App (PWA) installiert wird, so wird hierfür ein Web-App manifest benötigt. Dies ist ein JSON-File, welches im HTML-Head verlinkt ist und neben anderen Spezifikationen auch die unterschiedlichen Icons zur Verfügung stellt.
- <link rel="manifest" href="/manifest.webmanifest">
Das verlinkte JSON-File stellt hier optimalerweise mindestens zwei Grössen zur Verfügung. Einmal die Kleine für die Verlinkung ab dem Homescreen und einmal die Grosse für den Ladebildschirm (Splashscreen).
- {
- "icons": [
- { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
- { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
- ]
- }
Apple
Beim Verlinken der Website auf einem Apple Gerät, Beispielsweise für ein iPhone oder iPad, kann ein extra hierfür definiertes Icon hinterlegt werden. Es empfiehlt sich, eine Auflösung von 180x180 zu verwenden. Werden mehrere Auflösungen bereitgestellt (jedes Endgerät bevorzugt hier unterschiedliche Grössen, falls vorhanden), so können diese mit dem Attribut "sizes" unterteilt werden.
- <link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
Was mache ich jetzt genau?
Für gängige, einfache Webseiten empfehlen wir die folgende Schlichte Variante. Sie besteht aus zwei Icons. Dem regulären favicon.ico welches im Hauptverzeichnis liegt (für veraltete Browser und Sonderlösungen) sowie einem verlinkten Vektorbild (SVG) oder zumindest einem hochauflösenden PNG.
- <link rel="icon" href="/icon.svg" type="image/svg+xml">
Der Aufwand zur Implementierung und dem Unterhalt beschränkt sich so auf ein Minimum, der Eindruck ist aber dennoch professionell und funktioniert auf allen gängigen Plattformen.
Wie erstelle ich ein favicon.ico?
Sollten Sie über kein Grafikprogramm verfügen, um ein .ICO Bild zu erstellen, beziehungsweise über keines um ein vorhandenes Bild oder Logo entsprechend umzuwandeln, existiert eine Vielzahl an Onlinetools hierfür. So können Sie z.B. https://favicon.io/favicon-converter/ oder https://favicomatic.com/ nutzen, um mit nur wenigen Mausklicks ein bestehendes Bild direkt umzuwandeln. Diese Tools erstellen jeweils eine komplette Liste aller gängigen Formate und Auflösungen.
Beachten Sie aber, dass der Platz in der Browserzeile begrenzt ist! Oft macht es Sinn, komplexe Formen oder Firmennamen zu reduzieren, beispielsweise nur auf den Anfangsbuchstaben oder ein einfaches Teilsymbol. Achten Sie zudem darauf, dass das Bild scharf und nicht verwaschen wirkt.
Alle gängigen Browser unterstützen transparente .ICO und .PNG-Bilder. Sie können also beispielsweise Ihr Logo sauber ausgeschnitten publizieren, so dass dies einen möglichst professionellen Eindruck macht und sich nahtlos in die Adresszeile integriert.
Ich habe das Favicon hinterlegt, es wird aber nicht angezeigt?
Damit das Favicon nicht bei jedem Seitenaufruf erneut heruntergeladen wird, legt der Browser dieses in den Cache ab. Wenn Sie nun das Bild in Ihrem Webhosting wechseln, wird diese Änderung unter Umständen bei einem erneuten Seitenaufruf nicht erkannt und das alte Bild bleibt bestehen. Die sicherste Methode ist in diesem Fall, den Browserverlauf zu leeren. Beim anschliessenden Seitenbesuch werden alle Daten inkl. Favicon neu geladen.
Auf unserem Webhosting ist jeweils von Beginn an das Hostfactory-Favicon hinterlegt. Sie können dieses direkt löschen, beziehungsweise mit Ihrem eigenen überschreiben.