web/_posts/2019-08-11-customize-the-favicon.md

---
title: Customize the Favicon
author: Cotes Chung
date: 2019-08-11 00:34:00 +0800
categories: [Blogging, Tutorial]
tags: [favicon]
toc: false
---

In [**Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/), the image files of [Favicons](https://www.favicon-generator.org/about/) are placed in `assets/img/favicons/`. You may need to replace them with your own. So let's see how to customize these Favicons.

Whit a square image (PNG, JPG or GIF) in hand, open the site [*Favicon & App Icon Generator*](https://www.favicon-generator.org/) and upload your original image.

![upload-image]({{ "/assets/img/sample/upload-image.png" | relative_url }})

Click button <kbd>Create Favicon</kbd> and wait a moment for the website to generate the icons of various sizes automatically.

![download-icons]({{ "/assets/img/sample/download-icons.png" | relative_url }})

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

- browserconfig.xml
- manifest.json
 
Now, copy the rest image files (`.PNG` and `.ICO`) to cover the original one in folder `assets/img/favicons/`.

Lastly, don't forget to rebuild your site so that the icon becomes your custom edition.
Import the tutorial. 2019-09-30 15:38:58 +03:00			`---`
Update the post meta design. 2020-04-06 21:11:50 +03:00			`title: Customize the Favicon`
			`author: Cotes Chung`
Import the tutorial. 2019-09-30 15:38:58 +03:00			`date: 2019-08-11 00:34:00 +0800`
			`categories: [Blogging, Tutorial]`
			`tags: [favicon]`
			`toc: false`
			`---`

Update docs. 2019-11-16 18:12:26 +03:00			In [Chirpy](https://github.com/cotes2020/jekyll-theme-chirpy/), the image files of [Favicons](https://www.favicon-generator.org/about/) are placed in `assets/img/favicons/`. You may need to replace them with your own. So let's see how to customize these Favicons.
Import the tutorial. 2019-09-30 15:38:58 +03:00
			`Whit a square image (PNG, JPG or GIF) in hand, open the site [Favicon & App Icon Generator](https://www.favicon-generator.org/) and upload your original image.`

Updated Docs. 2020-01-04 12:05:41 +03:00			`![upload-image]({{ "/assets/img/sample/upload-image.png" \| relative_url }})`
Import the tutorial. 2019-09-30 15:38:58 +03:00
Update Docs. 2019-10-11 19:46:12 +03:00			`Click button <kbd>Create Favicon</kbd> and wait a moment for the website to generate the icons of various sizes automatically.`
Import the tutorial. 2019-09-30 15:38:58 +03:00
Updated Docs. 2020-01-04 12:05:41 +03:00			`![download-icons]({{ "/assets/img/sample/download-icons.png" \| relative_url }})`
Import the tutorial. 2019-09-30 15:38:58 +03:00
Update docs. 2019-11-16 18:12:26 +03:00			`Download the generated package, unzip and delete the following two from the extracted files:`
Update the tutorial. 2019-10-10 19:06:18 +03:00
			`- browserconfig.xml`
			`- manifest.json`
Update Docs. 2019-10-11 19:46:12 +03:00
Update docs. 2019-11-16 18:12:26 +03:00			Now, copy the rest image files (`.PNG` and `.ICO`) to cover the original one in folder `assets/img/favicons/`.
Import the tutorial. 2019-09-30 15:38:58 +03:00
Updated Docs. 2020-01-04 12:05:41 +03:00			`Lastly, don't forget to rebuild your site so that the icon becomes your custom edition.`