Customize the Favicon

Posted Aug 10, 2019
By cotes
1 min reading time

The favicons of Chirpy are placed in the directory assets/img/favicons/{: .filepath}. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.

Generate the favicon

Prepare a square image (PNG, JPG, or SVG) with a size of 512x512 or more, and then go to the online tool Real Favicon Generator and click the button Select your Favicon image to upload your image file.

In the next step, the webpage will show all usage scenarios. You can keep the default options, scroll to the bottom of the page, and click the button Generate your Favicons and HTML code to generate the favicon.

Download & Replace

Download the generated package, unzip and delete the following two from the extracted files:

  • browserconfig.xml{: .filepath}
  • site.webmanifest{: .filepath}

And then copy the remaining image files (.PNG{: .filepath} and .ICO{: .filepath}) to cover the original files in the directory assets/img/favicons/{: .filepath} of your Jekyll site. If your Jekyll site doesn’t have this directory yet, just create one.

The following table will help you understand the changes to the favicon files:

File(s) From Online Tool From Chirpy
*.PNG
*.ICO

✓ means keep, ✗ means delete. {: .prompt-info }

The next time you build the site, the favicon will be replaced with a customized edition.


Further Reading
DDD Series - 6 - Summary

In lacus felis, sodales at mattis ac, gravida quis eros. Curabitur pharetra a arcu nec blandit. Aenean pellentesque mi ac mattis ultricies. Pellentesque id eleifend diam. Donec nec leo at dui finibus bibendum et ut nibh. Vestibulum id pharetra risus, et auctor eros. Morbi egestas iaculis convallis. Etiam posuere id sem accumsan dignissim. Morbi varius justo et elementum dictum. Fusce mollis …

Getting Started

Prerequisites

Follow the instructions in the Jekyll Docs to complete the installation of Ruby, RubyGems, Jekyll, and Bundler. In addition, Git is also required to be installed.

Installation

Creating a New Site

There are two ways to create a new repository for this theme:

Sample post

This is just a sample