refactor(favicon); change favicon related setup

exampleSite/config/_default/params.toml

@@ -9,9 +9,9 @@ bundled = true
 # generate these with https://realfavicongenerator.net
 favicon = true
 # modern SVG favicon to use in place of older style .png and .ico files
-svgFavicon = ""
+svgFavicon = "/dot.svg"
-# Safari mask icon color
+# fallback png favicon for unsupported browsers
-iconColor = "#000000"
+svgFaviconFallback = "/dot.png"
 
 # page config
 [page]

exampleSite/static/browserconfig.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#ffffff</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>

exampleSite/static/dot.svg

@@ -1,3 +1,17 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
+<!-- icon.svg -->
-  <circle cx="50" cy="50" r="50"/>
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    circle {
+      fill: white;
+      stroke: black;
+      stroke-width: 5px;
+    }
+    @media (prefers-color-scheme: dark) {
+      circle {
+        fill: black;
+        stroke: white;
+      }
+    }
+  </style>
+  <circle cx="50" cy="50" r="45" />
 </svg>

exampleSite/static/safari-pinned-tab.svg

@@ -1,39 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="780.000000pt" height="780.000000pt" viewBox="0 0 780.000000 780.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,780.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M1510 4200 l0 -1501 803 4 c790 3 804 4 902 26 387 87 647 310 722
-620 21 87 20 255 -2 346 -64 263 -270 454 -571 530 -55 14 -103 27 -109 29 -5
-1 26 21 70 43 212 107 352 230 411 358 44 97 58 171 58 305 0 98 -4 126 -27
-193 -90 261 -323 432 -705 519 -94 21 -119 22 -824 25 l-728 4 0 -1501z m1184
-1285 c324 -49 512 -184 571 -410 25 -96 20 -251 -10 -342 -71 -210 -236 -338
--479 -372 -43 -6 -231 -11 -422 -11 l-344 0 0 575 0 575 293 0 c207 0 321 -4
-391 -15z m-33 -1325 c415 -30 646 -180 725 -471 27 -97 24 -295 -5 -373 -80
--220 -291 -347 -639 -385 -56 -6 -244 -11 -417 -11 l-315 0 0 625 0 625 263 0
-c144 0 318 -5 388 -10z"/>
-<path d="M5107 5046 c-230 -41 -409 -129 -565 -280 -388 -373 -298 -943 187
--1186 l63 -31 -65 -34 c-150 -75 -300 -212 -358 -328 -43 -83 -51 -175 -21
--234 30 -58 108 -123 195 -163 42 -19 76 -37 76 -40 0 -3 -23 -23 -52 -45
--112 -86 -261 -221 -308 -279 -28 -33 -69 -99 -92 -145 -40 -79 -42 -89 -42
--170 0 -74 4 -93 27 -137 89 -169 340 -281 728 -325 170 -20 586 -17 737 4
-467 65 795 252 938 534 47 94 66 170 72 293 6 122 -5 190 -46 276 -64 136
--232 227 -487 264 -38 5 -306 21 -596 35 -592 28 -623 33 -688 100 -31 32 -35
-42 -34 88 2 66 36 136 102 208 l48 52 65 -16 c300 -75 653 -29 944 121 165 86
-322 266 375 433 59 187 34 414 -66 583 -19 33 -36 63 -37 68 -1 5 92 9 211 8
-l212 -1 0 96 0 95 -324 0 -325 0 -47 32 c-63 43 -170 82 -289 108 -129 28
--421 36 -538 16z m256 -121 c121 -31 213 -95 297 -207 73 -97 112 -177 147
--304 24 -87 27 -118 27 -249 1 -121 -3 -161 -18 -205 -74 -219 -248 -373 -438
--387 -264 -20 -474 190 -549 552 -7 33 -13 123 -12 200 0 162 22 276 75 383
-89 179 279 267 471 217z m-458 -2224 c230 -26 487 -42 790 -51 336 -9 403 -16
-511 -51 130 -42 198 -113 211 -218 27 -230 -359 -422 -898 -447 -209 -10 -452
-17 -604 67 -103 35 -221 97 -266 141 -106 103 -114 215 -31 387 46 95 139 194
-174 187 13 -3 64 -10 113 -15z"/>
-</g>
-</svg>

exampleSite/static/site.webmanifest

@@ -1,19 +0,0 @@
-{
-    "name": "",
-    "short_name": "",
-    "icons": [
-        {
-            "src": "/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        }
-    ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "display": "standalone"
-}

layouts/partials/head/favicon.html

@@ -1,13 +1,12 @@
 {{- if site.Params.favicon -}}
   {{- with site.Params.svgFavicon -}}
-    <link rel="icon" href="{{ . }}" />
+    <link rel="icon" type="image/svg+xml" href="{{ . }}" />
+    {{- with site.Params.svgFaviconFallback -}}
+      <link rel="icon" type="image/png" href="{{ . }}" />
+    {{- end -}}
   {{- 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.iconColor -}}
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="{{ . }}" />
-  {{- end -}}
 {{- end -}}