Favicon als wichtiges Merkmal einer Website
Du hast dich schon immer gefragt, wie man das für viele Websiten charakteristische, kleine Bild neben der Adresszeile deines Browsers in deine Nischenseite einbindet und wozu dies nützlich ist?
Hier erfährst du es!
Ein Favicon (=Favorite Icon) ist ein wichtiges Merkmal einer Website, welches den Wiedererkennungswert erheblich steigert. So taucht das Favicon einer Website unter anderem in den Browser Tabs auf, so dass die Website bei vielen gleichzeitig geöffneten Websites in einem Browserfenster sofort zu finden ist.
Mit den folgenden 3 Schritten erstellst du ein Favicon und bindest es in deine Website ein!
1. Favicon erstellen
Die Darstellung des Favicons erfolgt als 16×16 oder 32×32 Pixel große Grafik. Um deine Grafik in dieses Format zu wandeln kannst du beispielsweise das kostenlose Editor Tool auf www.favicon-generator.de nutzen. Dort lädst du deine gewünschte Grafik hoch und erhältst sofort das ensprechende Favicon angezeigt, welches du kostenlos als ico Datei abspeichern kannst. Außerdem hast du mit dem Favicon Generator die Möglichkeit ohne Hochladen einer Grafik dein Icon zu zeichnen.
2. Ins Hauptverzeichnis deiner Website laden
Damit das Favicon für deine gesamte Website angezeigt wird, lädst du deine ico Datei (Favicon Grafik) in dein Hauptverzeichnis (FTP Verzeichnis) deiner Website hoch. Wie bereits mehrmals erwähnt habe ich ein Webhosting Paket bei All-inkl.com*, das ich uneingeschränkt empfehlen kann. In diesem Fall öffnest du im KAS (=Kundenasministrationssystem) von all-inkl.com das FTP Verzeichnis und lädst dort für deine Website die Favicon Datei hoch (siehe Bilder unten).
3. Code in header.php einsetzen
Zum Schluss trägst du folgenden Code in die header.php deiner Website z.B. nach dem ersten <head> Tag ein, wobei du natürlich die URL deiner Website und den Namen deiner ico Datei (rot markiert) eintragen musst.
<link rel="icon" href="http://nischenseitenprojekt.de/nischenseitenfavicon3.ico" type="image/x-icon">
Hinweis: Die header.php findest du in deinem WordPress Dashboard unter Design -> Editor -> header.php. Den oberen Code kannst du einfach in der header.php Datei z.B. nach dem ersten <head> Tag einfügen.
Das wars auch schon! Hat dir die Anleitung geholfen oder hast du Fragen, dann hinterlasse einfach einen Kommentar.