Table of Contents

Background

While setting this up blog, I had issues changing the favicons for my website. I tried a web search of jekyll blog how to change favicon for guides on how to change the favicons for pages hosted through github pages. Of the guides from the search, many recommended using RealFaviconGenerator.

Following The Guide from RealFaviconGenerator

I followed the instructions on the generator and uploaded my icon.

Favicon I Prepared For My Blog

After adjusting the previews for each platform, I changed the following generator options.

  1. Path
  2. Version/Refresh

Changing Path

Fastpages uses Jekyll as the site generator. By default, RealFaviconGenerator has the favicon.ico and other platform specific files in the root of your directory. Fastpages has it configured such favicon file in the /images folder. To make it easier to see, I linked my directory/github. For my setup, I made a separate favicon folder to make it more organized and selected the second option of

I cannot or I do not want to place favicon files at the root of my web site. Instead I will place them

Path Settings

Version/Refresh

Since I had shared my an earlier version of my blog to other people, I had to change my setting to the second option

The web site is already in production and many people already visited it. I want returning visitors to see my new favicon, not the old one.

Version Settings

Adjustments to RealFaviconGenerator's Instructions

After changing the settings, you can generate the favicons for installation. Download the package by clicking the blue Favicon package button. Make sure to have the directory match the configuration you set in the Changing Path section.

RealFaviconGenerator recommends copying the html section generated by the page in the head.htmlfile.

The following section is what was generated for my blog

<link rel="apple-touch-icon" sizes="180x180" href="https://progressedd.github.io/blog/images/favicons/apple-touch-icon.png?v=Gv6BXY9gr5">
<link rel="icon" type="image/png" sizes="32x32" href="https://progressedd.github.io/blog/images/favicons/favicon-32x32.png?v=Gv6BXY9gr5">
<link rel="icon" type="image/png" sizes="16x16" href="https://progressedd.github.io/blog/images/favicons/favicon-16x16.png?v=Gv6BXY9gr5">
<link rel="manifest" href="https://progressedd.github.io/blog/images/favicons/site.webmanifest?v=Gv6BXY9gr5">
<link rel="mask-icon" href="https://progressedd.github.io/blog/images/favicons/safari-pinned-tab.svg?v=Gv6BXY9gr5" color="#5bbad5">
<link rel="shortcut icon" href="https://progressedd.github.io/blog/images/favicons/favicon.ico?v=Gv6BXY9gr5">
<meta name="msapplication-TileColor" content="#603cba">
<meta name="msapplication-config" content="https://progressedd.github.io/blog/images/favicons/browserconfig.xml?v=Gv6BXY9gr5">
<meta name="theme-color" content="#ffffff">

For our blog generated with FastPages and Jekyll, I found it easier to place it in the custom-head.html found in /_includes/custom-head.html.

Final Steps

Once you have extracted your favicon package and modified your head html, make sure to commit your changes to Github. To test if the changes went through, you can either visit your website or use the Favicon checker.