Setting the favicon


The default favicon just looks bland.

You can upload a favicon.ico to the root directory of your jekyll blog, but let’s try to do a little better.



The image I decided to go with is Tux in Android Robot Costume 2 by Whidden. They indicated they were making it available for others to use and edit, so…

Favicon sample


Once I had an image to use, I went to the Favicon Generator and gave it the image. It gives you some configuration options, like which compression and scaling options to use.

It gives you both a zip file and an html snippet.

  • Extract the zip into assets/favicon
  • Copy the html snippet into a new _includes/favicon.html

edit favicon.html

Since we are not dropping all those images into the root directory, we need to tweak the favicon.html from the previous step. Everywhere you see href="/ replace it with href="/assets/favicon/ to match our chosen directory.

copy head.html

This step may be different for your theme. I’m using hydejack. Your mileage may vary.

cat _config.yml | grep theme

shows theme: jekyll-theme-hydejack

bundle show jekyll-theme-hydejack

shows ~/.rbenv/versions/2.3.0/lib/ruby/gems/2.3.0/gems/jekyll-theme-hydejack-6.6.1

More importantly:

grep -lr favicon `bundle show jekyll-theme-hydejack`

Shows ~/.rbenv/versions/2.3.0/lib/ruby/gems/2.3.0/gems/jekyll-theme-hydejack-6.6.1/_includes/head.html

So I copy that file.

cp ~/.rbenv/versions/2.3.0/lib/ruby/gems/2.3.0/gems/jekyll-theme-hydejack-6.6.1/_includes/head.html _includes/

edit head.html

Now that we have a copy, we need to modify it to load our newly created favicon.html

Replace these lines (again, in the hydejack theme):

<link rel="apple-touch-icon" href="{{ 'apple-touch-icon.png' | relative_url }}">
<!-- Place favicon.ico in the root directory -->

with this:

{% include favicon.html %}

build it

bundle exec jekyll serve`

Testing it out…

After loading your page, you should see your new icon in the tab. If you have a well read blog, the generator has options to deal with forcing a refresh.

Update: Alternative Generator

I was contacted by a reader, Olivia. Let me share the original message.

Hello there ,

I was using the favicon generator tool you mentioned on your page here:

While does a good job, it only allows you to create favicons from pictures that are up to 2 MB in size.

After some exploring I found this other tool and I wanted to suggest you show it along that one.

this tool allows you to create favicons from pictures that are up to 5 MB from either JPG, PNG or GIF or even from a gallery!

In hope I helped back,


I decided to try the recommended websiteplanet generator with the same image I used above.

After you drop your image in, make sure to click on the Settings gear to choose All sizes, please!. Otherwise you will end up with a single 16x16 image.

Let’s compare the results of the two.

This was generated by websiteplanet:

 2173 favicon-32x32.png
 1002 favicon-16x16.png
11030 apple-touch-icon-96x96.png
 7757 apple-touch-icon-76x76.png
 6989 apple-touch-icon-72x72.png
 5273 apple-touch-icon-60x60.png
 5088 apple-touch-icon-57x57.png
29207 apple-touch-icon-180x180.png
22403 apple-touch-icon-152x152.png
20799 apple-touch-icon-144x144.png
15316 apple-touch-icon-120x120.png
14079 apple-touch-icon-114x114.png
32356 android-icon-192x192.png

And this is from the original generator (from my original usage):

 1061 favicon-32x32.png
  531 favicon-16x16.png
  246 browserconfig.xml
 9854 apple-touch-icon.png
15193 android-chrome-256x256.png
10171 android-chrome-192x192.png
 4657 safari-pinned-tab.svg
 5448 mstile-150x150.png
  403 manifest.json
15086 favicon.ico

As you can see, there are quite a few differences. The new site has many more apple-touch-icon entries while having less of the android and browser specific ones.

I will say that the configuration for the original one is also a lot more complicated.

Links to both are provided on this page so you can use whichever is more appropriate for your use case.

Thank you, Olivia!

© 2019. All rights reserved.