favicon: add light & dark option for OS's prefered color scheme #549

exampleSite/content/basics/customization/_index.en.md

@@ -43,7 +43,7 @@ The size of the logo will adapt automatically
 
 If your favicon is a SVG, PNG or ICO, just drop off your image in your local `static/images/` folder and name it `favicon.svg`, `favicon.png` or `favicon.ico` respectively.
 
-Alternatively, if you want your site to use light & dark theme SVG favicons that follow the OS' (and in some cases, the browser's) color scheme, add the image files to your local `static/images/` folder and name them `favicon-light.svg` and `favicon-dark.svg` respectively.
+Additionally, if you want your site to use light & dark theme favicons that follow the OS' (and in some cases, the browser's) color scheme, add the image files to your local `static/images/` folder and name them eg. `favicon-light.svg` and/or `favicon-dark.svg` respectively corresponding to your file format. In case one of the files is missing, the theme falls back to eg. `favicon.svg` for the missing file. All supplied favicons must be of the same file format.
 
 {{% notice warning %}}
 IE and old browser versions do not support [media queries](https://caniuse.com/css-media-interaction), which are necessary for the light & dark theme favicon option.

exampleSite/content/basics/migration/_index.en.md

@@ -24,6 +24,8 @@ This document shows you what's new in the latest release. For a detailed list of
 
   Additionally the `name` parameter was renamed to `title`. You don't need to change anything yet as the old name will be used as a fallback but you will get deprecation warnings while executing Hugo.
 
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The theme now supports [separate favicons]({{%relref "basics/customization/#change-the-favicon" %}}) for light & dark mode optionally.
+
 ---
 
 ## 5.15.0 (2023-05-29)

layouts/partials/favicon.html

@@ -1,46 +1,32 @@
     {{- $assetBusting := not .Site.Params.disableAssetsBusting }}
     {{- $faviconMatch := false }}
-    {{- $svg := dict "ext" "svg" "type" "image/svg+xml" }}
+    {{- $svg := dict "ext" "svg" "type" "type=\"image/svg+xml\"" }}
-    {{- $png := dict "ext" "png" "type" "image/png" }}
+    {{- $png := dict "ext" "png" "type" "type=\"image/png\"" }}
-    {{- $ico := dict "ext" "ico" "type" "image/x-icon" }}
+    {{- $ico := dict "ext" "ico" "type" "type=\"image/x-icon\" sizes=\"any\"" }}
     {{- $faviconTypes := slice $svg $png $ico }}
+    {{- $faviconNames := slice "favicon" "logo" }}
+    {{- range $faviconNames }}
+      {{- $faviconName := . }}
       {{- range $faviconTypes }}
-      {{- if and
+        {{- if fileExists (printf "/static/images/%s.%s" $faviconName .ext) }}
-        (eq $faviconMatch false)
-        (or
-          (fileExists (printf "/static/images/favicon-light.%s" .ext))
-          (fileExists (printf "/static/images/favicon-dark.%s"))
-        )
-      }}
           {{- $faviconMatch = true }}
-        {{$c:=""}}{{/*
+    <link href="{{ printf "images/%s.%s" $faviconName .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" {{ .type | safeHTMLAttr }}>
+        {{- end }}
+        {{- $c:="" }}{{/*
           Warning: IE and old browser versions do not support media queries necessary for the light & dark theme option.
           If you have requirements to support IE and/or older browser versions, use one of the other options.
           Reference: https://caniuse.com/css-media-interaction
         */}}
-        {{- if (fileExists (printf "/static/images/favicon-light.%s" .ext)) }}
+        {{- if (fileExists (printf "/static/images/%s-light.%s" $faviconName .ext)) }}
-    <link href="{{ printf "images/favicon-light.%s" .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="{{ .type }}" media="(prefers-color-scheme: light)">
-        {{- end }}
-        {{- if (fileExists (printf "/static/images/favicon-dark.%s" .ext)) }}
-    <link href="{{ printf "images/favicon-dark.%s" .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="{{ .type }}" media="(prefers-color-scheme: dark)">
-        {{- end }}
-      {{- end }}
-    {{- end }}
-    {{- range $faviconTypes }}
-      {{- if and
-        (eq $faviconMatch false)
-        (fileExists (printf "/static/images/favicon.%s" .ext))
-      }}
           {{- $faviconMatch = true }}
-    <link href="{{ printf "images/favicon.%s" .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="{{ .type }}">
+    <link href="{{ printf "images/%s-light.%s" $faviconName .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" {{ .type | safeHTMLAttr }} media="(prefers-color-scheme: light)">
+        {{- end }}
+        {{- if (fileExists (printf "/static/images/%s-dark.%s" $faviconName .ext)) }}
+          {{- $faviconMatch = true }}
+    <link href="{{ printf "images/%s-dark.%s" $faviconName .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" {{ .type | safeHTMLAttr }} media="(prefers-color-scheme: dark)">
         {{- end }}
       {{- end }}
-    {{- range $faviconTypes }}
+      {{- if $faviconMatch }}
-      {{- if and
+        {{- break }}
-        (eq $faviconMatch false)
-        (fileExists (printf "/static/images/logo.%s" .ext))
-      }}
-        {{- $faviconMatch := true }}
-    <link href="{{ printf "images/logo.%s" .ext | relURL }}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="icon" type="{{ .type }}">
       {{- end }}
     {{- end }}