Favicon ›› Definition & Bedeutung › ADVIDERA

Favicon

Das Favicon ist ein sehr kleines Bild oder Logo, welches in der Registerkarte (oder auch Tab) im Browser links neben dem Titel angezeigt wird. Das Symbol im .ico, .png oder .gif Dateiformat ist typischerweise 16×16 oder 32×32 Pixel groß und erscheint auch in der Lesezeichenleiste des Browser. Auf mobilen Endgeräten kann das Favicon als Touch-Icon auf der Startseite der Browser-App oder auf dem Startbildschirm auftauchen.Der Begriff „Favicon“ setzt sich aus den englischen Worten “Favourite” (Liebling) und “Icon” (in der Informatik: kleines Bild oder Piktogramm) zusammen.

Verwendungsbeispiele

Das Favicon kann an vielen Stellen im Netz verwendet werden:

  • In Registerkarten bzw. Tabs von Browsern (z.B Internet Explorer)
  • Als Lesezeichen im Browser
  • In Lesezeichen auf Windows Desktops
  • Als Verknüpfung auf Smartphone Startbildschirmen (Ähnlich wie App Verknüpfungen)
  • Als Kachel im Startmenü von Windows 10 und 8
  • In Linkverzeichnissen
  • In den Suchergebnissen diverser Suchmaschinen

Erstellen eines Favicons

Das Bild eines Favicons kann von einer Vielzahl an Bildbearbeitungsprogrammen erstellt werden. Durch die Hilfe von einem Online Favicon Generator kann dieses Bild dann in das Dateiformat .ico umgewandelt werden und im HTML-Code der Website eingebaut werden. Andere Dateitypen, die beim Favicon verwendet werden können sind .png und .gif. Vorteil dieser Formate ist die simple Einbindung von transparenten (u.A. runden) Icons. Zwar können .ico Icons auch transparent gemacht werden, allerdings bedarf es dazu einen Generator, der den weißen Hintergrund als transparent deklariert.

Die Bilder sollten hierbei quadratisches Format haben und in der kleinsten Größe (16×16 Pixel) noch gut erkennbar sein. Bei der Erstellung des Favicon ist zu berücksichtigen, dass es so einzigartig wie möglich ist und zu der Website und dem Unternehmen und seinen Produkten passt.

Favicon Generator

Einige Bildbearbeitungsprogramme wie Photoshop und Gimp ermöglichen es Webdesignern mit Plug-Ins, das Favicon direkt als .ico Datei abzuspeichern ohne einen Online Generator dafür zu nutzen. Vorteil dabei ist, unabhängig von den Diensten Dritter zu sein. Allerdings müssen verschiedene Größen des Favicons erstellt werden, da Nutzer die Website mobil wie auch auf dem Desktop aufrufen können. Auf mobilen Endgeräten (Apple und Android zugleich) wird eine höhere Auflösung des Favicons benötigt, während im Browser auf dem Desktop die kleine 16×16 Pixel Version ausreicht. Wer die verschieden großen .ico Dateien selber mit Photoshop und Co. erstellt hat potenziell also mehr Arbeitsaufwand.

Favicon Generatoren lassen Webdesigner ihre Bilder hochladen und geben Favicons in allen gängigen Größen für Smartphones und Desktop aus. Dabei werden häufig auch die entsprechenden HTML-Code Zeilen ausgegeben, wodurch einige Arbeitsschritte erspart werden können. Einige Anbieter lassen Webdesignern ihr Favicon noch weiter anpassen, wie zum Beispiel dieser Generator. Die Anwendung dieser online Dienste ist in der Regel kostenfrei.

Größen

Nicht alle Browser nutzen dieselbe Favicon Größe. Besonders die Einbindung auf mobilen Geräten erfordert eine höhere Auflösung. Deswegen ist es empfehlenswert, das Originalbild des Favicons von Anfang an so groß wie möglich oder sogar als Vektor Datei zu erstellen, die sich beliebig groß ohne Qualitätsverluste skalieren lässt. Dieser Größenvergleich der Favicons zwischen Desktop und Smartphone verdeutlichen, warum es wichtig ist, das Favicon so groß wie möglich einzubinden, damit es auf dem Startbildschirm nicht unscharf wird:

favicon-beispiel

 

Gängige Größen – Tabelle

Größe (in Pixel)Bildschirm Einsatzort
16×16Desktopalle gängigen Internetbrowser: Internet Explorer, Google Chrome, Mozilla Firefox, Opera und viele mehr
24×24DesktopInternet Explorer 9 (Windows)
32×32DesktopRetina Displays (Apple)
64×64DesktopSafari Reader
max. 180×180SmartphoneApple: Apple Touch Icons
128 x 128SmartphoneAndroid: Google Play Store
max. 196×196SmartphoneAndroid: Chrome Browser
max. 310×310DesktopWindows Metro Kacheln 8.1

Favicon einbinden

Favicons werden mit Hilfe des Link-Elements im Kopfteil des HTML Dokuments eingebunden. Dabei gibt es zwei Möglichkeiten, um dies umzusetzen:

  • Favicon.ico im Rootverzeichnis: Das Icon wird unter dem fixen Namen “Favicon.ico” im Basisverzeichnis der Domain hochgeladen. Die Linkadresse des Icons wäre also domain.de/favicon.ico. Favicons, die in anderen Verzeichnissen hochgeladen wurden, werden ignoriert. Befindet sich im Code noch kein Verweis auf ein Favicon, so sucht der Browser automatisch die Datei favicon.ico im Rootverzeichnis und gibt ihn als Favicon aus. Von dieser Methode ist allerdings abzuraten, da diese Funktion nicht von allen Browsern unterstützt wird.
  • Einbindung im Head Bereich: Das Favicon wird mit dem link rel Attribut im <head>-Bereich hinterlegt. Der HTML Standard ist die Bezeichnung “icon”, wobei im Internet Explorer “shortcut icon” genutzt wird. Anders als bei der ersten Methode können hier auch andere Formate außer .ico verwendet werden. Wird XHTML verwendet, so muss die Code Zeile mit einem Slash (/) abgeschlossen werden. Beispiel:
 <link rel="icon" type="image/png" href="/themes/23/favicon_123.png" />

Favicons bei WordPress einbinden

Seit der WordPress Version 4.3 können Webseitenbetreiber ihr Icon im Theme-Customizer hochladen. Dazu muss in der Option “Website-Informationen” die Bilddatei in 512×512 Pixel hochgeladen werden. Durch diese hohe Auflösung garantiert WordPress, dass das Icon auf jeder Benutzeroberfläche deutlich und in hoher Qualität ausgegeben wird. Hier kann man ein transparentes Icon auch als .png oder .gif hochladen.

Das Icon kann allerdings auch im Backend hochgeladen und dort eingebaut werden. Die offizielle und ausführliche Anleitung von WordPress befindet sich hier.

Zusammenhang zum Corporate Design und SEO

Grundsätzlich werden Favicons eingesetzt, um einen hohen Wiedererkennungswert zu schaffen. Damit zählt es zu eines der vielen Aufgabenbereiche im Corporate Design. Nutzer erkennen Webseiten, Unternehmen und Marken besser, wenn Favicons benutzt werden und können sich so schneller an eine Website bzw. an deren Content binden. Weiterhin vertrauen Nutzern einer Website eher, wenn sie zum Beispiel ein Logo als Favicon aufzeigt. Dies wirkt sich positiv auf Usability und auf das Google Ranking aus, dessen Auswertung sich aus vielen Qualitätskriterien zusammensetzt.

Ihr Weg zu mehr Besuchern und Umsatz