fbpx

Archiv Mai 2019

Welche Favicons sollte man einbauen und wofür braucht man eigentlich diese Favicons?

FAVICONS richtig einbinden

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

Banner von Profies oder selbsterstellte Banner für Facebook Ads?

Neulich habe ich mir für knapp 150 EUR Profi-Banner bestellt. Die Banner sehen wirklich gut aus.

Hier ist eins davon:

Banner für Facebook Ad - Variante 1
Banner für Facebook Ad – Variante 1

Dann habe ich selbst mit meinen „kreativen“ Kenntnissen ein Banner innerhalb von 5 Minuten erstellt.

Hier ist mein Banner:

Banner für Facebook Ad - Variante 2
Banner für Facebook Ad – Variante 2

Jetzt darfst du raten, welches Banner die bessere Facebook-Relevanz hat und welches Banner mehr Klicks erzeugt.

Bin sehr auf deine Meinung gespannt. 😎

Ich wünsche dir stets die beste Facebook-Relevanz!

Anatolij