Post

Favicon in Jekyll + Chirpy einbinden

Favicons mit Jekyll und Chirpy

Posted Updated
Preview Image
By Mattek
views 1 min read

Motivation: Favicon wird nicht angezeigt

Ich hatte das Problem, das mein favicon im Mozilla nicht angezeigt wurde - in Edge und Chrome jedoch schon. Der Schlüssel zum Erfolg war das aufmerksame Lesen (RTFM) und Verarbeiten der Dokumentation. Die relevanten Informationen habe ich hier zusammengefasst - falls der geneigte Leser das gleiche Problem haben sollte :smile: .

Favicon Basics

Für die Darstellung eines Favicons im Browser sind folgende Schritte abzuarbeiten:

  • 512x512px Image bereitstellen
  • hochladen zu https://realfavicongenerator.net
  • download der favicon.zip
  • ZIP auspacken und ins favicons Verzeichnis der Jekyll Seite entpacken

Favicon mit Jekyll und Chirpy

Die Einrichtung des Favicons für eine Jekyll-Seite mit Chirpy Theme wird auf der Seite https://chirpy.cotes.page/posts/customize-the-favicon/ ziemlich gut erklärt.

Die Schritte auf der Seite https://realfavicongenerator.net sind sehr gut dargestellt.

Wichtig ist, auch den Hinweis “Insert the following code in the <head> section of your pages:” zu befolgen.

1
2
3
4
5

 <link rel="icon" type="image/png" href="/assets/img/favicons/./favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/svg+xml" href="/assets/img/favicons/./favicon.svg" />
<link rel="shortcut icon" href="/assets/img/favicons/./favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicons/./apple-touch-icon.png" />
<link rel="manifest" href="/assets/img/favicons/./site.webmanifest" />

WICHTIG: Dieser Code muß in die Datei _includes/favicons.html eingefügt bzw. ergänzt werden.

P.S.: Mein Problem wurde dadurch gelöst.

homepage, jekyll, chirpy
homepage jekyll chirpy
This post is licensed under CC BY 4.0 by the author.