refactor: update favicon files and documentation (#2558)

_includes/favicons.html

@@ -5,15 +5,10 @@
 
 {% capture favicon_path %}{{ '/assets/img/favicons' | relative_url }}{% endcapture %}
 
+<link rel="icon" type="image/png" href="{{ favicon_path }}/favicon-96x96.png" sizes="96x96">
+<link rel="icon" type="image/svg+xml" href="{{ favicon_path }}/favicon.svg">
+<link rel="shortcut icon" href="{{ favicon_path }}/favicon.ico">
 <link rel="apple-touch-icon" sizes="180x180" href="{{ favicon_path }}/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="{{ favicon_path }}/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="{{ favicon_path }}/favicon-16x16.png">
 {% if site.pwa.enabled %}
   <link rel="manifest" href="{{ favicon_path }}/site.webmanifest">
 {% endif %}
-<link rel="shortcut icon" href="{{ favicon_path }}/favicon.ico">
-<meta name="apple-mobile-web-app-title" content="{{ site.title }}">
-<meta name="application-name" content="{{ site.title }}">
-<meta name="msapplication-TileColor" content="#da532c">
-<meta name="msapplication-config" content="{{ favicon_path }}/browserconfig.xml">
-<meta name="theme-color" content="#ffffff">

_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 <kbd>Select your Favicon image</kbd> 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 <kbd>Pick 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.
+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>Next →</kbd> 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 |
+| File(s) | From Online Tool | From Chirpy |
-|---------------------|:---------------------------------:|:-----------:|
+| ------- | :--------------: | :---------: |
-| `*.PNG`             | ✓                                 | ✗           |
+| `*.PNG` |        ✓         |      ✗      |
-| `*.ICO`             | ✓                                 | ✗           |
+| `*.ICO` |        ✓         |      ✗      |
+| `*.SVG` |        ✓         |      ✗      |
+
 
 <!-- markdownlint-disable-next-line -->
 >  ✓ means keep, ✗ means delete.

assets/img/favicons/browserconfig.xml

@@ -1,13 +0,0 @@
----
-layout: compress
----
-
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-  <msapplication>
-    <tile>
-      <square150x150logo src="{{ '/assets/img/favicons/mstile-150x150.png' | relative_url }}" />
-      <TileColor>#da532c</TileColor>
-    </tile>
-  </msapplication>
-</browserconfig>

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",