Welche Favicons sollte man einbauen und wofür braucht man eigentlich diese Favicons?
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