Erfahrungen & Bewertungen zu Rat & Tat Marketing Birgit Schultz - Marketing-Zauber Favicon in WordPress einbinden
Alte Schuhe - Favicon

Favicon in WordPress einbinden

Beitrag aktualisiert am:

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 kei­nes!

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

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 Word­Press ein­bin­dest. Das Tolle ist: Das geht inzwi­schen ganz ein­fach! 🙂

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 über­le­gen.

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 ver­spielt.

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 Pro­blem!

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

Wich­tig für das Ein­bin­den in Word­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 star­ten.

Kli­cke in Pic­M­on­key also auf “Design” und gib unter “Custom 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 Pho­to­shop.

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 ein­ge­fügt.

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.

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 her­un­ter.

4. Favicon in WordPress einstellen

Nun kommt end­lich Word­Press ins Spiel. Dafür klickst Du ein­ge­loggt oben in der Admin Bar auf den Cus­to­mi­zer.

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

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

Das ist der nächste Schritt, um Dein Favicon auf Word­Press ein­zu­fü­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.

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:

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.

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 Word­Press hoch.

Hier siehst Du die Medi­en­ver­wal­tung in Word­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.

Hier mein Test mit einem Herz als Favicon. Das war mir dann doch zu ver­spielt.

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 Schu­hen …

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 Kun­den­pro­jekte.

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 Webspace 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 Twee­ten

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!

5/5 (2 Reviews)

Über den Autor 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!

follow me on:

Hinterlasse einen Kommentar:

16 comments
Füge Deine Antwort hinzu