Setting the favicon

17 Sep 2017 on Jekyll

Motivation
Solution
Testing it out…
Update: Alternative Generator

Motivation

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.

Solution

image

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…

generator

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: malachid.com/blog/2017-09-17-favicon/

While realfavicongenerator.net 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. https://www.websiteplanet.com/webtools/favicon-generator/

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,

Olivia

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:

favicon-32x32.png
favicon-16x16.png
apple-touch-icon-96x96.png
apple-touch-icon-76x76.png
apple-touch-icon-72x72.png
apple-touch-icon-60x60.png
apple-touch-icon-57x57.png
apple-touch-icon-180x180.png
apple-touch-icon-152x152.png
apple-touch-icon-144x144.png
apple-touch-icon-120x120.png
apple-touch-icon-114x114.png
android-icon-192x192.png

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

favicon-32x32.png
favicon-16x16.png
browserconfig.xml
apple-touch-icon.png
android-chrome-256x256.png
android-chrome-192x192.png
safari-pinned-tab.svg
mstile-150x150.png
manifest.json
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!