How to add a favicon to your jekyll site

Step 1: put your icon into your jekyll site folder, and name it favicon.png

favicon in jekyll folder

Step 2: find your bundle theme folder

  1. Use terminal to navigate to your jekyll folder, (for example, my folder’s name is:slowpacedcoding), then key in bundle show minima. Where minima is the name of the jekyll theme you installed.

    terminal

  2. If you are on a mac, copy that directory, then right click on finder, select “Go to folder”,then paste the directory in, then click “Go”. If there isn’t error showed up, here is the folder you should see:

    jekyll theme folder

  3. Navigate to _includes , copy head.html.

Step 3: Edit jekyll plugins.

  1. Go to your jekyll folder and create a new folder that is called: _includes, then paste that head.html into it.

  2. Open config.yml file in your jekyll folder, under plugins: add in one more line: - jekyll-seo-tag.

    seo-tag

Step 4: Edit your head.html file

Navigate to your own jekyll folder, open the head.html file. Under <link rel="stylesheet" href="/assets/main.css"> add in this line of code:

<link rel="shortcut icon" type="image/png" href="favicon.png">

Up till now, everything is done, and if you run jekyll serve in terminal, you should be able to see the favicon appear by the name of your site.

my site, my favicon

The last thing you need to do is commit everything to your github repo. And I believe that if you happened to search for this article, you’ve already had an idea how to do that. 😉


If you want to protect your online privacy and give VPN a try, consider using my affiliate link where you and I both can get one month of super fast VPN free of charge. 🤗 🤓