Favicon in WordPress einbinden

Letzte Aktua­li­sie­rung 26. Mai 2023 

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!

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 WordPress 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 WordPress 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.

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.

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 Pic­Pick, 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.

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 WordPress ins Spiel. Dafür klickst Du ein­ge­loggt oben in der Admin Bar auf den Customizer.

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.

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.

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

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.

Es lädt dann in die Medi­en­ver­wal­tung in WordPress hoch.

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.

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 vergessen.

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.

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 Kommentar!