Setting the favicon

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.

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/


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.