diff --git a/README.md b/README.md index 3e64efa..51be761 100644 --- a/README.md +++ b/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. diff --git a/_includes/favicons.html b/_includes/favicons.html index 437c6a1..201f6d8 100644 --- a/_includes/favicons.html +++ b/_includes/favicons.html @@ -1,32 +1,17 @@ -{% capture icon_url %}{{ site.baseurl }}/assets/img/favicons{% endcapture %} +{% capture favicon_path %}{{ '/assets/img/favicons' | relative_url }}{% endcapture %} - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + diff --git a/_posts/2019-08-11-customize-the-favicon.md b/_posts/2019-08-11-customize-the-favicon.md index 5696abe..5f058a3 100644 --- a/_posts/2019-08-11-customize-the-favicon.md +++ b/_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 Select your Favicon image to upload your image file. -Click button Create Favicon 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 Generate your Favicons and HTML code 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. diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 1a168ba..c2e93c0 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -416,7 +416,6 @@ footer { } // a - ul { // attribute 'hide-bullet' was added by liquid .task-list-item[hide-bullet] { diff --git a/assets/img/favicons/android-chrome-192x192.png b/assets/img/favicons/android-chrome-192x192.png new file mode 100644 index 0000000..a949d2f Binary files /dev/null and b/assets/img/favicons/android-chrome-192x192.png differ diff --git a/assets/img/favicons/android-chrome-512x512.png b/assets/img/favicons/android-chrome-512x512.png new file mode 100644 index 0000000..a0cdd95 Binary files /dev/null and b/assets/img/favicons/android-chrome-512x512.png differ diff --git a/assets/img/favicons/android-icon-144x144.png b/assets/img/favicons/android-icon-144x144.png deleted file mode 100644 index 782cf3a..0000000 Binary files a/assets/img/favicons/android-icon-144x144.png and /dev/null differ diff --git a/assets/img/favicons/android-icon-192x192.png b/assets/img/favicons/android-icon-192x192.png deleted file mode 100644 index db2d8e6..0000000 Binary files a/assets/img/favicons/android-icon-192x192.png and /dev/null differ diff --git a/assets/img/favicons/android-icon-36x36.png b/assets/img/favicons/android-icon-36x36.png deleted file mode 100644 index 0b560f4..0000000 Binary files a/assets/img/favicons/android-icon-36x36.png and /dev/null differ diff --git a/assets/img/favicons/android-icon-48x48.png b/assets/img/favicons/android-icon-48x48.png deleted file mode 100644 index 7b01aa7..0000000 Binary files a/assets/img/favicons/android-icon-48x48.png and /dev/null differ diff --git a/assets/img/favicons/android-icon-72x72.png b/assets/img/favicons/android-icon-72x72.png deleted file mode 100644 index a841bb8..0000000 Binary files a/assets/img/favicons/android-icon-72x72.png and /dev/null differ diff --git a/assets/img/favicons/android-icon-96x96.png b/assets/img/favicons/android-icon-96x96.png deleted file mode 100644 index a9004f8..0000000 Binary files a/assets/img/favicons/android-icon-96x96.png and /dev/null differ diff --git a/assets/img/favicons/apple-icon-114x114.png b/assets/img/favicons/apple-icon-114x114.png deleted file mode 100644 index 59ea4a1..0000000 Binary files a/assets/img/favicons/apple-icon-114x114.png and /dev/null differ diff --git a/assets/img/favicons/apple-icon-120x120.png b/assets/img/favicons/apple-icon-120x120.png deleted file mode 100644 index b44e035..0000000 Binary files a/assets/img/favicons/apple-icon-120x120.png and /dev/null differ diff --git a/assets/img/favicons/apple-icon-144x144.png b/assets/img/favicons/apple-icon-144x144.png deleted file mode 100644 index 782cf3a..0000000 Binary files a/assets/img/favicons/apple-icon-144x144.png and /dev/null differ diff --git a/assets/img/favicons/apple-icon-152x152.png b/assets/img/favicons/apple-icon-152x152.png deleted file mode 100644 index 4bdb938..0000000 Binary files a/assets/img/favicons/apple-icon-152x152.png and /dev/null differ diff --git a/assets/img/favicons/apple-icon-180x180.png b/assets/img/favicons/apple-icon-180x180.png deleted file mode 100644 index f1f5d35..0000000 Binary files a/assets/img/favicons/apple-icon-180x180.png and /dev/null differ diff --git a/assets/img/favicons/apple-icon-57x57.png b/assets/img/favicons/apple-icon-57x57.png deleted file mode 100644 index 0874717..0000000 Binary files a/assets/img/favicons/apple-icon-57x57.png and /dev/null differ diff --git a/assets/img/favicons/apple-icon-60x60.png b/assets/img/favicons/apple-icon-60x60.png deleted file mode 100644 index c841d6e..0000000 Binary files a/assets/img/favicons/apple-icon-60x60.png and /dev/null differ diff --git a/assets/img/favicons/apple-icon-72x72.png b/assets/img/favicons/apple-icon-72x72.png deleted file mode 100644 index a841bb8..0000000 Binary files a/assets/img/favicons/apple-icon-72x72.png and /dev/null differ diff --git a/assets/img/favicons/apple-icon-76x76.png b/assets/img/favicons/apple-icon-76x76.png deleted file mode 100644 index 3dc2e8b..0000000 Binary files a/assets/img/favicons/apple-icon-76x76.png and /dev/null differ diff --git a/assets/img/favicons/apple-icon-precomposed.png b/assets/img/favicons/apple-icon-precomposed.png deleted file mode 100644 index 8eb50f6..0000000 Binary files a/assets/img/favicons/apple-icon-precomposed.png and /dev/null differ diff --git a/assets/img/favicons/apple-icon.png b/assets/img/favicons/apple-icon.png deleted file mode 100644 index 8eb50f6..0000000 Binary files a/assets/img/favicons/apple-icon.png and /dev/null differ diff --git a/assets/img/favicons/apple-touch-icon.png b/assets/img/favicons/apple-touch-icon.png new file mode 100644 index 0000000..648097f Binary files /dev/null and b/assets/img/favicons/apple-touch-icon.png differ diff --git a/assets/img/favicons/browserconfig.xml b/assets/img/favicons/browserconfig.xml index 2cc1499..a02a5c7 100644 --- a/assets/img/favicons/browserconfig.xml +++ b/assets/img/favicons/browserconfig.xml @@ -1,16 +1,13 @@ --- layout: compress - -# A part of the Favicons --- + - - - - #ffffff + + #da532c diff --git a/assets/img/favicons/favicon-16x16.png b/assets/img/favicons/favicon-16x16.png index 5033c24..f44237a 100644 Binary files a/assets/img/favicons/favicon-16x16.png and b/assets/img/favicons/favicon-16x16.png differ diff --git a/assets/img/favicons/favicon-32x32.png b/assets/img/favicons/favicon-32x32.png index 7f903ae..d5d021d 100644 Binary files a/assets/img/favicons/favicon-32x32.png and b/assets/img/favicons/favicon-32x32.png differ diff --git a/assets/img/favicons/favicon-96x96.png b/assets/img/favicons/favicon-96x96.png deleted file mode 100644 index a9004f8..0000000 Binary files a/assets/img/favicons/favicon-96x96.png and /dev/null differ diff --git a/assets/img/favicons/favicon.ico b/assets/img/favicons/favicon.ico index b02d8bf..5611568 100644 Binary files a/assets/img/favicons/favicon.ico and b/assets/img/favicons/favicon.ico differ diff --git a/assets/img/favicons/manifest.json b/assets/img/favicons/manifest.json deleted file mode 100644 index 9eddf1a..0000000 --- a/assets/img/favicons/manifest.json +++ /dev/null @@ -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" -} diff --git a/assets/img/favicons/ms-icon-144x144.png b/assets/img/favicons/ms-icon-144x144.png deleted file mode 100644 index 782cf3a..0000000 Binary files a/assets/img/favicons/ms-icon-144x144.png and /dev/null differ diff --git a/assets/img/favicons/ms-icon-150x150.png b/assets/img/favicons/ms-icon-150x150.png deleted file mode 100644 index 2b56368..0000000 Binary files a/assets/img/favicons/ms-icon-150x150.png and /dev/null differ diff --git a/assets/img/favicons/ms-icon-310x310.png b/assets/img/favicons/ms-icon-310x310.png deleted file mode 100644 index f95a77a..0000000 Binary files a/assets/img/favicons/ms-icon-310x310.png and /dev/null differ diff --git a/assets/img/favicons/ms-icon-70x70.png b/assets/img/favicons/ms-icon-70x70.png deleted file mode 100644 index 685290b..0000000 Binary files a/assets/img/favicons/ms-icon-70x70.png and /dev/null differ diff --git a/assets/img/favicons/mstile-150x150.png b/assets/img/favicons/mstile-150x150.png new file mode 100644 index 0000000..c0d045e Binary files /dev/null and b/assets/img/favicons/mstile-150x150.png differ diff --git a/assets/img/favicons/site.webmanifest b/assets/img/favicons/site.webmanifest new file mode 100644 index 0000000..03c6113 --- /dev/null +++ b/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" +} diff --git a/assets/js/data/swcache.js b/assets/js/data/swcache.js index 0ca9374..ec648a0 100644 --- a/assets/js/data/swcache.js +++ b/assets/js/data/swcache.js @@ -26,27 +26,19 @@ const resource = [ '{{ tab.url | relative_url }}', {% endfor %} - /* --- Icons --- */ - {% assign icon_url = "/assets/img/favicons" | relative_url %} - '{{ icon_url }}/favicon.ico', - '{{ icon_url }}/apple-icon.png', - '{{ icon_url }}/apple-icon-precomposed.png', - '{{ icon_url }}/apple-icon-57x57.png', - '{{ icon_url }}/apple-icon-60x60.png', - '{{ icon_url }}/apple-icon-72x72.png', - '{{ icon_url }}/apple-icon-76x76.png', - '{{ icon_url }}/apple-icon-114x114.png', - '{{ icon_url }}/apple-icon-120x120.png', - '{{ icon_url }}/apple-icon-144x144.png', - '{{ 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' + /* --- Favicons --- */ + {% assign favicon_path = "/assets/img/favicons" | relative_url %} + + '{{ favicon_path }}/android-chrome-192x192.png', + '{{ favicon_path }}/android-chrome-512x512.png', + '{{ favicon_path }}/apple-touch-icon.png', + '{{ favicon_path }}/favicon-16x16.png', + '{{ favicon_path }}/favicon-32x32.png', + '{{ favicon_path }}/favicon.ico', + '{{ favicon_path }}/mstile-150x150.png', + '{{ favicon_path }}/site.webmanifest', + '{{ favicon_path }}/browserconfig.xml' + ]; /* The request url with below domain will be cached */ diff --git a/docs/README.zh-CN.md b/docs/README.zh-CN.md index 117b867..0bce482 100644 --- a/docs/README.zh-CN.md +++ b/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、分享新点子或者启发了我写出更通俗易懂的文档。