INHALT

    Ihre neue WordPress Webseite ist fertig und nun kümmern Sie sich um die letzten Feinheiten wie beispielsweise das Favicon. Dieses Symbol wird in den Tabs und Lesezeichen Ihrer Nutzer dargestellt und sollte aus Grünen der Usability und Vollständigkeit eingefügt werden. Doch wie erstellen Sie ein Favicon und wie ändern Sie ihr bestehendes Symbol in WordPress?

    Logos eignen sich ideal

    Als erstes sollten Sie sich darüber Gedanken machen welche Grafik Sie als Favicon verwenden wollen. Die einfachste Lösung hierfür ist das Verwenden des eigenen Logos. Je nach Größe und Format ist das problemlos möglich. Eine andere beliebte Variante ist die Nutzung von Abkürzungen und Buchstabenkombinationen. So wird aus homepage.info beispielsweise „hp“. Da Favicons im Normalfall lediglich eine Größe von 32 x 32 Pixeln haben sollten Sie darauf achten, nicht zu viele Details unterbringen zu wollen da diese später nicht mehr erkennbar sind und den Gesamteindruck stören. Ein Favicon erstellen Sie am einfachsten in einem Bildbearbeitungsprogramm wie Adobe Photoshop oder der kostenlosen Alternative GIMP. Erstellen Sie dort eine neue Datei mit den entsprechenden Ausmaßen und skalieren Sie ihr Logo oder Ihren Text, so dass die Grafik in die Fläche passt. Speichern Sie Ihr Icon dann entweder als 24 Bit PNG oder altmodisch und abwärtskompatibel als .ico Datei. Ältere Browser stellen nur Favicons im Format .ico dar. Deren Marktanteil schrumpft aber bekanntlich jährlich. Um .ico Dateien in Photoshop zu speichern benötigen Sie ein kostenloses Plug-In. Sie finden die nötigen Dateien hier. Obwohl Sie auf der Webseite keine spezielle Datei für die aktuellste Photoshop Version CC finden ist das Plug-In kompatibel. Laden Sie die Erweiterung herunter und verschieben Sie die Datei „ICOFormat.8bi“ nach C:\Programme\Adobe\Adobe Photoshop XXX\Plug-Ins\. Alternativ können Sie Ihr Favicon auch als PNG oder JPEG speichern und mithilfe eines Online-Tools zu .ico konvertieren. Eine beliebte Webseite dafür ist icoconverter.com. Wenn Sie eine genauere Anleitung zur grundsätzlichen Funktion von Photoshop benötigen, lesen Sie unseren „Photoshop für Webmaster – erste Schritte bei der Bildbearbeitung“ Artikel.

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

    Jetzt da Sie ihr Favicon erstellt haben muss das Symbol noch auf Ihrer Webseite eingebunden werden. Wenn Ihre Seite auf Joomla basiert finden Sie in unserem Favicon in Joomla einfügen Artikel weitere Informationen. Für alle WordPress User geht es hier weiter.

    Zuerst sollten Sie Ihr Icon per FTP in den Root-Ordner Ihrer WordPress Installation verschieben. Achten Sie darauf, dass der Name Ihrer Datei mit dem Code übereinstimmt. Eine weitere Option ist der Upload über das Mediensystem von WordPress. Kopieren Sie dann die URL heraus und ersetzen „favicon.png“ im Code mit ebendieser. Das Favicon muss dann im Theme-Header mit folgendem Code platziert werden:

    Für Dateityp .ico:

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    Für Dateityp .png:

    <link rel="icon" type="image/png" href="favicon.png" />

    Sie finden den Theme-Header unter wp-content/themes/ihr-aktives-theme/header.php. Alternativ können Sie die Datei im WordPress Editor anpassen. Wählen Sie dafür im Backend von WordPress den Menüpunkt „Design“ und dann „Editor“. Auf der rechten Seite finden Sie den Theme Header. Klicken Sie einmal darauf und platzieren Sie den Code zwischen den beiden <head> Tags.

    Als weitere Alternative können Erweiterungen aus dem WordPress Plugin-Verzeichnis genutzt werden. Sinnvolle Optionen sind „Favicon by RealFavicon Generator“ oder „All in One Favicon“.

    Wie fügt man ein Favicon bei Joomla ein?

    Ein weiteres sehr beliebtes Content Management System ist Joomla. Um Ihr Favicon hier einzufügen reicht es normalerweise, die erstellte .ico-Datei unter folgendem Pfad abzulegen: /joomla/templates/-ihr-aktives-template.

    Nachdem Sie den Cache Ihrer Webseite sowie Ihres Browsers geleert haben, sollten Sie nun das Favicon in Ihrem Browser erkennen können. Sollte das Favicon auch nach der Löschung des Caches nicht angezeigt werden, sollten Sie die index.php Datei Ihres Templates überprüfen und nach dem Code-Schnipsel <link rel="shortcut icon" href=“ein-verzeichnis-auf-ihrem-server/favicon.ico> Ausschau halten. Verschieben Sie Ihr Favicon in das angegebene Verzeichnis und überprüfen Sie erneut, ob das Bild angezeigt wird. Alternativ können Sie auch einfach den angegebenen Pfad ändern und Ihr Favicon im Template-Ordner lassen.

    Ein kinderleichtes Muss

    Favicons gehören zu einer erfolgreichen Webseite einfach dazu. Wie Sie sehen, ist das Einrichten des Symbolbilds keine wirkliche Herausforderung. Wir empfehlen Ihnen daher, sich kurz Zeit zu nehmen um das Icon einzubinden. Ihre Besucher werden es Ihnen danken.