Was sind Favicons?
Favicons sind kleine Grafikdateien, die für Verknüpfungen
und Lesezeichen verwendet werden. Dabei wird zwischen PC-Browser- und mobilen
Browser, bzw. mobilen Endgeräten unterscheiden.
Wozu sind Favicons
gut?
- Wenn dein Kunde Lesezeichen setzt und du keine
Favicons hat, dann werden bei deinen Kunden leere Grafikflächen oder
Fragezeichen anstatt deinem LOGO angelegt – das ist nicht professionell.
- Das Vorhandensein eines/mehreren Favicons ist
ein von vielen Faktoren, die auch für Google-Ranking einen Einfluss haben.
Fehlen die Icons – dann wird deine Seite nicht so gut von Google bewertet.
Wie kann ich meine
Seite checken, ob ich genug Favicon-Größen verwende?
Dazu kann ich dir den Dienst https://realfavicongenerator.net/
empfehlen. Dort kannst du einfach deine Domain eintragen und das System sagt
dir welche Favicons bei dir fehlen.
Wo kann man einfach und
kostenlos die Favicons erstellen lassen?
Dazu gibt es genug Anbieter im Netz, z.B. der
Favicon-Generator von IONOS:
https://www.ionos.de/tools/favicon-generator
Er generiert zwar nicht alle notwendigen Größen, das lässt
sich aber sehr einfach mit einem beliebigen Grafikeditor schnell erledigen.
Um Favicons für Safari zu erstellen, brauchst du Favicon im
sogenannten SVG Format. Du kannst deine PNG ganz einfach zu SVG z.B. mit diesem
Dienst kostenfrei umwandeln:
https://convertio.co/de/png-svg/
Jetzt hast du alle notwendigen Grafiken und Files für die
Favicons generiert und kannst mit dem Einbauen beginnen.
Wie bindet man
Favicons ein?
Schritt 1:
Generiere alle Favicon-Größen (siehe Punkt oben) und lade diese
generierten Files in das Root Verzeichnis deiner Domain hoch.
Wenn du das gemacht hast, prüfe kurz, ob du die Grafiken
über den Browser aufrufen kannst. Bei mir sieht der Link z.B. so aus: https://www.dietipps.de/favicon-48×48.png
#Beim Klick auf den Link musst du die Grafik sehen können. Wenn beim Klick auf deine URL eine leere Seite kommt, dann prüfe, ob die Grafiken wirklich im ROOT-Verzeichnis abgelegt wurden.
Für „Apple Touch icon“ lege im ROOT-Verzeichnis eine PNG mit folgendem Dateinnamen ab: apple-touch-icon.png
Schritt 2:
Jetzt musst du diesen Code auf deiner Webseite zwischen <head> </head> einbauen:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari.svg" color="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
Das war’s. 😉
Wenn du WordPress nutzt, findest du die notwendige Stelle in
der Datei header.php.
Diese Datei kannst du auch direkt über das Backend von
Wordpress editieren:
Design->Editor.
Rechts unter „Themen-Dateien“ findest du diese PHP-Datei:
Drauf klicken, Code einfügen, Speichern – Fertig!
Nachdem du alle Favicons eingebaut hast, prüfe noch mal die
Einstellungen mit dem Dienst von Realfavicongenerator.
Bei mir sieht es aktuell so aus:
https://realfavicongenerator.net/favicon_checker?protocol=https&site=www.dietipps.de
Ich wünsche dir stets die beste Facebook-Relevanz!
Anatolij
