Favicon in WordPress einbinden

Von Birgit Schultz

Februar 20, 2017


Letzte Aktua­li­sie­rung 16. Juni 2021 

Inzwi­schen ist es schon eine lange Zeit her. Im Februar 2017 fühlte ich mich so rich­tig ertappt! In einer Gruppe mokierte sich jemand, weil mein Blog kein Favicon hätte.

Ich so: Was will der? Ich habe doch eins!

Dann — nach einem Test in ver­schie­de­nen Brow­sern stellte ich fest:

Ich hatte keins!

Und das mir!

Weißt Du eigent­lich, was ein Favicon ist? Das ist das kleine Sym­bol oben in den Tabs Dei­nes Brow­sers. Es hilft den Nut­zern, die viele Tabs geöff­net haben, sich schnell zu ori­en­tie­ren und zwi­schen den geöff­ne­ten Sei­ten hin und her zu schal­ten. Nor­ma­ler­weise hat da jede Site, die etwas auf sich hält, ein Favicon. Und ich? Ich hatte keines!

Favicons
Favicons hel­fen Dei­nen Lesern bei der Ori­en­tie­rung in den geöff­ne­ten Browsertabs.

Am Ende des Bei­trags erzähle ich Dir kurz, wie es dazu kam — und warum ich die­ses Titel­bild für die­sen Bei­trag gewählt habe. Doch jetzt erkläre ich Dir erst ein­mal, wie Du ein Favicon in Wor­d­Press ein­bin­dest. Das Tolle ist: Das geht inzwi­schen ganz einfach! 🙂

1. Ein Motiv für Dein Favicon auswählen

Zunächst ein­mal brauchst Du eine Idee, wel­ches Motiv Dir als Favicon die­nen soll. Wenn Du ein Logo hast, das auch win­zig klein noch gut erkannt wird und außer­dem gut in eine qua­dra­ti­sche Form passt, dann fällt die Ent­schei­dung leicht. Mein Schrift­zug-Logo (als “Wort-Bild-Marke — auch wenn ich die nicht habe ein­tra­gen las­sen) eig­net sich dafür nicht so gut. Also musste ich mir etwas ande­res überlegen.

Wie Du siehst, wenn Du nach oben auf den Brow­ser-Tab schaust, habe ich mich für das “M” von Mar­ke­ting-Zau­ber ent­schie­den. Für eine Weile hatte ich auch an ein Herz gedacht — wie es auf den i‑Punkten mei­ner Über­schrif­ten vor­kommt. Das war mir dann aber letzt­lich doch zu verspielt.

Hier musst Du even­tu­ell ein wenig expe­ri­men­tie­ren — da das Erstel­len und Ein­bin­den aber so schön ein­fach und schnell geht, ist das kein Problem!

2. Bildvorlage erstellen und auf die richtige Größe bringen

Wich­tig für das Ein­bin­den in Wor­d­Press ist ein Bild in der Aus­gangs­größe von min­des­tens 512 x 512 Pixel. Inzwi­schen emp­fehle ich sogar 1080 x 1080 Pixel. Mit wel­chem Pro­gramm Du das erstellst, ist ziem­lich egal. Du kannst Zum Bei­spiel Pho­to­shop neh­men, Paint.NET, Gimp, Canva oder Pic­M­on­key. Für das Erstel­len mei­nes Favicons habe ich mich dies­mal für Pic­M­on­key ent­schie­den, weil es ein paar Bear­bei­tungs­mög­lich­kei­ten mehr als Canva bie­tet und weil ich keine Lust hatte, Pho­to­shop zu starten.

Kli­cke in Pic­M­on­key also auf “Design” und gib unter “Cus­tom Size” 1080 x 1080 Pixel an.

Wenn Du auf die Gra­fik klickst, siehst Du die Ein­stell­mög­lich­kei­ten für die Erstel­lung eines Favicons in Pic­M­on­key, Canva und Photoshop.

3. Gestaltung des Favicons für WordPress

Als ers­tes habe ich den Hin­ter­grund in mei­nem Blau­ton erstellt. Dafür habe ich in Canva die Option “Can­vas Color” gewählt und den soge­nann­ten Hex-Code mei­nes Blau­tons eingefügt.

Farbcode in PicMonkey eingeben
So stellst Du den rich­ti­gen Farb­ton in Pic­M­on­key ein.

Du weißt den Hex-Code nicht? Dann kannst Du den Farb­wert mit einem Color­Pi­cker von Dei­ner Web­site ent­neh­men. Ich nutze dafür das kleine aber sehr leis­tungs­fä­hige Pro­gramm PicPick, das Du als geschäft­li­cher Nut­zer zwar bezah­len musst, das aber wirk­lich sehr güns­tig und jeden Cent wert ist. Für Mac gib des zum Bei­spiel den ColorS­nap­per. Oder Du ver­wen­dest eine Erwei­te­rung für Chrome — suche ein­fach nach color picker.

Favicon in PicMonkey

Dann habe ich den Buch­sta­ben “M” ein­ge­ge­ben und auf die rich­tige Größe gebracht. Den Screen­shot siehst du mit dem Herz­chen, mit dem ich eben­falls expe­ri­men­tiert habe. Gefällt Dir das Ergeb­nis, lädst Du es auf Dei­nen PC als PNG-Datei herunter.

4. Favicon in WordPress einstellen

Nun kommt end­lich Wor­d­Press ins Spiel. Dafür klickst Du ein­ge­loggt oben in der Admin Bar auf den Customizer.

Link zum Customizer
In der Admin Bar fin­dest Du den Link zum Cus­to­mi­zer in WordPress.

Dann lädt die Vor­schau Dei­ner Web­site und von links schiebt sich ein Menü ins Bild. Hier klickst Du auf Website-Informationen.

Favicon einfügen
Das ist der nächste Schritt, um Dein Favicon auf Wor­d­Press einzufügen

Da kannst Du den Titel und Unter­ti­tel Dei­ner Web­site ein­stel­len und — das Favicon hoch­la­den. Wenn Du noch kein Favicon zuge­fügt hast, sieht das so aus wie auf die­sem Screen­shot hier.

Favicon in WordPress
Falls Du noch kein Favicon hast, sieht der But­ton so aus.

Wenn schon ein Favicon ein­ge­baut ist und Du ein ande­res möch­test, dann sieht es so aus:

Favicon in WordPress
Willst Du ein Favicon ändern, so sieht die Ansicht aus wie hier.

Gleich, ob Du auf “Bild aus­wäh­len” oder “Bild wech­seln” klickst, es öff­net sich der Explo­rer (unter Win­dows) bezie­hungs­weise der Fin­der (unter Mac). Damit navi­gierst Du zu der abge­spei­cher­ten Datei für Dein Favicon und klickst es an.

Favicon in WordPress
Navi­giere mit dem Explo­rer zu Dei­ner gerade erstell­ten Favicon Datei.

Es lädt dann in die Medi­en­ver­wal­tung in Wor­d­Press hoch.

Favicon in WordPress
Hier siehst Du die Medi­en­ver­wal­tung in Wor­d­Press und die gerade hoch­ge­la­dene Datei.

Ist es voll­stän­dig hoch­ge­la­den, klickst Du rechts unten auf “Aus­wäh­len” — das war dann schon alles — jetzt musst Du nur noch oben auf “Spei­chern & Publi­zie­ren” kli­cken und Deine Web­site hat (end­lich) ein Favicon.

Favicon in WordPress
Hier mein Test mit einem Herz als Favicon. Das war mir dann doch zu verspielt.

Die Sache mit dem Schuster

Und wie kam es nun, dass meine Web­site seit über einem Jahr kein Favicon hatte?

Für meine Kun­den rich­tete ich näm­lich sofort immer eines mit ein. Aber Du kennst ja die Sache mit dem Schus­ter und den Schuhen …

Als ich meine Web­site vor­be­rei­tete, hatte ich es eilig, online zu gehen. Mar­ke­ting-Zau­ber hatte ich ja als neben­be­ruf­li­ches Pro­jekt zu mei­ner Bera­tungs­agen­tur Rat & Tat Mar­ke­ting ent­wi­ckelt — und so ging es mir, wie es vie­len Side­pre­neu­ren geht: Zeit ist immer knapp und der Brot­job geht vor. In mei­nem Fall waren das natür­lich Kundenprojekte.

Zudem war ich mir nicht einig, was ich als Sym­bol wäh­len wollte. Also habe ich die Ent­schei­dung und die Umset­zung erst ein­mal ver­tagt. Es kam, wie es kom­men musste, Mar­ke­ting-Zau­ber nahm Fahrt auf, ich hatte viel damit zu tun, alles auf­zu­bauen und regel­mä­ßig zu blog­gen und in den Social Media aktiv zu sein. Dazu Lehr­ver­pflich­tun­gen, uner­war­tete (aber sehr will­kom­mene) eilige Auf­träge … wie das Leben halt so spielt.

Sprich: Irgend­wann hatte ich es ein­fach ver­ges­sen. Zumal meine Web­site auf dem­sel­ben Webs­pace wie meine Site für Rat & Tat Mar­ke­ting liegt — und die hat(te) ein Favicon, das mir im ein­ge­logg­ten Zustand auch für Mar­ke­ting-Zau­ber ange­zeigt wurde. Nun fand ich den Leucht­turm zwar sub­op­ti­mal, aber ich war eben der Mei­nung, dass das irgendwo schon passt, denn Mar­ke­ting-Zau­ber ist ja keine sepa­rate Firma, son­dern mehr ein Geschäfts­be­reich mei­ner Bera­tungs­agen­tur. Wann schaut man selbst seine Web­site schon mal im aus­ge­logg­ten Zustand an? 😉

Ja, und so kam es, dass ich mehr als ein Jahr kein Favicon für Mar­ke­ting-Zau­ber hatte und nun weißt Du, wieso ich die­ses Titel­bild aus­ge­wählt habe.

Merke: Ein Favicon zu erstel­len ist ein­fach — schiebe es nicht auf die lange Bank! Klick um zu Tweeten

Wie hat Dir der Bei­trag gefal­len. Hast Du ein Favicon? Oder hast Du nun eins, weil Du schnell nach mei­ner Anlei­tung eines nach­ge­rüs­tet hast? Schreib mir gerne einen Kom­men­tar! Und wenn Dir meine Anlei­tung nütz­lich war, hin­ter­lasse doch gern schnell fünf Sterne!

Wer schreibt hier?

Birgit Schultz

Ich bin Birgit Schultz von Marketing-Zauber und ich unterstütze Solopreneurinnen (Einzelunternehmer) bei ihrem Online- und Social Media Marketing. Mein Fokus liegt auf dem strategischen und effizienten Einsatz von Social Media und Content Marketing für die Erhöhung von Bekanntheit, Reichweite und Reputation. Denn nur wer Dich kennt, kann bei Dir kaufen!

Schreibe gerne einen Kommentar!

Deine E-Mail-Adresse wird nicht veröffentlicht. Pflichtfelder haben ein Sternchen.

  1. Liebe Bir­git,

    klasse geschrie­ben und super erklärt — so authentisch!

    Ich hab’ zum Glück ein Favicon, da hat meine Wor­d­Press-Mecha­ni­ke­rin von Anfang an drauf geach­tet. Davor hatte ich meine Web­seite bei einem ande­ren Anbie­ter, da musste ich mich selbst durch­fuch­sen. Wie hätte ich mir damals eine sol­che Anlei­tung gewünscht 🙂

    Ich freue mich auf den nächs­ten Arti­kel von dir.

    Liebe Grüße
    Carina

    1. Liebe Carina,

      vie­len Dank — genau so ist es gelau­fen. Mann, war das mir peinlich!
      Ich freu mich, wenn Du wei­ter mit­liest. Ich kann Dir ver­spre­chen: Es bleibt spannend. 🙂
      Zau­ber­hafte Grüße
      Birgit

  2. 1000 Dank, liebe Bir­git! Das Thema hatte ich schon ewig auf mei­ner To-Do-Liste. Ich hatte sogar schon mein Icon fer­tig gebas­telt. Und tadaa — dank dei­ner super guten Anlei­tung ist es jetzt end­lich online!
    Herz­li­che Grüße aus Frankfurt
    Petra

  3. Hallo Zau­be­rin,

    ich hatte zunächst ein Favicon auf mei­nen Blog ein­ge­baut und dann ein ande­res Theme gewählt, in dem ich das neue Favicon ein­ge­baut habe- Nun bekomme ich das alte Favicon nicht weg. Hast Du einen Tipp?

    Liebe Grüße, Miriam

    1. Hallo Miriam,

      schau Dir noch ein­mal genau die­sen Abschnitt mei­nes Bei­trags an. Da siehst Du im vier­ten Screen­shot des Abschnitts, wo Du ein Favicon auch tau­schen kannst. Im Not­fall würde ich auch ver­su­chen, die Gra­fik-Datei für Dein altes Favicon in der Medi­en­ver­wal­tung zu löschen. Viel­leicht hast Du auch ein Plugin ver­wen­det, um das Favicon ein­zu­bin­den? Dann deak­ti­viere doch mal das Plugin. Ich hoffe, dass Dir das wei­ter hilft! Falls nicht, komm doch ein­fach in meine Face­book-Gruppe Mar­ke­ting-Zau­ber — Schnelle Hilfe für Dein Mar­ke­ting und wir ver­su­chen dort, Dein Pro­blem zu lösen. 

      Zau­ber­hafte Grüße
      Birgit

      1. Liebe Bir­git,

        vie­len Dank. Mit Dei­ner Hilfe habe ich nun auch ein Favicon auf mei­ner Seite http://www.kraeuterpracht.de. Ich habe das alte Foto tat­säch­lich gelöscht. Über den Cus­to­mi­zer hat es dann aber immer noch nicht funk­tio­niert, so dass ich dann doch über ein Plugin gear­bei­tet habe.

        Du bist klasse.

        Liebe Grüße, Miriam

        1. Hallo Miriam,
          schön, dass Du nun einen Weg gefun­den hast — das ist ja das Ein­zige, was zählt.
          Noch ein wich­ti­ger Hin­weis: Die Face­book-Like­box auf Dei­ner Web­site ist in Deutsch­land nicht erlaubt … ich emp­fehle Dir, die schnellst­mög­lich zu löschen.
          Zau­ber­hafte Grüße
          Birgit

          1. Ja, liebe Miriam, ein­fach nur auf die Face­book-Seite ver­lin­ken, das ist in Ordnung. 🙂
            Beste Grüße
            Birgit

          2. Liebe Bir­git,

            Du hast mich jetzt echt über­zeugt. Ich habe mich gerade zum Mas­ter­mind ange­mel­det und freue mich dar­auf, von Dir ler­nen zu können.

            Lio­ebe Grüße, Miriam

          3. Liebe Miriam,
            das freut mich unge­mein — und ich danke Dir für Dein Ver­trauen. Schön, Dich dabei zu haben!
            Herz­li­che Grüße
            Birgit

  4. Liebe Bir­git,

    musste man sich vor Jah­ren ledig­lich um ein ein­zi­ges Favicon küm­mern, sind es heute gleich meh­rere für ver­schie­dene Platt­for­men. Einen Über­blick erhältst Du mit dem Favicon checker:

    https://realfavicongenerator.net/favicon_checker?protocol=http&site=www.marketing-zauber.de

    Müsste bei mei­ner Web­site auch mal ein Update machen, aber ich denke, es gibt Wich­ti­ge­res, wie bei­spiels­weise guten Content.

    Schö­nes Restwochenende

    Gruß, Andreas

    1. Hallo Andreas,
      coo­les Tool! Vie­len Dank für den Tipp. Ansons­ten bin ich ganz Dei­ner Mei­nung: Guter Con­tent ist wichtiger!
      Zau­ber­hafte Grüße
      Birgit

  5. Liebe Bir­git,
    die­ser Arti­kel ist mir in Lin­kedIn vor die Füße gefal­len. Ein Favicon zu erstel­len stand schon seit einem Jahr auf mei­ner Liste, aber ich wusste ein­fach nicht wie.
    Dank dei­ner tol­len Erklä­rung und Doku­men­ta­tion hat meine Web­seite nun end­lich auch ein Favicon.
    Ich danke dir sehr für deine Hilfe.
    Liebe Grüsse, Silvia

    1. Hallo Sil­via, das ist ja groß­ar­tig! Danke für Dei­nen lie­ben Kommentar!
      Zau­ber­hafte Grüße
      Birgit

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Direct Your Visitors to a Clear Action at the Bottom of the Page

Cookie Hinweis von Real Cookie Banner