How to add a favicon to your jekyll site

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

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.

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:

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.

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" | relative_url }}"> 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.

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. 😉

Follow me on Twitter, on GitHub (where I made a summary of the famous YDKJS series), and check out my website slowpacedcoding.com for more articles like this.

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. 🤗🤓