Favicon einbinden in WordPress

Kurzbeschreibung

Entwerfe ein quadratisches gif, png, jpg und gehe dann auf folgende Seite, die Dir aus dem eben entworfenen Bild ein favicon.ico macht (einfach bild hochladen – create icon – dowloaden – speichern – fertig): FavIcon Generator

Nun lade dir das favicon in dein WordPress Server hoch. Dann gehe in deine header.php und gib folgenden code ein:

<link href="URL/favicon.ico" rel="shortcut icon" />

dann einfach den Browser neu starten und schon müsste euer Favicon in der Adresszeile auftauchen. Falls das favicon nicht angezeigt wird, musst Du das favicon einmal in der Browserzeile manuell aufrufen, damit der Browser seinen Cache löscht: http://[URL]/favicon.ico



Ausführlichere Beschreibung für favicon wordpress

Hochladen der favicon.ico in WordPress

Am einfachsten ist es, wenn Ihr die favicon.ico Datei in dem Standard Datei Upload von WordPress hochlädt.
favicon WordPress hochladen

favicon WordPress hochladen

favicon WordPress hochladen

In meinem Fall steht dann in der header.php folgender Eintrag:

<link rel="shortcut icon" href="/wp-content/uploads/2011/02/favicon1.ico" />

Favicon in der header.php eintragen

Wiederum am einfachsten ist es hier die Editor Funktion von WordPress zu nutzen und damit die header.php zu modifizieren.
Der Editor befindet sich im Admin Menü “Design” oder bei der englischen Oberfläche “Appearance”. Im Editor müsst Ihr rechts noch auf die header.php klicken und dann im Editor Feld vor dem

</head>

die oben genannte Zeile einfügen.

Hier ist aber etwas Vorsicht angesagt! Denn ein falscher Eintrag kann die Darstellung oder die Funktionalität des WordPress Themes zerschießen.

Wozu ist ein favicon eigentlich gut?

Euch muss ich den Favicon eigentlich ja nicht mehr schmackhaft machen, da Ihr ja schon das Dingen einbinden wollt. Trotzdem möchte ich noch einen großen Nutzen des Favicon aufzählen, den mir meine Frau letztens mal nebenbei nahe gebracht hat.

Die Darstellung des Favicons in der Adressleiste des Browser ist eigentlich nur ein Gimmik ohne einen eigentlich Mehrwert für den Nutzer. Das Favicon hat aber einen wirklichen Mehrwert, der nicht zu unterschätzen ist! Wer in der Favoritenliste eine Menge Links stehen hat, kennt vielleicht den Effekt, dass das Wiederfinden eines bestimmten Links wesentlich schneller funktioniert, wenn ein individuelles Favicon neben dem Namen des Links eingebunden ist.

Das liegt daran, dass der Mensch sich an Piktogramme (und das sind ja Favicons) viel schneller und einfacher erinnern kann, als an Text. Piktogramme haben noch einen weiteren Vorteil: Der Mensch kann sie viel leichter unterscheiden als einen relativ ähnlich aussehenden Text. Um Text zu unterscheiden, muss ich ihn lesen. Piktogramme hingegen sind fast mit einem Blick erfasst und unterschieden.

Kommentare:

Kommentare zum Beitrag lesen »
Schreibe selbst einen Kommentar »


Weitere Beiträge in dieser Kategorie:

OwnCloud Android Synchronisierung von Kalendern und Kontakten

Wer Owncloud nutzen möchte um seine synchronisierten Daten nicht an Google weiterzugeben (oder aus datenschutzrechtlichen Gründen nicht weitergeben darf), der sollte beachten, dass die Synchronisation von Android mit OwnCloud nur mit Apps von einem Drittanbieter geht. “CalDAV-Sync beta” und “CardDAV-Sync … Weiterlesen →

70 Kommentare » Schreibe einen Kommentar

  1. *lol

    Warum macht man sowas nicht als copy&paste…?!
    :rolleyes:

  2. den code meint er. wenn man den einfach makieren und in seinen header kopieren könnte, wäre das schon praktischer, als anzufangen etwas abzuschreiben. abgesehen davon währe der code als txt auch sichtbar. ich sehe nämlich auch nur gähnende leere wo ein code stehen sollte. trotzdem danke für die anleitung. ist ja alles in allem recht unkompliziert.

  3. Sorry, aber das ist bullshit. Einen code als Grafik, darauf kann auch nur ein Apple-Nutzer kommen… ^^

  4. @Ernie
    dann sag mir doch mal bitte, wie ich HTML Code gescheit angezeigt bekomme, ohne dass der Browser diesen als HTML interpretiert?!

  5. Vielen Dank! Dank dieser Seite hat meine Homepage ( http://www.glueck24.net ) nun ein favicon. War sehr nützlich. Nur eben man die Zeile nich kopieren konnte war ein wenig umständlich. Trotzdem danke!

  6. hmm kurioserweise funktioniert das bei mir nicht. ne idee was ich falsch mache?

    leerzeichen etc sind so weit wie notwendig entfernt.

  7. Ich pflege eine Website, die in WordPress läuft, habe aber nicht wirklich viel Erfahrung damit …
    Wo genau soll der Favicon-Link denn eingefügt werden? Ich meine: Wo finde ich den Quelltext der Haupseite?

  8. Im WP backend:

    en: Appearance -> Editor -> header (header.php)
    de: Design -> Editor -> header (header.php)

    Aber wenn Du nicht weißt, wo Du es einfügen sollst, solltest Du dies lieber nicht tun. Löscht Du etwas versehentlich, ist das Template womöglich nicht mehr darstellbar.

  9. hallo zusammen, bin bei meiner ersten wordpress seite und habe diesen artikel gefunden. wo genau in der header.php muss ich den code eingeben?? hab es ausprobiert unter den letzten dort sollte es doch richtig sein oder???
    danke für eure hilfe

  10. Vielen Dank, hat geklappt. Allerdings hab ich ein bisschen rumgekaspert, weil zwar Opera und Konqueror das Favicon anzeigten, Firefox allerdings nicht. Nachdem ich das Firefox-Theme gewechselt habe, seh’ ich es allerdings auch da.
    Komischerweise hat mir Firefox (3.5.x unter openSUSE 11.2) auch unter dem Default-Theme alle Favicons anderer Seiten angezeigt, nur meins nicht. Gibt’s dafür sinnvolle Erklärungen oder muss ich das einfach so als gegeben hinnehmen?

  11. Hm, bei mir läuft’s zwar immer noch nicht, aber irgendwie werde ich es schon hinbekommen. Danke jedenfalls für die Besschreibung!

    LG
    Chris

  12. Vielen Dank für den Tipp. Wenn man das Favicon in das eigene Theme abspeichern möchte, kann man sogar die URL dynamisch aufbauen (mit der Variablen bloginfo(template_directory)) und den Codeschnipsel damit wiederverwenden: <link rel="shortcut icon" href="/favicon.ico”>

  13. Besten Dank für den Tipp.
    Der im Prinzip sicher richtige Hinweis »Nun lade dir das favicon in dein WordPress Server hoch« scheint mir allerdings etwas unscharf zu sein. Solch ein Server ist groß! In welches Verzeichnis genau gehört die Datei? (Ich bewundere die Vorredner, die hier offenbar die richtige Intuition hatten.)

  14. Nach einiger Zeit und genauem lesen, (nicht nur überfliegen) hat es endlich geklappt :).

    Vielen Dank.

  15. Natürlich gibt es Plugins für alles, was man so möchte. Ich schaue aber immer zu, dass ich soviel wie möglich ohne Plugins realisiert bekomme. Warum? Ganz einfach. ich habe bereits jetzt schon mehrere Plugins, die sich überschneiden und Sachen doppelt laden. Das ist total Banane. Also muss ich die Plugins wiederum anpassen. Auch Käse. Also baue ich es manuell ein – wenn es geht. Dann bleibt WP schlank(er) und überschaubar – bei mehr als 20 aktiven und unentbehrlichen Plugins ist das schon sehr wichtig!

  16. Habs manuell gemacht und hat gut geklappt! Vielen Dank für die Anleitung!

  17. Hallo !
    Soweit hat alles geklappt. Ich habe auch den link zwischen head und body eingegeben. Nun vielleicht ne blöde Frage aber wie speichere ich das ganze dann ?
    Im vorraus Danke

  18. Der zeigt mir unter dem Editor nur den Satz “You need to make this file writable before you can save your changes. See the Codex for more information.”

  19. oh! Dann sind die Zugriffsrechte der Dateien so gesetzt, dass das WordPress Backend nicht darauf schreiben darf. Entweder Du musst die Zugriffsrechte korrigieren (höchstwahrscheinlich ein falscher owner) oder die header.php per FTP ändern…

  20. Danke für die gute Anleitung. Konnte es gleich für unseren Blog einsetzen

  21. Hey,
    hab das Problem das beim Laden Icon angezeigt wird, wenn die Seite fertig geladen ist es aber wieder weg ist.
    Idee?

  22. Dann wird höchstwahrscheinlich nach Deinem Aufruf ein anderes Favicon nachgeladen. Musst Du mal im Quellcode nachschauen, ob Dein Aufruf der einzige ist.

  23. Der Generator scheint manchmal kaputte icons zu generieren, so dass sie nicht angezeigt werden

  24. Vielen Dank, hat wunderbar geklappt.
    Einziger Unterschied bei mir: Ich musste vor die Pfadangabe auch noch das Hauptverzeichnis angeben, also wordpress/wp-content/usw…
    Gruß
    Bernhard

  25. Vielen Dank.
    war auch für einen Anfänger sehr gut Verständlich und einfach!
    Gruß
    Christian

  26. Na dann werd’ ich mal dran machen, das Favicon in meine Blogs einzubauen. Bin gespannt, ob das auch bei einem gehosteten WordPressblog geht …

  27. Vielen Dank für den Tritt in die richtige Richtung.
    Allerdings musste ich den Eintrag in der header.php etwas anpassen.
    Aus “href=”/wp-content/uploads/2011/02/favicon1.ico” musste ich “href=”./wp-content/uploads/2011/02/favicon1.ico” machen.
    Mein Blog liegt nicht im Root Verzeichnis vom Webserver.

    Thx a lot.

    Gruß
    Markus

  28. Dann hat Dein Template keinen <base> Eintrag… Dieser ist für relative Pfadangaben natürlich wichtig!

  29. Ich finde die Lösung über den Media-Upload nicht sehr vorteilhaft. Warum das Favicon in die tiefste Ordnerstruktur verbannen?

    Wenn ich eine konstruktive Kritik anmerken darf: Ich denke, Du hättest die Alternative über einen ordnungsgemäßen FTP-Upload in den Stammordner ebenso erwähnen können. Aber ich verstehe: nicht alle haben Zugriff über FTP, geschweige denn einen ordentlichen Editor benutzen. Doch trotz dessen, finde ich sollte man die Variante per FTP/Stammordner aufzeigen. Wenn Blogbetreiber nicht sehen, wo die Defizite an Ihrer Maschine liegen, können sie sich auch keine Gedanken um eine Verbesserung machen – sie haben ja das Gefühl “passt ja alles”.

    Ich halte von diesem ganzen “Ich-habe-keinen-Zugriff-auf-meine-Daten-Hosting-Krams” nichts. Wie will man eine ordentliche, evtl. optimierte Maschine bauen, wenn einem noch nicht mal erlaubt ist, ordentliche Schrauberei vorzunehmen? Ganz im Gegenteil – es kommt immer ein weiteres Defizit hinzu, und noch eins, und noch ein usw. Das die Site dann irgendwann lahmt und krankt, ist dann ja eigentlich absehbar. Das hat ja alles keinen/kaum Sinn.

    Damit das aber jetzt nicht zu negativ wirkt – sollte auch wirklich nur konstruktive Kritik sein, kein gemotze: An Deiner Website habe ich mir schon gelegentlich einen Gedankenanstoß abholen können.

    Viktor, hab Dank und sei gegrüßt!

  30. Hallo Paul,

    ich verstehe Deinen Einwand keinesfalls als Kritik. Du hast natürlich Recht. Aber es spielt für das Favicon eigentlich überhaupt keine Rolle, wie tief es in der Ordnerstruktur vergraben ist. Deswegen habe ich die leichtere Variante genommen, die überall funktioniert.

    Für die Aufklärung hast Du ja jetzt gesorgt :)

  31. Das umzusetzen, war eine Sache von genau zwei Minuten…

    Allerdings funktioniert der Link zum FavIcon Generator nicht. Deshalb auf http://www.favicon-generator.de ausgewichen, welcher sogar noch ein kleines Gimmeck bietet. Wer dort sein FavIcon generiert, hat anschliessend noch die Option kostenlos nen Link abzustauben… ;-)

    Greets

  32. “Wertvoll ist der Link aber nicht” – das stimmt schon, habe ich aber auch nie behauptet… :))

  33. Vielen Dank für Deinen Beitrag. Habe seit Tagen versucht mein Favicon wiederherzustellen. Es hat plötzlich nicht mehr mit meinem Plugin funktioniert. Nach zahlreichen Versuchen mit unterschiedlichen Plugins, habe ich es damit aufgegeben. Den

  34. Nach tagelanger Recherche in diversen Hilfeseiten und probieren–nicht-funktionieren hat’s endlich gekappt. Danke für die ausführliche und vor allem verständlich Erklärung – gerade bei HTML-Neulingen. Ist wirklich die einfachste Methode, die ich bisher gefunden habe.

  35. Leider funktioniert es nicht, es wird nicht dargestellt =(
    Trotzdem vielen Dank für diesen Artikel! Ich werde mal noch etwas rum probieren, irgendwie muss das ja machbar sein!

  36. Wenn Du die verlinkte Domain meinst, dann kann ich ein Favicon sehen!
    Es dauert etwas, bis Dein Browsercache das neue Icon als das aktuelle ansieht. Drück mal SHIFT-F5 drei Mal.

  37. Hallo,

    herzlichen Dank für den super Bericht!

    Nun noch eine Frage: Wie schafft man es, dass das Favicon nicht nur auf der Startseite oben im Tab erscheint (Chrome), sondern auch, wenn man die anderen Menüpunkte (Untermenü-Seiten etc.) anklickt?

    Vielen Dank
    Katja

  38. Gib mir bitte einen Link. Dann schaue ich nach. Der Beschreibung nach ist das Favicon nicht korrekt im Header untergebracht.

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.


Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>