f.weber/jekyll-theme-chirpy
Template
1
0
Fork 0
mirror of https://github.com/cotes2020/jekyll-theme-chirpy.git synced 2025-12-18 05:41:31 +00:00
Code Issues Packages Releases Activity

Simplify the favicons

Browse Source
This commit is contained in:
Cotes Chung
2021-04-29 19:50:23 +08:00
parent a4dc39f70e
commit 6d254af55f
38 changed files with 68 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
_posts/2019-08-11-customize-the-favicon.md
View File

@@ -4,36 +4,34 @@ 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.
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 need to replace them with your own. The following sections will guide you how to create and replace the default favicons.
With 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.
## Generate the favicon
![upload-image](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190811/upload-image.png)
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 button <kbd>Select your Favicon image</kbd> to upload your image file.
Click button <kbd>Create Favicon</kbd> and wait a moment for the website to generate the icons of various sizes automatically.
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-icons](https://cdn.jsdelivr.net/gh/cotes2020/chirpy-images/posts/20190811/download-icons.png){: width="600"}
## Download & Replace
Download the generated package, unzip and delete the following two from the extracted files:
- browserconfig.xml
- manifest.json
- `browserconfig.xml`
- `site.webmanifest`
Now, copy the remaining image files (`.PNG` and `.ICO`) from the extracted `.zip` file to cover the original files in the folder `assets/img/favicons/`.
Now, copy the remaining image files (`PNG` and `ICO`) to cover the original files in the folder `assets/img/favicons/` of your Jekyll site.
The following table helps you understand the changes to the icon file:
The following table will helps you understand the changes to the favicon files:
> ✓ means keep, ✗ means delete.
| File(s) | From Favicon & App Icon Generator | From Chirpy |
| File(s) | From Online Tool | From Chirpy |
|---------------------|:---------------------------------:|:-----------:|
| `*.PNG` | ✓ | ✗ |
| `*.ICO` | ✓ | ✗ |
| `browserconfig.xml` | ✗ | ✓ |
| `manifest.json` | ✗ | ✓ |
| `site.webmanifest` | ✗ | ✓ |
> Note: ✓ means keep, ✗ means delete.
The next time you build the site, the icon will be replaced with a customized edition.
The next time you build the site, the favicon will be replaced with a customized edition.