Ein Favicon in WordPress hinzufügen

Ein Favicon ist das kleine Bildchen welches neben dem Webseiten-Titel und neben dem URL im Browser erscheint. Wie kann man dieses Favicon eigentlich einer WordPress-Webseite hinzufügen?

favicon-wordpress

Wozu brauche ich ein Favicon?

Das Favicon macht den Eindruck einer Webseite wertiger und sorgt dafür, dass der Wiedererkennungswert der Marke etwas gesteigert wird. Zudem erleichtert es dem User das Surfen, der oftmals mehrere Tabs im Browser offen hat und somit auf einen Blick sieht, welcher Tab denn der Tab der Webseite ist.

Wie erstellt man ein Favicon?

Das Favicon ist ein simples quadratisches Bildchen mit 32 x 32px Maßen. Gespeichert idealerweise verlustfrei als 24 Bit PNG. Wenn man auch für alte Browser den Support aufrecht erhalten möchte, kann man auch ein 16 x 16px großes .ico-File erstellen.

Wie fügt man ein Favicon in WordPress-Webseiten ein?

Das Favicon fügt man in der header.php im Themeordner ein:

<link rel="icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" type="image/png" />
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.png" type="image/png" />

oder eben als .ico:

<link rel="icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" type="image/x-icon" />

Alternativ kann man auch das Plugin All in One Favicon verwenden, wenn man sich nicht zutraut die header.php zu editieren.

Letzte Version vom 13. Mai 2015 von Netzgänger
Jetzt WordPress Newsletter in dein Postfach

Melde dich jetzt für meinen Newsletter an und du erhältst regelmäßig Tipps und Tricks zu WordPress in dein Postfach. Natürlich kannst du ihn jederzeit abbestellen.


11 Kommentare

  1. In der Regel reicht es aus das Favicon als .ico Datei in die Root Directory mit dem Namen favicon.ico hochzuladen. Die meisten Browser erkennen es automatisch und man kann sich das anlegen eines Child Themes o.ä. sparen

  2. Stefan Pabst sagt:

    Besten Dank, ausnahmsweise mal nicht auf den stackoverflow Link geklickt und gefühlt noch schneller zur gewünschten Lösung gekommen als sonst.

    Und ein frohes Neues noch!

  3. Romana sagt:

    Hallo! Ich hätte auch gern ein favicon und bin auf deine Seite gestoßen. Leider sagen mir diese Anweisungen „Lade dies und jenes in header.php hoch“ genau GAR NICHTS!
    Ich finde weder einen Themeordner noch sonst irgendwas,… bin blutiger Anfänger.

    Kannst du mir weiter helfen? Von Anfang an?
    Liebe Grüße,
    Romana

    • Hallo Romana,

      ich bau dir das gerne ein. Als Dienstleister versteht sich. Wenn dir header.php und so nichts sagt, dann habe ich auch ein mulmiges Gefühl, wenn ich dich aus der Ferne anleite.

      Gruß
      René

  4. mine321 sagt:

    Hi, vielen dank für die Anleitung, sauberer kann man es nicht erklären

  5. Johannes sagt:

    Hallo, vielen Dank für die Anleitung. Ich habe mich aber nicht getraut und habe das Plugin ausprobiert. Damit lässt sich auch wunderbar ein Favicon setzen. Danke 🙂

  6. threecubes sagt:

    Das Favicon – leider wird es oft vergessen und aus SEO-Sicht ist auch wichtig eines zu haben. Danke für die Tipps im Beitrag.

  7. Definio sagt:

    Vielen Dank für die Anleitung. Wird sofort umgesetzt!!!

  8. Danke für den tollen, hilfreichen Artikel.Ich bin eine richtige Anfängerin und hab wieder viel dazu gelernt, dank dir!
    Lieben Gruß

  9. Klasse Anleitung. Genau das, was ich momentan gesucht habe.

  10. Lisa sagt:

    Hi, danke für die gute Anleitung. Die ist Verständlich geschrieben und leicht nachvollziehbar.
    Danke und Gruß Lisa

Kommentar schreiben

Mit Absenden deines Kommentars erklärst du dich mit der Verarbeitung deiner hier angegebenen Daten einverstanden (Datenschutzerklärung). Diese werden nur zur Verwaltung der Kommentare verwendet und keinem anderen Zweck zugefügt. Du kannst jederzeit per E-Mail an info@netz-gaenger.de der Speicherung deiner Daten widersprechen.

* Notwendige Angaben

Netzgänger Webdesign | Rohrersmühlstraße 22 in Schwabach | Bayern
Kontakt: info@netz-gaenger.de
↑ oben
Inhalt