krata/_posts/2019-08-11-customize-the-fa...

---
title: Customize the Favicon
author:
  name: Cotes Chung
  link: https://github.com/cotes2020
date: 2019-08-11 00:34:00 +0800
categories: [Blogging, Tutorial]
tags: [favicon]
---

The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`. 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**](https://realfavicongenerator.net/) and click the button <kbd>Select your Favicon image</kbd> 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 <kbd>Generate your Favicons and HTML code</kbd> to generate the favicon.

## Download & Replace

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

- `browserconfig.xml`
- `site.webmanifest`

Now, copy the remaining image files (`PNG` and `ICO`) to cover the original files in the folder `assets/img/favicons/` 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`             | ✓                                 | ✗           |
| `browserconfig.xml` | ✗                                 | ✓           |
| `site.webmanifest`  | ✗                                 | ✓           |

> Note: ✓ means keep, ✗ means delete.

The next time you build the site, the favicon will be replaced with a customized edition.
Import the tutorial. 2019-09-30 14:38:58 +02:00			`---`
Update the post meta design. 2020-04-06 20:11:50 +02:00			`title: Customize the Favicon`
Add a link to the author of the post 2021-12-04 19:29:40 +01:00			`author:`
			`name: Cotes Chung`
			`link: https://github.com/cotes2020`
Import the tutorial. 2019-09-30 14:38:58 +02:00			`date: 2019-08-11 00:34:00 +0800`
			`categories: [Blogging, Tutorial]`
			`tags: [favicon]`
			`---`

Correct grammar and spelling in docs & issue templates Also improve the Markdown code style 2021-10-04 11:53:07 +02:00			The [favicons](https://www.favicon-generator.org/about/) of [Chirpy](https://github.com/cotes2020/jekyll-theme-chirpy/) are placed in the directory `assets/img/favicons/`. You may want to replace them with your own. The following sections will guide you to create and replace the default favicons.
Import the tutorial. 2019-09-30 14:38:58 +02:00
Simplify the favicons 2021-04-29 13:50:23 +02:00			`## Generate the favicon`
Import the tutorial. 2019-09-30 14:38:58 +02:00
Correct grammar and spelling in docs & issue templates Also improve the Markdown code style 2021-10-04 11:53:07 +02:00			`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](https://realfavicongenerator.net/) and click the button <kbd>Select your Favicon image</kbd> to upload your image file.`
Import the tutorial. 2019-09-30 14:38:58 +02:00
Simplify the favicons 2021-04-29 13:50:23 +02:00			`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 <kbd>Generate your Favicons and HTML code</kbd> to generate the favicon.`
Import the tutorial. 2019-09-30 14:38:58 +02:00
Simplify the favicons 2021-04-29 13:50:23 +02:00			`## Download & Replace`
Import the tutorial. 2019-09-30 14:38:58 +02:00
Update docs. 2019-11-16 16:12:26 +01:00			`Download the generated package, unzip and delete the following two from the extracted files:`
Update the tutorial. 2019-10-10 18:06:18 +02:00
Simplify the favicons 2021-04-29 13:50:23 +02:00			- `browserconfig.xml`
			- `site.webmanifest`
Remove the image files 2021-01-09 15:31:43 +01:00
Update the tutorials 2021-09-29 14:44:00 +02:00			Now, copy the remaining image files (`PNG` and `ICO`) to cover the original files in the folder `assets/img/favicons/` of your Jekyll site. If your Jekyll site doesn't have this directory yet, just create one.
Import the tutorial. 2019-09-30 14:38:58 +02:00
Correct grammar and spelling in docs & issue templates Also improve the Markdown code style 2021-10-04 11:53:07 +02:00			`The following table will help you understand the changes to the favicon files:`
Add more details to the tutorial of `customize favicon` 2020-10-15 08:55:14 +02:00
Simplify the favicons 2021-04-29 13:50:23 +02:00			`\| File(s) \| From Online Tool \| From Chirpy \|`
Add more details to the tutorial of `customize favicon` 2020-10-15 08:55:14 +02:00			`\|---------------------\|:---------------------------------:\|:-----------:\|`
			\| `*.PNG` \| ✓ \| ✗ \|
			\| `*.ICO` \| ✓ \| ✗ \|
			\| `browserconfig.xml` \| ✗ \| ✓ \|
Simplify the favicons 2021-04-29 13:50:23 +02:00			\| `site.webmanifest` \| ✗ \| ✓ \|
Add more details to the tutorial of `customize favicon` 2020-10-15 08:55:14 +02:00
Simplify the favicons 2021-04-29 13:50:23 +02:00			`> Note: ✓ means keep, ✗ means delete.`
Add more details to the tutorial of `customize favicon` 2020-10-15 08:55:14 +02:00
Simplify the favicons 2021-04-29 13:50:23 +02:00			`The next time you build the site, the favicon will be replaced with a customized edition.`