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.
(Keine Bewertungen bisher)
Loading ...
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 30.06.2008
[...] ein Danke an Dynamic Drive (gefunden über Google und miZine)für das super Favicon-Erstell-Angebot – es löst meinen langjährigen Faviroten HTML-Kit [...]
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 16.07.2011
[...] http://mizine.de/internet/wordpress-favicon-einbinden/ [...]
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