diff --git a/README.md b/README.md index 3e64efa72..51be76169 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 437c6a115..201f6d80a 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 5696abe44..5f058a390 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 1a168ba3c..c2e93c0df 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 000000000..a949d2fe5 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 000000000..a0cdd950b 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 782cf3a94..000000000 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 db2d8e67a..000000000 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 0b560f448..000000000 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 7b01aa734..000000000 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 a841bb806..000000000 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 a9004f855..000000000 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 59ea4a178..000000000 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 b44e035d9..000000000 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 782cf3a94..000000000 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 4bdb9384a..000000000 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 f1f5d3579..000000000 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 0874717ac..000000000 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 c841d6ed1..000000000 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 a841bb806..000000000 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 3dc2e8bbc..000000000 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 8eb50f63a..000000000 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 8eb50f63a..000000000 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 000000000..648097f4f 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 2cc149931..a02a5c74e 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 5033c246c..f44237a9a 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 7f903ae12..d5d021d85 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 a9004f855..000000000 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 b02d8bfd4..561156802 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 9eddf1aa4..000000000 --- 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 782cf3a94..000000000 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 2b56368f4..000000000 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 f95a77a25..000000000 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 685290b73..000000000 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 000000000..c0d045e25 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 000000000..03c6113b8 --- /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 0ca937428..ec648a025 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 117b867ed..0bce48258 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、分享新点子或者启发了我写出更通俗易懂的文档。