Favicon erstellen und in Wordpress einbinden

Wahrscheinlich bist du schön öfters über den Begriff Favicon gestolpert. Und wenn nicht über den Begriff, dann sicherlich über den entsprechenden Inhalt. 😉 Aber was ist überhaupt ein Favicon und wie zum Henker kann man sowas erstellen?

Erst kürzlich habe ich bei meiner Webseite nämlich das Favicon geändert. Demzufolge kann ich meine gemachten Erfahrungen zur Favicon Erstellung quasi “brühwarm” erzählen. ^^

Ein Favicon

Was ist das eigentlich?
Dabei handelt es sich, wie der Name schon vermuten lässt, um ein sogenanntes Icon. Genau genommen um ein “Favoriten-Icon”. Setzt sich Favicon doch aus dem englischen “favorite” und “icon” zusammen. Ein Favicon ist also ein kleines Symbol, Logo, Bildchen, dass quasi zur Wiedererkennung einer Webseite dient. Du siehst es beispielsweise in den unterschiedlichen Webbrowsern in den jeweiligen Registerkarten. Oder auch, wenn du bei einer Webseite ein Lesezeichen setzen willst oder dich aus der entsprechenden Favoritenliste bedienst. In sämtlichen Fällen dient ein Favicon zur besseren Erkennung. Es ist quasi ein Portraitfoto deiner Internetseite. ^^ Aber Pflicht ist es nicht. Es gehört mittlerweile aber fast schon zum Standard. Wie zum Beispiel auch eine Instagramseite. 😉

Wie erstelle ich ein Favicon?

Wie bereits erwähnt, habe ich vor kurzem mein bestehendes Favicon durch ein neues ersetzt. Um das neue Favicon zu erstellen bin ich wie folgt vorgegangen.

Ein Favicon erstellen ist realtiv einfach. Ich habe dafür in Adobe Photoshop CC eine neue Datei mit den Massen 48×48 Pixel kreiert. Möglich wären unter anderem auch 16×16 oder 32×32 Pixel gewesen. Im Netz habe ich aber auch schon Beispiele mit 100×100 Pixel entdeckt?! Die heutigen Browser scheinen fast mit sämtlichen Grössen klarzukommen und skalieren es im Endeffekt einfach auf das gewünschte Mass.

Jedenfalls habe ich meine 48×48 px grosse (oder halt eben kleine) Datei entsprechend bearbeitet und schlussendlich als PNG-File gespeichert. Anschliessend musste ich das PNG-Bildchen online (gibt verschiedene Anbieter) ins ICO-Format konvertieren lassen. Ein Favicon sollte nämlich im Idealfall als ICO File gespeichert werden. In der Praxis funktionieren aber auch PNG und JPG, sofern man die Dateiendung schlussendlich von .png oder .jpg in .ico ändert. Nichtsdestotrotz ist dies nicht zu empfehlen. 😉 ICO soll es sein!
Schlussendlich musst du das Icon nur noch ins Hauptverzeichnis deiner Webseite speichern.

Mein neues Favicon sieht übrigens so aus:

In der Praxis sieht dies dann folgendermassen aus (oben links in der Registerkarte):

Favicon und WordPress

Deine Webseite basiert zufälligerweise auf WordPress? Dann hast du je nach Theme sogar die Möglichkeit im “Customizer” das entsprechende Favicon hochzuladen. Das ist quasi die einfachere Variante, ohne via FTP auf den Webserver zugreifen zu müssen. Sofern die Möglichkeit im Customizer nicht gegeben ist, gehst du halt den bereits vorgestellten Weg mit dem Hauptverzeichnis. 😉

Neues Favicon wird nicht angezeigt

Hast du endlich dein Favicon für deine Webseite erstellt und gemäss meiner Anleitung hochgeladen, sollte das Symbol natürlich auch angezeigt werden. Doch manchmal braucht es dafür noch ein paar Massnahmen.

Ich verwende hauptsächlich Firefox als meinen Standard-Webbrowser. Ein zweiter Browser in Form von Edge ist lediglich als Absicherung beziehungsweise zur Überprüfung bei gewissen Fehlern in Verwendung.

Auch mein geändertes Favicon wurde weder bei Firefox noch bei Edge angezeigt. Es wurde nach wie vor das alte Favicon geladen. Demzufolge habe ich zuerst mal die Cookies und Webseitendaten gelöscht. Bei Firefox gehst du dafür in die Einstellungen, wählst anschliessend den Menüpunkt Datenschutz & Sicherheit und scrollst dann zu Cookies und Website-Daten. Danach klickst du auf Daten entfernen. Zuletzt habe ich den Browser beendet und erneut gestartet.

Das Favicon wurde immer noch nicht angezeigt. Also habe ich das Favicon direkt aufgerufen. Demzufolge habe ich meine Webseitenadresse in die Adresszeile eingegeben und am Schluss noch /favicon.ico angefügt. Unter diesem Pfad wurde mein Favicon korrekt angezeigt. Anschliessend bin ich wieder auf meine Webseite und habe den Browser gezwungen die Seite neu zu laden (F5 oder CTRL+SHIFT+R). Das hat dann gepasst und ich habe mein aktualisiertes Favicon zu Gesicht gekriegt.