Ein Favicon erstellen und einbinden ist leicht gemacht, wenn man weiß worauf man achten muss. Dieser Artikel erklärt die wichtigsten Schritte.
Was ist ein Favicon?
Ein Favicon ist das kleine Symbol links neben dem Titel der Website im Browsertab. Außerdem wird ein Favicon mit angezeigt wenn man eine Website in den Lesezeichen abspeichert. Bei einem professionellen Webauftritt darf das Favicon nicht fehlen.
Mit dieser kleinen Grafik kann man seine Marke stärken. Man kann z.B. das Logo als Favicon benutzen. Bei der mobilen Suche wird das Favicon auch in den Suchergebnissen angezeigt, der Wiedererkennungswert kann dann für mehr Klicks sorgen.
Favicon erstellen
Für die Erstellung der Grafik gibt es verschiedene Möglichkeiten. Favicons haben das Dateiformat .ico und sollten auch immer als favicon.ico benannt werden. Die Grafik sollte quadratisch sein. Man kann mit Photoshop oder Illustrator arbeiten, aber am einfachsten ist ein Favicon Generator.
Favicon.cc ist ein Favicon Generator bei dem man selber direkt im Browser eine kleine Grafik zeichnen kann oder man lädt ein Bild hoch. Dann kann man sich das Favicon als .ico-Datei runterladen.
Beim Ionos Favicon Generator kann man ebenfalls frei zeichnen oder ein Bild hochladen. Außerdem gibt es einen Buchstabengenerator, dort hat man schon vorgezeichnete Buchstaben.
Auf Favicon.io kann man .png Dateien in .ico Dateien umwandeln, Text zu einem Favicon umwandeln und auch Emojis verwenden.
Favicon einbinden
In WordPress fügt man das Favicon am besten über den Customizer ein. Den Customizer findet man im Menü unter Design. Dann wählt man den Eintrag „Website-Informationen“ und dort befindet sich das Feld wo man sein Favicon ( Website-Icon ) hochladen kann.
Will man das Favicon manuell im HTML-Code einbinden, lädt man zuerst die favicon.ico Datei ins Hauptverzeichnis der Website per FTP hoch. Dann fügt man folgenden Code in den <head> Bereich ein:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">