diff --git a/_includes/favicons.html b/_includes/favicons.html
index 957c933f6..2ca276e8d 100644
--- a/_includes/favicons.html
+++ b/_includes/favicons.html
@@ -5,15 +5,10 @@
{% capture favicon_path %}{{ '/assets/img/favicons' | relative_url }}{% endcapture %}
+
+
+
-
-
{% if site.pwa.enabled %}
{% endif %}
-
-
-
-
-
-
diff --git a/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md
index a3278fa90..66a43e629 100644
--- a/_posts/2019-08-11-customize-the-favicon.md
+++ b/_posts/2019-08-11-customize-the-favicon.md
@@ -10,25 +10,26 @@ The [favicons](https://www.favicon-generator.org/about/) of [**Chirpy**](https:/
## 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 Select your Favicon image to upload your image file.
+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 Pick 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.
+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 Next → to generate the favicon.
## Download & Replace
-Download the generated package, unzip and delete the following two from the extracted files:
+Download the generated package, unzip and delete the following file(s) 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.
+And then copy the remaining image files (`.PNG`{: .filepath}, `.ICO`{: .filepath} and `.SVG`{: .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` | ✓ | ✗ |
+| File(s) | From Online Tool | From Chirpy |
+| ------- | :--------------: | :---------: |
+| `*.PNG` | ✓ | ✗ |
+| `*.ICO` | ✓ | ✗ |
+| `*.SVG` | ✓ | ✗ |
+
> ✓ means keep, ✗ means delete.
diff --git a/assets/img/favicons/android-chrome-192x192.png b/assets/img/favicons/android-chrome-192x192.png
deleted file mode 100644
index a949d2fe5..000000000
Binary files a/assets/img/favicons/android-chrome-192x192.png and /dev/null differ
diff --git a/assets/img/favicons/android-chrome-512x512.png b/assets/img/favicons/android-chrome-512x512.png
deleted file mode 100644
index a0cdd950b..000000000
Binary files a/assets/img/favicons/android-chrome-512x512.png and /dev/null differ
diff --git a/assets/img/favicons/apple-touch-icon.png b/assets/img/favicons/apple-touch-icon.png
old mode 100644
new mode 100755
index 648097f4f..60b3d8906
Binary files a/assets/img/favicons/apple-touch-icon.png and b/assets/img/favicons/apple-touch-icon.png differ
diff --git a/assets/img/favicons/browserconfig.xml b/assets/img/favicons/browserconfig.xml
deleted file mode 100644
index a02a5c74e..000000000
--- a/assets/img/favicons/browserconfig.xml
+++ /dev/null
@@ -1,13 +0,0 @@
----
-layout: compress
----
-
-
-
-
-
-
- #da532c
-
-
-
diff --git a/assets/img/favicons/favicon-16x16.png b/assets/img/favicons/favicon-16x16.png
deleted file mode 100644
index f44237a9a..000000000
Binary files a/assets/img/favicons/favicon-16x16.png and /dev/null differ
diff --git a/assets/img/favicons/favicon-32x32.png b/assets/img/favicons/favicon-32x32.png
deleted file mode 100644
index d5d021d85..000000000
Binary files a/assets/img/favicons/favicon-32x32.png and /dev/null differ
diff --git a/assets/img/favicons/favicon-96x96.png b/assets/img/favicons/favicon-96x96.png
new file mode 100755
index 000000000..fb9b67a7b
Binary files /dev/null and b/assets/img/favicons/favicon-96x96.png differ
diff --git a/assets/img/favicons/favicon.ico b/assets/img/favicons/favicon.ico
old mode 100644
new mode 100755
index 561156802..597d6f132
Binary files a/assets/img/favicons/favicon.ico and b/assets/img/favicons/favicon.ico differ
diff --git a/assets/img/favicons/favicon.svg b/assets/img/favicons/favicon.svg
new file mode 100755
index 000000000..7e1e8cb8f
--- /dev/null
+++ b/assets/img/favicons/favicon.svg
@@ -0,0 +1,3 @@
+
\ No newline at end of file
diff --git a/assets/img/favicons/mstile-150x150.png b/assets/img/favicons/mstile-150x150.png
deleted file mode 100644
index c0d045e25..000000000
Binary files a/assets/img/favicons/mstile-150x150.png and /dev/null differ
diff --git a/assets/img/favicons/site.webmanifest b/assets/img/favicons/site.webmanifest
old mode 100644
new mode 100755
index 03c6113b8..fd8a81def
--- a/assets/img/favicons/site.webmanifest
+++ b/assets/img/favicons/site.webmanifest
@@ -10,15 +10,17 @@ layout: compress
"description": "{{ site.description }}",
"icons": [
{
- "src": "{{ favicon_path }}/android-chrome-192x192.png",
+ "src": "{{ favicon_path }}/web-app-manifest-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
- "src": "{{ favicon_path }}/android-chrome-512x512.png",
+ "src": "{{ favicon_path }}/web-app-manifest-512x512.png",
"sizes": "512x512",
- "type": "image/png"
- }],
+ "type": "image/png",
+ "purpose": "maskable"
+ }
+ ],
"start_url": "{{ '/index.html' | relative_url }}",
"theme_color": "#2a1e6b",
"background_color": "#ffffff",
diff --git a/assets/img/favicons/web-app-manifest-192x192.png b/assets/img/favicons/web-app-manifest-192x192.png
new file mode 100755
index 000000000..ec915a3e0
Binary files /dev/null and b/assets/img/favicons/web-app-manifest-192x192.png differ
diff --git a/assets/img/favicons/web-app-manifest-512x512.png b/assets/img/favicons/web-app-manifest-512x512.png
new file mode 100755
index 000000000..fd0ce60ae
Binary files /dev/null and b/assets/img/favicons/web-app-manifest-512x512.png differ