Alte Schuhe - Favicon

Favicon in WordPress einbinden

Letzte Aktualisierung 27. Mai 2019

Inzwischen ist es schon eine lange Zeit her. Im Februar 2017 fühlte ich mich so richtig 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 verschiedenen Browsern stellte ich fest:

Ich hatte keins!

Und das mir!

Weißt Du eigentlich, was ein Favicon ist? Das ist das kleine Symbol oben in den Tabs Deines Browsers. Es hilft den Nutzern, die viele Tabs geöffnet haben, sich schnell zu orientieren und zwischen den geöffneten Seiten hin und her zu schalten. Normalerweise hat da jede Site, die etwas auf sich hält, ein Favicon. Und ich? Ich hatte keines!

Favicons
Favicons helfen Deinen Lesern bei der Orientierung in den geöffneten Browsertabs.

Am Ende des Beitrags erzähle ich Dir kurz, wie es dazu kam – und warum ich dieses Titelbild für diesen Beitrag gewählt habe. Doch jetzt erkläre ich Dir erst einmal, wie Du ein Favicon in WordPress einbindest. Das Tolle ist: Das geht inzwischen ganz einfach! 🙂

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

Zunächst einmal brauchst Du eine Idee, welches Motiv Dir als Favicon dienen soll. Wenn Du ein Logo hast, das auch winzig klein noch gut erkannt wird und außerdem gut in eine quadratische Form passt, dann fällt die Entscheidung leicht. Mein Schriftzug-Logo (als „Wort-Bild-Marke – auch wenn ich die nicht habe eintragen lassen) eignet sich dafür nicht so gut. Also musste ich mir etwas anderes überlegen.

Wie Du siehst, wenn Du nach oben auf den Browser-Tab schaust, habe ich mich für das „M“ von Marketing-Zauber entschieden. Für eine Weile hatte ich auch an ein Herz gedacht – wie es auf den i-Punkten meiner Überschriften vorkommt. Das war mir dann aber letztlich doch zu verspielt.

Hier musst Du eventuell ein wenig experimentieren – da das Erstellen und Einbinden aber so schön einfach und schnell geht, ist das kein Problem!

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

Wichtig für das Einbinden in WordPress ist ein Bild in der Ausgangsgröße von mindestens 512 x 512 Pixel. Inzwischen empfehle ich sogar 1080 x 1080 Pixel. Mit welchem Programm Du das erstellst, ist ziemlich egal. Du kannst Zum Beispiel Photoshop nehmen, Paint.NET, Gimp, Canva oder PicMonkey. Für das Erstellen meines Favicons habe ich mich diesmal für PicMonkey entschieden, weil es ein paar Bearbeitungsmöglichkeiten mehr als Canva bietet und weil ich keine Lust hatte, Photoshop zu starten.

Klicke in PicMonkey also auf „Design“ und gib unter „Custom Size“ 1080 x 1080 Pixel an.

[foogallery id=“2504″]

Wenn Du auf die Grafik klickst, siehst Du die Einstellmöglichkeiten für die Erstellung eines Favicons in PicMonkey, Canva und Photoshop.

3. Gestaltung des Favicons für WordPress

Als erstes habe ich den Hintergrund in meinem Blauton erstellt. Dafür habe ich in Canva die Option „Canvas Color“ gewählt und den sogenannten Hex-Code meines Blautons eingefügt.

Farbcode in PicMonkey eingeben
So stellst Du den richtigen Farbton in PicMonkey ein.

Du weißt den Hex-Code nicht? Dann kannst Du den Farbwert mit einem ColorPicker von Deiner Website entnehmen. Ich nutze dafür das kleine aber sehr leistungsfähige Programm PicPick, das Du als geschäftlicher Nutzer zwar bezahlen musst, das aber wirklich sehr günstig und jeden Cent wert ist. Für Mac gib des zum Beispiel den ColorSnapper. Oder Du verwendest eine Erweiterung für Chrome – suche einfach nach color picker.

Favicon in PicMonkey

Dann habe ich den Buchstaben „M“ eingegeben und auf die richtige Größe gebracht. Den Screenshot siehst du mit dem Herzchen, mit dem ich ebenfalls experimentiert habe. Gefällt Dir das Ergebnis, lädst Du es auf Deinen PC als PNG-Datei herunter.

4. Favicon in WordPress einstellen

Nun kommt endlich WordPress ins Spiel. Dafür klickst Du eingeloggt oben in der Admin Bar auf den Customizer.

Link zum Customizer
In der Admin Bar findest Du den Link zum Customizer in WordPress.

Dann lädt die Vorschau Deiner Website 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 WordPress einzufügen

Da kannst Du den Titel und Untertitel Deiner Website einstellen und – das Favicon hochladen. Wenn Du noch kein Favicon zugefügt hast, sieht das so aus wie auf diesem Screenshot hier.

Favicon in WordPress
Falls Du noch kein Favicon hast, sieht der Button so aus.

Wenn schon ein Favicon eingebaut ist und Du ein anderes möchtest, 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 auswählen“ oder „Bild wechseln“ klickst, es öffnet sich der Explorer (unter Windows) beziehungsweise der Finder (unter Mac). Damit navigierst Du zu der abgespeicherten Datei für Dein Favicon und klickst es an.

Favicon in WordPress
Navigiere mit dem Explorer zu Deiner gerade erstellten Favicon Datei.

Es lädt dann in die Medienverwaltung in WordPress hoch.

Favicon in WordPress
Hier siehst Du die Medienverwaltung in WordPress und die gerade hochgeladene Datei.

Ist es vollständig hochgeladen, klickst Du rechts unten auf „Auswählen“ – das war dann schon alles – jetzt musst Du nur noch oben auf „Speichern & Publizieren“ klicken und Deine Website hat (endlich) 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 Website seit über einem Jahr kein Favicon hatte?

Für meine Kunden richtete ich nämlich sofort immer eines mit ein. Aber Du kennst ja die Sache mit dem Schuster und den Schuhen …

Als ich meine Website vorbereitete, hatte ich es eilig, online zu gehen. Marketing-Zauber hatte ich ja als nebenberufliches Projekt zu meiner Beratungsagentur Rat & Tat Marketing entwickelt – und so ging es mir, wie es vielen Sidepreneuren geht: Zeit ist immer knapp und der Brotjob geht vor. In meinem Fall waren das natürlich Kundenprojekte.

Zudem war ich mir nicht einig, was ich als Symbol wählen wollte. Also habe ich die Entscheidung und die Umsetzung erst einmal vertagt. Es kam, wie es kommen musste, Marketing-Zauber nahm Fahrt auf, ich hatte viel damit zu tun, alles aufzubauen und regelmäßig zu bloggen und in den Social Media aktiv zu sein. Dazu Lehrverpflichtungen, unerwartete (aber sehr willkommene) eilige Aufträge … wie das Leben halt so spielt.

Sprich: Irgendwann hatte ich es einfach vergessen. Zumal meine Website auf demselben Webspace wie meine Site für Rat & Tat Marketing liegt – und die hat(te) ein Favicon, das mir im eingeloggten Zustand auch für Marketing-Zauber angezeigt wurde. Nun fand ich den Leuchtturm zwar suboptimal, aber ich war eben der Meinung, dass das irgendwo schon passt, denn Marketing-Zauber ist ja keine separate Firma, sondern mehr ein Geschäftsbereich meiner Beratungsagentur. Wann schaut man selbst seine Website schon mal im ausgeloggten Zustand an? 😉

Ja, und so kam es, dass ich mehr als ein Jahr kein Favicon für Marketing-Zauber hatte und nun weißt Du, wieso ich dieses Titelbild ausgewählt habe.

Merke: Ein Favicon zu erstellen ist einfach - schiebe es nicht auf die lange Bank! Klick um zu Tweeten

Wie hat Dir der Beitrag gefallen. Hast Du ein Favicon? Oder hast Du nun eins, weil Du schnell nach meiner Anleitung eines nachgerüstet hast? Schreib mir gerne einen Kommentar! Und wenn Dir meine Anleitung nützlich war, hinterlasse doch gern schnell fünf Sterne!

5/5 (3 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