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.
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.
Ich, Viktor Dite bin Shopadmin, Webdeveloper und ein Geek, der das Auge fürs Alltagstaugliche nicht verlieren möchte. Hier im Blog versuche ich beide Welten unter einen Hut zu bringen, so dass auch nicht “Digital Residents” die Möglichkeit bekommen, das Meiste aus der digitalen Welt herauszuholen.
Wenn Dir der Beitrag gefällt, freue ich mich über jedes Share oder ein Kommentar!
Kommentar geschrieben am 09.08.2007
Der Codeschnippsel wird in deinem Beitrag nicht angezeigt…. schade
Kommentar geschrieben am 10.08.2007
jetzt aber :)
Kommentar geschrieben am 10.12.2007
*lol
Warum macht man sowas nicht als copy&paste…?!
:rolleyes:
Kommentar geschrieben am 10.12.2007
was genau?
Kommentar geschrieben am 05.01.2008
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.
Kommentar geschrieben am 05.01.2008
ich krieg es nicht anders hin. auch in
tags wird das Ganze als HTML erkannt
Kommentar geschrieben am 11.04.2008
hat super funktioniert. merci…
Kommentar geschrieben am 18.08.2008
Sorry, aber das ist bullshit. Einen code als Grafik, darauf kann auch nur ein Apple-Nutzer kommen… ^^
Kommentar geschrieben am 18.08.2008
@Ernie
dann sag mir doch mal bitte, wie ich HTML Code gescheit angezeigt bekomme, ohne dass der Browser diesen als HTML interpretiert?!
Kommentar geschrieben am 20.08.2008
Danke für den Tipp.
Hiermit kannst Du übrigens HTML Code im Blog darstellen:
http://webrace.eu/wordpress-mods/code-anzeigen.html
Kommentar geschrieben am 17.10.2008
Vielen Dank für die kurzen, ausführlichen, logischen und hilfreichen Ausführungen. Konnte erfolgreich verfeinern…
JeanPierre
http://www.lueblog.de
Kommentar geschrieben am 14.08.2009
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!
Kommentar geschrieben am 29.08.2009
Vielen Dank, hat geklappt!
(www.at-hilfe.net)
Kommentar geschrieben am 04.09.2009
hmm kurioserweise funktioniert das bei mir nicht. ne idee was ich falsch mache?
leerzeichen etc sind so weit wie notwendig entfernt.
Kommentar geschrieben am 04.09.2009
ah ok hat sich erledigt.
trotz den schwierigkeiten. toller artikel
Kommentar geschrieben am 07.09.2009
Vielen Dank, hat auch bei mir bestens funktioniert!
Kommentar geschrieben am 17.09.2009
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?
Kommentar geschrieben am 17.09.2009
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.
Kommentar geschrieben am 20.10.2009
Supi danke genau das Stück Code hab ich gerade gesucht!
Kommentar geschrieben am 22.10.2009
danke, hat geklappt!
Kommentar geschrieben am 28.11.2009
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
Kommentar geschrieben am 28.11.2009
hat sicher erledigt danke!! ;o)
Kommentar geschrieben am 10.12.2009
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?
Kommentar geschrieben am 10.12.2009
hmm, browsercache?
Kommentar geschrieben am 30.03.2010
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
Kommentar geschrieben am 12.11.2010
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”>
Kommentar geschrieben am 26.02.2011
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.)
Kommentar geschrieben am 06.03.2011
Nach einiger Zeit und genauem lesen, (nicht nur überfliegen) hat es endlich geklappt :).
Vielen Dank.
Kommentar geschrieben am 25.03.2011
Gute Anleitung. Falls es bei irgendwem nicht klappt, hier ist noch eine ausführlichere Version mit vielen Screenshots:
http://www.medienpapst.com/elearning/favicon-fur-wordpress-erstellen/
Kommentar geschrieben am 27.08.2011
Cool, vielen Dank :-)
Kommentar geschrieben am 08.10.2011
hat super geklappt, danke!
Kommentar geschrieben am 23.11.2011
gibt auch ein super plugin für wordpress:
http://www.techotronic.de/plugins/all-in-one-favicon/
geht gaaanz easy so ;-)
Kommentar geschrieben am 23.11.2011
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!
Kommentar geschrieben am 09.12.2011
Habs manuell gemacht und hat gut geklappt! Vielen Dank für die Anleitung!
Kommentar geschrieben am 09.12.2011
freut mich, dass ich helfen konnte!
Kommentar geschrieben am 27.12.2011
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
Kommentar geschrieben am 27.12.2011
Was meinst Du mit speichern?
Kommentar geschrieben am 28.12.2011
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.”
Kommentar geschrieben am 28.12.2011
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…
Kommentar geschrieben am 07.01.2012
Danke für die super gute Erklärung !
Lieben Gruß
Oliver
Kommentar geschrieben am 14.02.2012
Danke für die gute Anleitung. Konnte es gleich für unseren Blog einsetzen
Kommentar geschrieben am 14.02.2012
Danke für die tolle Anleitung! Hat super funktioniert!
Kommentar geschrieben am 18.02.2012
Ging einfach und schnell. So soll es sein. ;)
Kommentar geschrieben am 14.03.2012
Vielen Dank für die Anleitung. Habe ich direkt umgesetzt :)
Kommentar geschrieben am 18.03.2012
1A, kurz & bündig, so solls sein..
Danke bestens
Kommentar geschrieben am 26.03.2012
Hey,
hab das Problem das beim Laden Icon angezeigt wird, wenn die Seite fertig geladen ist es aber wieder weg ist.
Idee?
Kommentar geschrieben am 26.03.2012
Dann wird höchstwahrscheinlich nach Deinem Aufruf ein anderes Favicon nachgeladen. Musst Du mal im Quellcode nachschauen, ob Dein Aufruf der einzige ist.
Kommentar geschrieben am 08.04.2012
Der Generator scheint manchmal kaputte icons zu generieren, so dass sie nicht angezeigt werden
Kommentar geschrieben am 08.04.2012
MIt diesem Generator klappts auf jeden Fall: http://www.favicon.cc/
Kommentar geschrieben am 24.04.2012
Hey,
vielen Dank für die Info – habe das gerade bei uns eingebaut. Ging recht einfach.
Gruß
Detlev
Kommentar geschrieben am 26.05.2012
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
Kommentar geschrieben am 10.06.2012
Vielen Dank.
war auch für einen Anfänger sehr gut Verständlich und einfach!
Gruß
Christian
Kommentar geschrieben am 21.06.2012
Na dann werd’ ich mal dran machen, das Favicon in meine Blogs einzubauen. Bin gespannt, ob das auch bei einem gehosteten WordPressblog geht …
Kommentar geschrieben am 21.06.2012
nope
Kommentar geschrieben am 22.06.2012
Danke für die tolle Anleitung!
Kommentar geschrieben am 25.06.2012
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
Kommentar geschrieben am 25.06.2012
Dann hat Dein Template keinen <base> Eintrag… Dieser ist für relative Pfadangaben natürlich wichtig!
Kommentar geschrieben am 10.09.2012
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!
Kommentar geschrieben am 10.09.2012
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 :)
Kommentar geschrieben am 22.10.2012
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
Kommentar geschrieben am 22.10.2012
Wertvoll ist der Link aber nicht ;)
Kommentar geschrieben am 23.10.2012
“Wertvoll ist der Link aber nicht” – das stimmt schon, habe ich aber auch nie behauptet… :))
Kommentar geschrieben am 21.01.2013
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
Kommentar geschrieben am 02.03.2013
Vielen Dank für die tolle Erklärung!!!!
Kommentar geschrieben am 18.04.2013
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.
Kommentar geschrieben am 18.04.2013
Danke für die Blumen! Freut mich, dass ich helfen konnte!
Kommentar geschrieben am 01.05.2013
[...] Favicon [...]