favicon generator support, example site update

README.ko.md

@@ -21,6 +21,7 @@ Zzo theme을 이용할 시 가장 매력적인 포인트 한가지는, 한글로
 * [컨택 페이지](#contact-page)
 * [다국어](#multi-language)
 * [저자](#author)
+* [Favicon](#favicon)
 * [커스터마이징](#customizing)
 * [외부 라이브러리 사용](#external-library)
 * [Shortcodes](#shortcodes)
@@ -223,6 +224,7 @@ logo = true # Logo that appears in the site navigation bar.
 description = "The Zzo theme for Hugo example site." # for SEO
 custom_css = [] # custom_css = ["scss/custom.scss"] and then make file at root/assets/scss/custom.scss
 custom_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/js/custom.js
+useFaviconGenerator = false # https://www.favicon-generator.org/
 
 themeOptions = ["dark", "light", "hacker", "solarized", "kimbie"] # select options for site color theme
 notAllowedTypesInHome = ["contact", "talks", "about"] # not allowed page types in home page. type can be set in front matter or default to folder name.
@@ -929,6 +931,19 @@ socialOptions: # override params.toml file socialOptions
 ---
 ```
 
+## Favicon
+
+`favicon.ico`라는 파일을 루트 디렉토리의 static 폴더에 넣어주세요. 파일 이름과 확장자가 정확히 `favicon.ico`여야 합니다.
+
+### Using favicon-genarator
+
+모바일 환경을 고려하신다면 [favicon-generator](https://www.favicon-generator.org/) 사이트에서 파비콘을 만들어주세요.
+
+- 위의 사이트에서 파비콘을 만들어주세요.
+- `root/static/favicon`경로에 폴더를 만들어주세요.
+- 해당 폴더에 파비콘을 풀어주세요.
+- params.toml 파일에 `useFaviconGenerator`의 값을 `true`로 바꿔주세요.
+
 ## External Library
 
 현재 지원하는 외부 라이브러리는 Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram 입니다. front-matter에 값을 넣어주시면 해당 라이브러리가 로드됩니다.

README.md

@@ -21,6 +21,7 @@ Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(alw
 * [Talks Page](#talks-page)
 * [Multi Language](#multi-language)
 * [Author](#author)
+* [Favicon](#favicon)
 * [Customizing](#customizing)
 * [External libraries](#external-library)
 * [Shortcodes](#shortcodes)
@@ -217,6 +218,7 @@ logo = true # Logo that appears in the site navigation bar.
 description = "The Zzo theme for Hugo example site." # for SEO
 custom_css = [] # custom_css = ["scss/custom.scss"] and then make file at root/assets/scss/custom.scss
 custom_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/js/custom.js
+useFaviconGenerator = false # https://www.favicon-generator.org/
 
 themeOptions = ["dark", "light", "hacker", "solarized", "kimbie"] # select options for site color theme
 notAllowedTypesInHome = ["contact", "talks", "about"] # not allowed page types in home page. type can be set in front matter or default to folder name.
@@ -926,6 +928,19 @@ socialOptions: # override params.toml file socialOptions
 ---
 ```
 
+## Favicon
+
+Put your `favicon.ico` file under the static folder. The filename should be `favicon` and the extension should be `ico`.
+
+### Using favicon-genarator
+
+If you want to support mobile favicon, use [favicon-generator](https://www.favicon-generator.org/).
+
+- Make favicons from favicon-generator site.
+- Make a folder at `root/static/favicon`
+- Unzip the generated favicon to that folder.
+- Set the config param `useFaviconGenerator` to `true`
+
 ## External Library
 
 If you want use external libraries, this theme currently supporting Katex, MathJax, Mermaid, Flowchart.js, chart.js, viz-graph, wavedrom, js-sequence-diagram. Just add some variable to a front-matter.

exampleSite/config/_default/params.toml

@@ -3,6 +3,7 @@ logoType = "short" # long, short
 description = "The Zzo theme for Hugo example site."
 custom_css = []
 custom_js = []
+useFaviconGenerator = true # https://www.favicon-generator.org/
 
 themeOptions = ["dark", "light", "hacker", "solarized", "kimbie"]
 notAllowedTypesInHome = ["contact", "talks", "about"]

exampleSite/static/manifest.json

@@ -6,6 +6,50 @@
   "default_locale": "en",
   "description": "Hugo blog theme with rich features",
   "start_url": "https://themes.gohugo.io/theme/hugo-theme-zzo/",
+  "icons": [
+    {
+      "src": "favicon/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "favicon/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "favicon/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "favicon/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "favicon/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "favicon/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    },
+    {
+      "src": "favicon/android-icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ],
   "theme_color": "#FF6188",
   "background_color": "#2D2A2E",
   "display": "standalone"

layouts/partials/head/meta.html

@@ -16,8 +16,27 @@
 <meta name="msapplication-TileColor" content="{{ $.Param "themecolor" | default "#ffffff" }}">
 <meta name="theme-color" content="{{ $.Param "themecolor" | default "#ffffff" }}">
 <link rel="canonical" href="{{ .Permalink }}">
-<link rel="apple-touch-icon" href="{{ "apple-touch-icon.png" | relURL }}">
-<link rel="shortcut icon" href="{{ "favicon.png" | relURL }}" type="image/x-icon">
-<link rel="shortcut icon" href="{{ "favicon.ico" | relURL }}" type="image/x-icon">
-<link rel="icon" href="{{ "logo.svg" | relURL }}" sizes="any" type="image/svg+xml" />
-<link rel="manifest" href="{{ "manifest.json" | relURL }}">
+<link rel="manifest" href="{{ "manifest.json" | relURL }}">
+{{ if $.Site.Params.useFaviconGenerator }}
+  <link rel="apple-touch-icon" sizes="57x57" href="{{ "favicon/apple-icon-57x57.png" | relURL }}">
+  <link rel="apple-touch-icon" sizes="60x60" href="{{ "favicon/apple-icon-60x60.png" | relURL }}">
+  <link rel="apple-touch-icon" sizes="72x72" href="{{ "favicon/apple-icon-72x72.png" | relURL }}">
+  <link rel="apple-touch-icon" sizes="76x76" href="{{ "favicon/apple-icon-76x76.png" | relURL }}">
+  <link rel="apple-touch-icon" sizes="114x114" href="{{ "favicon/apple-icon-114x114.png" | relURL }}">
+  <link rel="apple-touch-icon" sizes="120x120" href="{{ "favicon/apple-icon-120x120.png" | relURL }}">
+  <link rel="apple-touch-icon" sizes="144x144" href="{{ "favicon/apple-icon-144x144.png" | relURL }}">
+  <link rel="apple-touch-icon" sizes="152x152" href="{{ "favicon/apple-icon-152x152.png" | relURL }}">
+  <link rel="apple-touch-icon" sizes="180x180" href="{{ "favicon/apple-icon-180x180.png" | relURL }}">
+  <link rel="icon" type="image/png" sizes="192x192" href="{{ "favicon/android-icon-192x192.png" | relURL }}">
+  <link rel="icon" type="image/png" sizes="192x192" href="{{ "favicon/android-icon-512x512.png" | relURL }}">
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon/favicon-32x32.png" | relURL }}">
+  <link rel="icon" type="image/png" sizes="96x96" href="{{ "favicon/favicon-96x96.png" | relURL }}">
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon/favicon-16x16.png" | relURL }}">
+  <meta name="msapplication-TileColor" content="#ffffff">
+  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
+{{ else }}
+  <link rel="apple-touch-icon" href="{{ "apple-touch-icon.png" | relURL }}">
+  <link rel="shortcut icon" href="{{ "favicon.png" | relURL }}" type="image/x-icon">
+  <link rel="shortcut icon" href="{{ "favicon.ico" | relURL }}" type="image/x-icon">
+  <link rel="icon" href="{{ "logo.svg" | relURL }}" sizes="any" type="image/svg+xml" />
+{{ end }}