Support favicon color theming (#260)

exampleSite/config.toml

@@ -95,6 +95,20 @@ enableEmoji = true
       description = "About LoveIt Theme"
       # site keywords
       keywords = ["Theme", "Hugo"]
+      # App icon config
+      [languages.en.params.app]
+        # optional site title override for the app when added to an iOS home screen or Android launcher
+        title = "LoveIt App"
+        # whether to omit favicon resource links
+        noFavicon = true
+        # modern SVG favicon to use in place of older style .png and .ico files
+        svgFavicon = 'favicon.svg'
+        # Android browser color theming
+        themeColor = "#ffffff"
+        # Safari mask icon color
+        iconColor = "#5bbad5"
+        # Windows v8-10 tile color
+        tileColor = "#da532c"
       # Search config
       [languages.en.params.search]
         enable = true
@@ -270,6 +284,20 @@ enableEmoji = true
       description = "关于 LoveIt 主题"
       # 网站关键词
       keywords = ["Theme", "Hugo"]
+      # App icon config
+      [languages.zh-cn.params.app]
+        # optional site title override for the app when added to an iOS home screen or Android launcher
+        title = "LoveIt App"
+        # whether to omit favicon resource links
+        noFavicon = true
+        # modern SVG favicon to use in place of older style .png and .ico files
+        svgFavicon = 'favicon.svg'
+        # Android browser color theming
+        themeColor = "#ffffff"
+        # Safari mask icon color
+        iconColor = "#5bbad5"
+        # Windows v8-10 tile color
+        tileColor = "#da532c"
       # 搜索配置
       [languages.zh-cn.params.search]
         enable = true
@@ -441,6 +469,20 @@ enableEmoji = true
       description = "À propos du thème LoveIt"
       # site keywords
       keywords = ["Thème", "Hugo"]
+      # App icon config
+      [languages.fr.params.app]
+        # optional site title override for the app when added to an iOS home screen or Android launcher
+        title = "LoveIt App"
+        # whether to omit favicon resource links
+        noFavicon = true
+        # modern SVG favicon to use in place of older style .png and .ico files
+        svgFavicon = 'favicon.svg'
+        # Android browser color theming
+        themeColor = "#ffffff"
+        # Safari mask icon color
+        iconColor = "#5bbad5"
+        # Windows v8-10 tile color
+        tileColor = "#da532c"
       # Search config
       [languages.fr.params.search]
         enable = true

exampleSite/content/posts/theme-documentation-basics.en.md

@@ -203,6 +203,21 @@ Note that some of these parameters are explained in details in other sections of
   # {{< version 0.2.0 >}} date format
   dateFormat = "2006-01-02"
 
+  # {{< version 0.2.0 >}} App icon config
+  [params.app]
+    # optional site title override for the app when added to an iOS home screen or Android launcher
+    title = "LoveIt App"
+    # whether to omit favicon resource links
+    noFavicon = true
+    # modern SVG favicon to use in place of older style .png and .ico files
+    svgFavicon = 'favicon.svg'
+    # Android browser color theming
+    themeColor = "#ffffff"
+    # Safari mask icon color
+    iconColor = "#5bbad5"
+    # Windows v8-10 tile color
+    tileColor = "#da532c"
+
   # {{< version 0.2.0 >}} Search config
   [params.search]
     enable = true

exampleSite/content/posts/theme-documentation-basics.fr.md

@@ -208,6 +208,21 @@ Note that some of these parameters are explained in details in other sections of
   # {{< version 0.2.0 >}} date format
   dateFormat = "2006-01-02"
 
+  # {{< version 0.2.0 >}} App icon config
+  [params.app]
+    # optional site title override for the app when added to an iOS home screen or Android launcher
+    title = "LoveIt App"
+    # whether to omit favicon resource links
+    noFavicon = true
+    # modern SVG favicon to use in place of older style .png and .ico files
+    svgFavicon = 'favicon.svg'
+    # Android browser color theming
+    themeColor = "#ffffff"
+    # Safari mask icon color
+    iconColor = "#5bbad5"
+    # Windows v8-10 tile color
+    tileColor = "#da532c"
+
   # {{< version 0.2.0 >}} Search config
   [params.search]
     enable = true

exampleSite/content/posts/theme-documentation-basics.zh-cn.md

@@ -206,6 +206,21 @@ hugo
   # {{< version 0.2.0 >}} 日期格式
   dateFormat = "2006-01-02"
 
+  # {{< version 0.2.0 >}} App icon config
+  [params.app]
+    # optional site title override for the app when added to an iOS home screen or Android launcher
+    title = "LoveIt App"
+    # whether to omit favicon resource links
+    noFavicon = true
+    # modern SVG favicon to use in place of older style .png and .ico files
+    svgFavicon = 'favicon.svg'
+    # Android browser color theming
+    themeColor = "#ffffff"
+    # Safari mask icon color
+    iconColor = "#5bbad5"
+    # Windows v8-10 tile color
+    tileColor = "#da532c"
+
   # {{< version 0.2.0 >}} 搜索配置
   [params.search]
     enable = true

layouts/partials/head/link.html

@@ -1,14 +1,22 @@
 {{- $cdn := .Scratch.Get "cdn" | default dict -}}
 {{- $fingerprint := .Scratch.Get "fingerprint" -}}
 
-<link rel="canonical" href="{{ .Permalink }}" />
-<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-<link rel="manifest" href="/site.webmanifest">
-<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
+{{- if not $.Site.Params.app.noFavicon -}}
+    {{- with $.Site.Params.app.svgFavicon -}}
+        <link rel="icon" href="/{{ . }}">
+    {{- else -}}
+        <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    {{- end -}}
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    {{- with $.Site.Params.app.iconColor -}}
+        <link rel="mask-icon" href="/safari-pinned-tab.svg" color="{{ . }}">
+    {{- end -}}
+    <link rel="manifest" href="/site.webmanifest">
+{{- end -}}
 
+<link rel="canonical" href="{{ .Permalink }}" />
 {{- if .PrevInSection -}}
     <link rel="prev" href="{{ .PrevInSection.Permalink }}" />
 {{- end -}}

layouts/partials/head/meta.html

@@ -1,6 +1,13 @@
 {{- template "_internal/opengraph.html" . -}}
 {{- template "_internal/twitter_cards.html" . -}}
 
-{{- hugo.Generator -}}
-<meta name="theme-color" content="#ffffff">
-<meta name="msapplication-TileColor" content="#da532c">
+<meta name="application-name" content="{{ .Site.Params.app.title | default .Site.Title }}">
+<meta name="apple-mobile-web-app-title" content="{{ .Site.Params.app.title | default .Site.Title }}">
+
+{{- with .Site.Params.app.themeColor -}}
+    <meta name="theme-color" content="{{ . }}">
+{{- end -}}
+
+{{- with .Site.Params.app.tileColor -}}
+    <meta name="msapplication-TileColor" content="{{ . }}">
+{{- end -}}