Favicon erstellen – Schritt für Schritt Anleitung

Ein unverwechselbares Aussehen erhält deine Website mit einem Favicon. Dieses kleine Icon wird dir in der oberen Browserzeile angezeigt. Speicherst du dir eine wichtige Website als Favorit in deine Lesezeichen ab, sieht man ebenfalls das Bild.

für Browser ein Icon einrichten

Dieses kleine Symbol hat einen wichtigen Wiedererkennungswert, wie ich finde. Zudem empfinde ich es bei einer Website-Erstellung wichtig zu beachten, dass dieses Icon erstellt wurde und gut sichtbar in jedem Fenster eines Browsers angezeigt wird. Dazu teste ich auch während der Website-Erstellung einzelne Browser (wie Chrome, Firefox, Safari, Internet-Explorer, Bing oder den Windows 10 internen von Microsoft, „Edge“) durch, um zu sehen, wie es angezeigt wird. Alternativ falls es nicht angezeigt wird, die Website im „Facebook Debugger“ durch die Fehlerbehebung durchlaufen lassen.

Quadratisch ansprechend – Icon erstellen

Das Icon-Bild ist in der Größe von 16 x 16 Pixel klein. Um es gut sichtbar und in hoher Qualität im Browser-Tab zu platzieren, verwende ich gerne die Masse 32 x 32 Pixel und achte darauf, dass es möglichst ein Symbol ist, aus dem das Bild besteht. Also nicht allzu viele kleine Details, die so nicht sichtbar sind.

Mit dem Hilfswerkzeug von http://www.favicon-generator.org/ wird das Bild mit der Endung .jpg oder .png umgewandelt in das kleinere Format und erhält die Endung .ico.

Dieses neu erstellte Favicon lädst du im Backend von WordPress hoch. Nun liegt es am Server deines Webhosters.

Im letzten Schritt positionierst du das Favicon / Icon im Theme. Ein Theme kann man als Programmierer selbst codieren oder setzt ein bestehendes „Rahmengerüst“ farblich, textlich und grafisch an die eigenen Bedürfnisse und Logo-Vorgaben um (dabei kann ich dir gerne behilflich sein).

icon hochladen - Favicon erstellen
In WordPress integrierst du das Icon unter „Design“ -> „Seitenoptionen“ -> „Logo“ (variiert je nach gewähltem WordPress Theme).

Icon hochladen – mach deine Website in der Browseransicht schön

Meist findest du im Dashboard von WordPress unter „Design“ ► „Theme Optionen“ ► im Reiter „Logo“ die Möglichkeit, das Favicon hochzuladen. Ab dann ist es quasi im Webspace und dem von dir „angemieteten Raum im Internet“. Bitte das Speichern nicht vergessen!

Nach einem Drücken der Taste F5 bei Windows (bei Mac „cmd + R“) erscheint das Favicon im Browser-Tab.

Weitere Beiträge vertiefen das Thema „Website“:

Webseite erstellen – mit einem Vergleich von den Versionen WordPress.org gegenüber WordPress.com

Du bist in all deinen Tätigkeiten nicht allein und kannst dir Unterstützung und Hilfe holen.

 

Favicon erstellen – Schritt für Schritt Anleitung
Markiert in:                 

Kerstin Paar

Als "Socialmediakerstin, die mit WordPress" unterstütze ich Solo-Unternehmerinnen und Selbständige in ihren Marketingtätigkeit. Mit eigener Website und Blog im Netz sichtbar zu sein. Über Einzelcoachings oder E-Mail-Services mache ich aufmerksam, auf leicht verständliche Art, welche Vorzüge soziale Medien im Marketingmix bringen. Die Schaltzentrale und das Herzstück im Marketing ist eine performante Website. Seit 2011 bin ich in sozialen Netzwerken als Beraterin tätig. Mit anschließender Zertifizierung zur Online-Marketing-Managerin unterstütze ich Unternehmen der Energiewirtschaft, Coaches, Autoren und Selbständige. Ein Herzensprojekt von mir ist das Rad-Reiseblog Sonnenfernweh. Dieses berichtet zu Radtouren aus der Lüneburger Heide und deutschlandweit, nachhaltig unterwegs. Im Mai 2018 fuhr ich mit dem Fahrrad quer durch Deutschland. Auf dem Blog berichtete ich darüber.