Was ist ein Favicon und wie binde ich es in WordPress ein?

Was ist ein Favicon?

Das Favicon („Favorite Icon“) ist meistens eine vereinfachte Form eines Logos, welches im Browser-Tab links neben dem Titel einer Webseite angezeigt wird. Auch beim HinzufĂŒgen einer Webseite als Lesezeichen wird das Favicon dem Eintrag vorangestellt.

Wozu braucht man ein Favicon?

Das Favicon dient dem Wiedererkennungswert einer Webseite. Vor allem, wenn ein Nutzer mehrere Webseiten in einem Browser gleichzeitig geöffnet hat, bietet das Favicon eine gute Orientierungshilfe. Durch die visuelle NĂ€he des Favicons zum Firmenlogo, kann ein User direkt erschließen, welche Webseite sich innerhalb eines Tabs befindet, ohne diesen erst anklicken zu mĂŒssen. Damit kann sich die Verwendung eines Favicons auch positiv auf die Nutzerfreundlichkeit und User Experience einer Webseite auswirken. Zudem vertrauen Nutzer unbewusst einer InternetprĂ€senz mehr, wenn diese ĂŒber ein Favicon verfĂŒgt.

Geschichte und Entwicklung des Favicons

Der Internet Explorer 5 der Firma Microsoft ermöglichte 1999 zum ersten Mal die Darstellung eines Favicons. Daher stammt auch die Bezeichnung Favicon, welches ein Kunstwort des Begriffs „Favorite Icon“ ist. Denn die Lesezeichenliste des damaligen Internet Explorers wurde schlicht „Favoriten“ genannt.

Mit der ebenfalls 1999 veröffentlichten Version HTML 4.01, sowie kurz darauf im Jahr 2000 mit XHTML 1.0, wurden Favicons vom World Wide Web Consortium (W3C) erstmals standardisiert.

Heute wird die Darstellung eines Favicons von allen gĂ€ngigen Webbrowsern unterstĂŒtzt. Damals wie heute sucht der Browser beim Aufruf einer Webseite dabei automatisch nach einer Datei namens „favicon.ico“ im Wurzelverzeichnis der Seite. Existiert die Datei, wird sie als Favicon hinterlegt und hauptsĂ€chlich fĂŒr die Darstellung in Browsertabs und Lesezeichenlisten verwendet.

Wie groß sollte ein Favicon sein?

In den AnfĂ€ngen des Internets wurde ein Favicon nur fĂŒr die Ausgabe in Browsern auf Desktop-Bildschirmen angelegt. Eine GrĂ¶ĂŸe von 16 x 16 Pixeln galt damit lange Zeit als Standard.

Über die Jahre kamen jedoch immer mehr neue Browser und EndgerĂ€te dazu, sodass sich auch die Anforderungen an ein Favicon Ă€nderten. So kann die erforderliche Favicon GrĂ¶ĂŸe je nach Browser variieren. Auf mobilen EndgerĂ€ten wie Smartphones wird dabei eine höhere Auflösung benötigt, als auf Desktop-PCs, damit das Favicon auch auf dem deutlich kleineren Bildschirm noch gut zu erkennen ist.

Folgende Tabelle gibt einen Überblick ĂŒber aktuell genutzte Favicon GrĂ¶ĂŸen:

favicon einbinden

Welches Dateiformat sollte ein Favicon haben?

Das Standardformat eines Favicons ist nach wie vor das .ico-Format. Zwar sind die meisten Browser inzwischen in der Lage, Favicons mit den Dateiendungen .png, .gif, jpg und teilweise auch .svg problemlos darzustellen, dennoch gibt es auch heute noch Plattformen, die Favicons nur im .ico-Format erkennen. Dazu zÀhlt beispielsweise der Internet Explorer in den Versionen 5-10, aber auch in sozialen Netzwerken wird das Favicon neben einer Verlinkung der Website nur angezeigt, wenn dieses im .ico-Format vorliegt.

Um auf Nummer sicherzugehen, dass das Favicon ĂŒber alle Plattformen hinweg problemlos genutzt werden kann, sollte dieses also stets als .ico-Datei abgespeichert werden.

Das Format ico ist dabei eine Art Container, in welchem Bilddateien unterschiedlicher Auflösungen abgelegt werden können. Je nachdem, welche Auflösung gerade von der Anwendung benötigt wird, wird dann das jeweilige Bild in der richtigen GrĂ¶ĂŸe aus dem Container abgerufen.

In der Regel enthĂ€lt der Container dabei das Favicon in den GrĂ¶ĂŸen 16×16 Pixel, 32×32 Pixel, 48×48 Pixel und 64×64 Pixel.

Wie erstelle ich ein Favicon?

Am idealsten ist es, wenn du dein originales Firmenlogo als Favicon einsetzen können. Da Favicons jedoch sehr klein und zudem quadratisch sind, sieht das nicht immer optimal aus. Besteht dein Logo beispielsweise sowohl aus einem Symbol, als auch aus einem Schriftzug, dann empfiehlt es sich, einfach das alleinstehende Symbol als Favicon zu verwenden. In jedem Fall sollte deine Marke beim Anblick des Favicons eindeutig erkennbar sein, weswegen zumindest die Firmenfarben und am besten auch die Initialen darin enthalten sein sollten.

Da du mit den meisten Grafik- bzw. Bildbearbeitungsprogrammen Dateien nicht im erforderlichen .ico-Format abspeichern kannst, kannst du das Favicon zunĂ€chst normal als .png oder .jpg-Datei speichern. Dabei sollte die Auflösung des Favicons von Anfang an so groß wie möglich sein oder bestenfalls als Vektordatei erstellt werden, die sich beliebig groß ohne QualitĂ€tsverlust skalieren lĂ€sst.

Es existieren unzĂ€hlige kostenlose Favicon Generatoren, mit welchen du deine Datei anschließend in das .ico-Format umwandeln kannst. Einige empfehlenswerte Favicon Generatoren sind:

Wie binde ich ein Favicon in meine WordPress-Webseite ein?

Ab WordPress 4.3 können Webmaster ein Favicon bequem ĂŒber den Customizer einbinden.

Klicke hierzu im WordPress-Dashboard auf den MenĂŒpunkt „Design“ und dann auf „Customizer“. Hier klickst du dann auf den Reiter „Website-Informationen“. Ganz unten hast du dann die Möglichkeit, dein Favicon hochzuladen:

Das war es auch schon!

Enquire now

Give us a call or fill in the form below and we will contact you. We endeavor to answer all inquiries within 24 hours on business days.