Was ist eigentlich … ein Favicon?

Anzeige Favicon in der AdressleisteEin Favicon (kurz für „favorite icon“) ist ein kleines Symbol, ein Logo oder eine kleine Grafik die – je nach Browser – in der Adressleiste oder im geöffneten Tab einer Website angezeigt wird. Im WordPress ist das zum Beispiel die kleine Kaffeetasse.

Außer das es hübsch aussieht hat so ein kleines Favicon auch einen handfesten Nutzen: Das Symbol wird nämlich nicht nur in der Adresszeile des Browsers angezeigt, sondern zum Beispiel auch wenn man die Seite als Lesezeichen ablegt.

Eine Seite mit einem Favicon taucht also in einer Lesezeichen-Übersicht mit einem individuellen Symbol auf, was einen gewissen Wiedererkennungswert mit sich bringt. Auch wenn im Browser viele Tabs geöffnet sind kann man sich anhand der Favicons viel besser orientieren.

Ein paar Beispiele für die Anzeige von Favicons

Anzeige des Favicon im Firefox

Anzeige des Favicon in Firefox

Anzeige Favicon in Safari

Anzeige Favicon in Safari

Favicon in der Leseliste von Safari

Favicon in der Leseliste von Safari

Favicon in der Leseliste von Safari

Favicon in der Leseliste von Firefox

Wie erstellt man ein Favicon

Ein Favicon ist in der Regel eine 16x16px oder 32x32px große Grafik, die in die Website eingebunden wird. Theoretisch kann man diese Grafik mit jedem Bildbearbeitungsprogramm erstellen und Sie dann als favicon.ico abspeichern.

Wichtig dabei: Das verwendete Bild sollte auch in der Mini-Auflösung von 16x16px noch gut aussehen. Es macht also nicht unbedingt Sinn, das eigene Logo 1:1 als Favicon zu verwenden. Oft ist es besser, nur ein Symbol oder vielleicht einen Buchstaben aus dem Logo auszuwählen.

Um das ein wenig zu veranschaulichen: Das Original-Logo des WordPress Bistros sieht in der winzigen Auflösung von 16x16px nicht gut aus, da es zu stilisiert und nicht gut zu erkennen ist.

Mein Grafiker (Danke, Sebastian 😉 ) kam daher auf die Idee, für das Favicon das Logo so abzuwandeln, das es auch in 16x16px noch als Kaffeetasse erkannt wird.

Wenn Sie mit Bildbearbeitungsprogrammen nicht ganz so vertraut sind, können Sie für die Erstellung eines Favicons auch auf Online-Generatoren zurückgreifen.

Meine Empfehlung: RealFaviconGenerator.net

Anders als die meisten Favicon-Generatoren kann dieser nämlich nicht nur ein einzelnes Bild in ein Favicon umwandeln sondern generiert eine Datei, die das Favicon je nach Plattform (z.B. Desktop, Windows8-Kachel oder Smartphone-Homescreen) unterschiedlich ausgibt, so dass das Favicon immer perfekt angezeigt wird.

Und wie kommt das Favicon in die Website?

Manche WordPress-Themes bieten die Möglichkeit, das Favicon in den Theme-Optionen zu hinterlegen. Dann genügt es, die favicon.ico (möglich wären auch favicon.gif oder favicon.png) einfach in die Mediathek hochzuladen und den Link zum Favicon in den Theme-Options an der entsprechenden Stelle einzutragen.

Keine Sorge, auch wenn Ihr Theme diese Möglichkeit nicht bietet ist es kein Hexenwerk, ein Favicon einzustellen.

Dafür laden Sie die Datei „favicon.ico“ via FTP in das sogenannte „Root“-Verzeichnis Ihrer Website.

Das Root-Verzeichnis ist die oberste Ebene Ihrer WordPress-Installation. In diesem Verzeichnis finden Sie neben den Ordnern wp-admin, wp-content und wp-include unter anderem auch die Datei wp-config.php

Root-Verzeichnis

Wenn die Datei hochgeladen ist müssen Sie noch in die header.php Ihres Themes den folgenden Code eintragen, und zwar zwischen

<head>

und

</head>

HTML-Code für favicon.ico

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

HTML-Code für favicon.gif

<link rel="icon" type="image/gif" href="favicon.gif" />

HTML-Code für favicon.png

<link rel="icon" type="image/png" href="favicon.png" />

Falls Sie nicht wissen, wo Sie die header.php bearbeiten können: Rufen Sie im WordPress-Dashboard den Menüpunkt „Design“ -> „Editor“ auf. Die header.php finden Sie in der Übersicht rechts. Einfach anklicken, dann können Sie die Datei direkt bearbeiten.

Wenn das Favicon in Ihrem Browser nicht direkt angezeigt wird leeren Sie einmal den Cache Ihres Browsers. Manchmal dauert es eine ganze Weile, bis das Favicon dann tatsächlich sichtbar wird.

Fanden Sie diesen Artikel hilfreich? Dann teilen Sie ihn gern auch mit Ihrem Netzwerk 🙂

Bildquelle:
© jamdesign – Fotolia.com

Print Friendly, PDF & Email

Kommentare

Was ist eigentlich … ein Favicon? — 25 Kommentare

  1. Danke, eine wirklich gelungene Anleitung für den Umgang mit Favicons. Ich finde die kleinen „Erkennungsmerkmale“ im Browser sehr wichtig, da ich bei meinen Internetrecherchen zu Blogartikeln immer mit mehreren gleichzeitig geöffneten Tabs arbeite und man so nicht so leicht die Übersicht verliert!.

    • Du hast recht, wenn man viele Tabs geöffnet hält sind Favicons wirklich hilfreich, um den Überblick zu behalten.

      Ich freue mich, dass Dir das Tutorial gefällt 🙂

      Herzliche Grüße
      Michaela

  2. Klasse Anleitung, vielen Dank! Hat echt super funktioniert. Deine Schritt-für-Schritt Anweisungen waren leicht nachvollziehbar, da konnte ja nix schief gehen. Damit konnten wir unsere Seite jetzt auch noch ein bisschen verschönern.

  3. Pingback: Start IHK Webdesigner ab 21.09.2015 | Bertold Seminarblog

  4. Vielen lieben Dank für diesen hilfreichen Artikel! Sehr gut erklärt, ich musste nicht mal den Cache leeren, hat alles direkt geklappt.
    Liebe Grüße Gamer

  5. Danke für die tolle Anleitung. Aber irgendwas scheint mit dem Favicon hier nicht zu stimmen. Es wird zumindest aktuell keines (mehr?) auf dieser Seite hier angezeigt.

    • Stimmt. Ganz lieben Dank für den Hinweis.

      Ich fürchte, das ist unter die Räder gekommen, als ich die Seite auf SSL umgestellt habe. Und weil man für seine eigenen Sachen gelegentlich betriebsblind ist, ist mir das bis gerade eben nichtmal aufgefallen …

  6. Hallo Michaela
    Du musst das Favicon in Deinem Blog hierhin kopieren: „/wp-content/uploads/“ -> muss mal im Quellcode Deiner Seite schauen, offenbar ist es dort nicht mehr vorhanden.
    Ich hab mit der Theme 2017 den ganzen Dateipfad angegeben, damit es funktioniert.

  7. Liebes WP-Bistro,

    laut Wikipedia ist eure Einbindung falsch: image/vnd.microsoft.icon (weit verbreitete falsche Angabe: image/x-icon)

    Und tatsächlich wir mir euer Icon auch nicht angezeigt, weder im Firefox noch im Opera. Habe auch selber Probleme mit der Einbindung: Firefox zeigt meines nicht an, Opera und IE schon. Sehr ärgerlich diese Uneinheitlichkeit diverser Browser -.-

  8. Super Erklärung und definitiv hilfreich. Mittlerweile haben die Populärsten überwiegend tatsächlich die integrierte Funktion direkt ein Favicon einzustellen, falls das mal fehlt hilft deine Anleitung wirklich gut.

  9. Pingback: Wordpress 2 Menüs, empfehlenswerte Plugins, favicon – Bertold Seminarblog

    • Im Firefox wirds angezeigt – aber meine Website wartet dringend auf Ihren Relaunch, im Zuge dessen diese ganzen kleinen Fehlerchen dann auch bereinigt werden. Schuster und Leisten sag‘ ich da nur 😉

      Herzliche Grüße
      Michaela

  10. ja, das ist anschaulich erklärt. Ich betreibe zwei Blogs, die miteinander verquickt sind. Der eine Blog ist mein Firmenblog und der zweite eher privater Natur. Das Icon für meinen privaten Blog habe ich zwar eingebunden, aber wenn ich auf anderen Blogs kommentiere, erscheint das Firmen-Icon und nicht mein privates Icon… obwohl ich von meinem privaten Blog aus auf andere Blogs zugegriffen habe. habe ich bei der Einrichtung des Favicons irgend etwas doch nicht beachtet?

    • Hallo Angi,
      das, was angezeigt wird beim Kommentieren (also jetzt auch hier bei Deinem Kommentar) ist nicht das Favicon, sondern der Gravatar. Wenn Du oben rechts in die Suchmaske „Gravatar“ eingibst findest Du dazu auch einen entsprechenden Beitrag von mir. Vielleicht hilft Dir das dann schon weiter.

      Herzliche Grüße
      Michaela

  11. Danke für die Anleitung. Hat auf Anhieb funktioniert. Die Frage ist was passiert nach dem Theme Update? Bleibt der Eintrag bestehen, oder verschwindet er und muss nach jedem Theme-Update nochmals eingetragen werden?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


Ich möchte auch den WordPress-Rundbrief abonnieren