Simplify the favicons

README.md

@@ -189,7 +189,7 @@ The old saying, "Two heads are better than one." Consequently, welcome to report
 
 ## Credits
 
-This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools (their copyright information can be found in the relevant files).
+This theme is mainly built with [Jekyll](https://jekyllrb.com/) ecosystem, [Bootstrap](https://getbootstrap.com/), [Font Awesome](https://fontawesome.com/) and some other wonderful tools (their copyright information can be found in the relevant files). The avatar and favicon design comes from [Clipart Max](https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/).
 
 :tada: Thanks to all the volunteers who contributed to this project, their GitHub IDs are on [this list](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors). Also, I won't forget those guys who submitted the issues or unmerged PR because they reported bugs, shared ideas, or inspired me to write more readable documentation.
 

_includes/favicons.html

@@ -1,32 +1,17 @@
 <!--
   The Favicons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps
-  Generated by: https://www.favicon-generator.org/
+  Generated by: https://realfavicongenerator.net/
 -->
 
-{% capture icon_url %}{{ site.baseurl }}/assets/img/favicons{% endcapture %}
+{% capture favicon_path %}{{ '/assets/img/favicons' | relative_url }}{% endcapture %}
 
-<link rel="shortcut icon" href="{{ icon_url }}/favicon.ico" type="image/x-icon">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ favicon_path }}/apple-touch-icon.png">
-<link rel="icon" href="{{ icon_url }}/favicon.ico" type="image/x-icon">
+<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">
-<link rel="apple-touch-icon" href="{{ icon_url }}/apple-icon.png">
+<link rel="manifest" href="{{ favicon_path }}/site.webmanifest">
-<link rel="apple-touch-icon" href="{{ icon_url }}/apple-icon-precomposed.png">
+<link rel="shortcut icon" href="{{ favicon_path }}/favicon.ico">
-<link rel="apple-touch-icon" sizes="57x57" href="{{ icon_url }}/apple-icon-57x57.png">
+<meta name="apple-mobile-web-app-title" content="{{ site.title }}">
-<link rel="apple-touch-icon" sizes="60x60" href="{{ icon_url }}/apple-icon-60x60.png">
+<meta name="application-name" content="{{ site.title }}">
-<link rel="apple-touch-icon" sizes="72x72" href="{{ icon_url }}/apple-icon-72x72.png">
+<meta name="msapplication-TileColor" content="#da532c">
-<link rel="apple-touch-icon" sizes="76x76" href="{{ icon_url }}/apple-icon-76x76.png">
+<meta name="msapplication-config" content="{{ favicon_path }}/browserconfig.xml">
-<link rel="apple-touch-icon" sizes="114x114" href="{{ icon_url }}/apple-icon-114x114.png">
-<link rel="apple-touch-icon" sizes="120x120" href="{{ icon_url }}/apple-icon-120x120.png">
-<link rel="apple-touch-icon" sizes="144x144" href="{{ icon_url }}/apple-icon-144x144.png">
-<link rel="apple-touch-icon" sizes="152x152" href="{{ icon_url }}/apple-icon-152x152.png">
-<link rel="apple-touch-icon" sizes="180x180" href="{{ icon_url }}/apple-icon-180x180.png">
-
-<link rel="icon" type="image/png" sizes="192x192"  href="{{ icon_url }}/android-icon-192x192.png">
-<link rel="icon" type="image/png" sizes="32x32" href="{{ icon_url }}/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="96x96" href="{{ icon_url }}/favicon-96x96.png">
-<link rel="icon" type="image/png" sizes="16x16" href="{{ icon_url }}/favicon-16x16.png">
-
-<link rel="manifest" href="{{ icon_url }}/manifest.json">
-<meta name='msapplication-config' content='{{ icon_url }}/browserconfig.xml'>
-<meta name="msapplication-TileColor" content="#ffffff">
-<meta name="msapplication-TileImage" content="{{ icon_url }}/ms-icon-144x144.png">
 <meta name="theme-color" content="#ffffff">

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

@@ -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
+- `browserconfig.xml`
-- manifest.json
+- `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 Online Tool                  | From Chirpy |
-
-| File(s)             | From Favicon & App Icon Generator | 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.

_sass/addon/commons.scss

@@ -416,7 +416,6 @@ footer {
 
   } // a
 
-
   ul {
     // attribute 'hide-bullet' was added by liquid
     .task-list-item[hide-bullet] {

assets/img/favicons/browserconfig.xml

@@ -1,16 +1,13 @@
 ---
 layout: compress
-
-# A part of the Favicons
 ---
+
 <?xml version="1.0" encoding="utf-8"?>
 <browserconfig>
   <msapplication>
     <tile>
-      <square70x70logo src="{{ site.baseurl }}/assets/img/favicons/ms-icon-70x70.png" />
+      <square150x150logo src="{{ '/assets/img/favicons/mstile-150x150.png' | relative_url }}" />
-      <square150x150logo src="{{ site.baseurl }}/assets/img/favicons/ms-icon-150x150.png" />
+      <TileColor>#da532c</TileColor>
-      <square310x310logo src="{{ site.baseurl }}/assets/img/favicons/ms-icon-310x310.png" />
-      <TileColor>#ffffff</TileColor>
     </tile>
   </msapplication>
 </browserconfig>

assets/img/favicons/manifest.json

@@ -1,54 +0,0 @@
----
-layout: compress
-#
-# A part of the Favicons
----
-
-{% assign icon_url = "/assets/img/favicons" | relative_url %}
-
-{
-  "name": "{{ site.title }}",
-  "short_name": "{{ site.title }}",
-  "description": "{{ site.description }}",
-  "icons": [
-    {
-      "src": "{{ icon_url }}/android-icon-36x36.png",
-      "sizes": "36x36",
-      "type": "image/png",
-      "density": "0.75"
-    },
-    {
-      "src": "{{ icon_url }}/android-icon-48x48.png",
-      "sizes": "48x48",
-      "type": "image/png",
-      "density": "1.0"
-    },
-    {
-      "src": "{{ icon_url }}/android-icon-72x72.png",
-      "sizes": "72x72",
-      "type": "image/png",
-      "density": "1.5"
-    },
-    {
-      "src": "{{ icon_url }}/android-icon-96x96.png",
-      "sizes": "96x96",
-      "type": "image/png",
-      "density": "2.0"
-    },
-    {
-      "src": "{{ icon_url }}/android-icon-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png",
-      "density": "3.0"
-    },
-    {
-      "src": "{{ icon_url }}/android-icon-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png",
-      "density": "4.0"
-    }],
-    "start_url": "{{ '/index.html' | relative_url }}",
-    "display": "fullscreen",
-    "theme_color": "#2a1e6b",
-    "background_color": "white"
-}

assets/img/favicons/site.webmanifest

@@ -0,0 +1,26 @@
+---
+layout: compress
+---
+
+{% assign favicon_path = "/assets/img/favicons" | relative_url %}
+
+{
+  "name": "{{ site.title }}",
+  "short_name": "{{ site.title }}",
+  "description": "{{ site.description }}",
+  "icons": [
+    {
+      "src": "{{ favicon_path }}/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "{{ favicon_path }}/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }],
+  "start_url": "{{ '/index.html' | relative_url }}",
+  "theme_color": "#2a1e6b",
+  "background_color": "#ffffff",
+  "display": "fullscreen"
+}

assets/js/data/swcache.js

@@ -26,27 +26,19 @@ const resource = [
     '{{ tab.url | relative_url }}',
   {% endfor %}
 
-  /* --- Icons --- */
+  /* --- Favicons --- */
-  {% assign icon_url = "/assets/img/favicons" | relative_url %}
+  {% assign favicon_path = "/assets/img/favicons" | relative_url %}
-  '{{ icon_url }}/favicon.ico',
+
-  '{{ icon_url }}/apple-icon.png',
+  '{{ favicon_path }}/android-chrome-192x192.png',
-  '{{ icon_url }}/apple-icon-precomposed.png',
+  '{{ favicon_path }}/android-chrome-512x512.png',
-  '{{ icon_url }}/apple-icon-57x57.png',
+  '{{ favicon_path }}/apple-touch-icon.png',
-  '{{ icon_url }}/apple-icon-60x60.png',
+  '{{ favicon_path }}/favicon-16x16.png',
-  '{{ icon_url }}/apple-icon-72x72.png',
+  '{{ favicon_path }}/favicon-32x32.png',
-  '{{ icon_url }}/apple-icon-76x76.png',
+  '{{ favicon_path }}/favicon.ico',
-  '{{ icon_url }}/apple-icon-114x114.png',
+  '{{ favicon_path }}/mstile-150x150.png',
-  '{{ icon_url }}/apple-icon-120x120.png',
+  '{{ favicon_path }}/site.webmanifest',
-  '{{ icon_url }}/apple-icon-144x144.png',
+  '{{ favicon_path }}/browserconfig.xml'
-  '{{ icon_url }}/apple-icon-152x152.png',
+
-  '{{ icon_url }}/apple-icon-180x180.png',
-  '{{ icon_url }}/android-icon-192x192.png',
-  '{{ icon_url }}/favicon-32x32.png',
-  '{{ icon_url }}/favicon-96x96.png',
-  '{{ icon_url }}/favicon-16x16.png',
-  '{{ icon_url }}/ms-icon-144x144.png',
-  '{{ icon_url }}/manifest.json',
-  '{{ icon_url }}/browserconfig.xml'
 ];
 
 /* The request url with below domain will be cached */

docs/README.zh-CN.md

@@ -190,7 +190,7 @@ $ docker run -it --rm \
 
 ## 鸣谢
 
-这个主题的开发主要基于 [Jekyll](https://jekyllrb.com/) 生态、[Bootstrap](https://getbootstrap.com/)、[Font Awesome](https://fontawesome.com/) 和其他一些出色的工具 (相关文件中可以找到这些工具的版权信息).
+这个主题的开发主要基于 [Jekyll](https://jekyllrb.com/) 生态、[Bootstrap](https://getbootstrap.com/)、[Font Awesome](https://fontawesome.com/) 和其他一些出色的工具 (相关文件中可以找到这些工具的版权信息)。头像和图标的设计来自于 [Clipart Max](https://www.clipartmax.com/middle/m2i8b1m2K9Z5m2K9_ant-clipart-childrens-ant-cute/)。
 
 :tada: 感谢所有参与代码贡献的小伙伴, 他们的 GayHub ID 在这个[列表](https://github.com/cotes2020/jekyll-theme-chirpy/graphs/contributors)。 另外, 提交过 issues(或者未被合并 PR) 的高富帅和白富美也不会被遗忘,他/她们帮助报告 bug、分享新点子或者启发了我写出更通俗易懂的文档。