From a88788f3fca9a30c0373a0e4a21a2318c1ee4b4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Guillot?= <fred@kanboard.net>
Date: Wed, 16 Aug 2023 20:39:05 -0700
Subject: [PATCH] Add adaptive SVG favicon and more SVG variants

See https://web.dev/building-an-adaptive-favicon/

Added more variant of the original Inkscape icon:

- Text SVG
- Vectorized text path SVG
- Optimized SVG icon
---
 app/Template/layout.php                |   1 +
 assets/img/README.md                   |   7 ++
 assets/img/adaptive-favicon.svg        |  13 ++++
 assets/img/icon.svg                    |  84 --------------------
 assets/img/inkscape-optimized-icon.svg |   6 ++
 assets/img/inkscape-path-icon.svg      |  90 +++++++++++++++++++++
 assets/img/inkscape-text-icon.svg      | 103 +++++++++++++++++++++++++
 7 files changed, 220 insertions(+), 84 deletions(-)
 create mode 100644 assets/img/README.md
 create mode 100644 assets/img/adaptive-favicon.svg
 delete mode 100644 assets/img/icon.svg
 create mode 100644 assets/img/inkscape-optimized-icon.svg
 create mode 100644 assets/img/inkscape-path-icon.svg
 create mode 100644 assets/img/inkscape-text-icon.svg

diff --git a/app/Template/layout.php b/app/Template/layout.php
index d48d8d1ee..088e2db49 100644
--- a/app/Template/layout.php
+++ b/app/Template/layout.php
@@ -30,6 +30,7 @@
         <?= $this->hook->asset('css', 'template:layout:css') ?>
         <?= $this->hook->asset('js', 'template:layout:js') ?>
 
+        <link rel="icon" href="<?= $this->url->dir() ?>assets/img/adaptive-favicon.svg" type="image/svg+xml">
         <link rel="icon" type="image/png" href="<?= $this->url->dir() ?>assets/img/favicon.png">
         <link rel="apple-touch-icon" href="<?= $this->url->dir() ?>assets/img/touch-icon-iphone.png">
         <link rel="apple-touch-icon" sizes="72x72" href="<?= $this->url->dir() ?>assets/img/touch-icon-ipad.png">
diff --git a/assets/img/README.md b/assets/img/README.md
new file mode 100644
index 000000000..b8a8b0cea
--- /dev/null
+++ b/assets/img/README.md
@@ -0,0 +1,7 @@
+Icons
+=====
+
+- `adaptive-favicon.svg`: Icon with embedded CSS that can be served with a dark or light theme
+- `inkscape-text-icon.svg`: Original Inkscape file
+- `inkscape-path-icon.svg`: Inkscape file with the text converted to path (Inkscape: `Path -> Object to Path`)
+- `inkscape-optimized-icon.svg`: Inkscape export striped of unecessary elements (Inkscape: `Save as -> Save as Optimized SVG`)
diff --git a/assets/img/adaptive-favicon.svg b/assets/img/adaptive-favicon.svg
new file mode 100644
index 000000000..288e825db
--- /dev/null
+++ b/assets/img/adaptive-favicon.svg
@@ -0,0 +1,13 @@
+<svg version="1.1" viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        @media (prefers-color-scheme: dark) {
+            #b {
+                fill: white;
+            }
+        }
+    </style>
+    <g transform="translate(0 -908.36)">
+        <path id="k" transform="scale(.82874 1.2066)" d="m86.692 856.38h-27.513l-25.994-34.814-5.2572 6.367v28.447h-22.431v-86.977h22.431v39.37l31.076-39.37h25.994l-33.996 40.247z" fill="#d40000" stroke-width="1.0109" aria-label="K"/>
+        <path id="b" transform="scale(.9009 1.11)" d="m154.53 901.82q0 7.0603-2.6715 12.467-2.6715 5.4065-7.1875 8.9049-5.3429 4.198-11.767 5.979-6.3606 1.781-16.22 1.781h-33.584v-94.71h28.05q10.368 0 15.52 0.76328 5.1521 0.76328 9.859 3.1803 5.2157 2.7351 7.5692 7.0603 2.3534 4.2616 2.3534 10.241 0 6.7423-3.4348 11.513-3.4348 4.7069-9.1593 7.5692v0.50885q9.6046 1.9718 15.138 8.4597 5.5338 6.4242 5.5338 16.283zm-21.181-42.68q0-3.4348-1.1449-5.7882-1.1449-2.3534-3.6892-3.8164-2.9895-1.7174-7.2511-2.099-4.2616-0.44525-10.559-0.44525h-15.011v27.351h16.283q5.9154 0 9.4138-0.57246 3.4984-0.63607 6.4879-2.5443 2.9895-1.9082 4.198-4.8977 1.2721-3.0531 1.2721-7.1875zm8.078 43.189q0-5.7246-1.7174-9.0957-1.7174-3.3711-6.2334-5.7246-3.0531-1.5902-7.442-2.0354-4.3252-0.50886-10.559-0.50886h-19.782v35.238h16.665q8.2688 0 13.548-0.82689 5.2793-0.89049 8.6505-3.1803 3.562-2.4806 5.2157-5.661 1.6538-3.1803 1.6538-8.2052z" fill="#2b0000" stroke-width="1.0012" aria-label="B"/>
+    </g>
+</svg>
diff --git a/assets/img/icon.svg b/assets/img/icon.svg
deleted file mode 100644
index be3490823..000000000
--- a/assets/img/icon.svg
+++ /dev/null
@@ -1,84 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="144"
-   height="144"
-   id="svg2"
-   version="1.1"
-   inkscape:version="0.48.2 r9819"
-   inkscape:export-filename="/Users/fred/Devel/websites/miniflux/favicon.png"
-   inkscape:export-xdpi="40"
-   inkscape:export-ydpi="40"
-   sodipodi:docname="icon.svg">
-  <defs
-     id="defs4" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="1"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1"
-     inkscape:cx="125.35606"
-     inkscape:cy="101.67816"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     showgrid="false"
-     inkscape:window-width="1366"
-     inkscape:window-height="720"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1" />
-  <metadata
-     id="metadata7">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(0,-908.36218)">
-    <text
-       xml:space="preserve"
-       style="font-size:32.87251282px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#d40000;fill-opacity:1;stroke:none;font-family:Sans"
-       x="-0.76592249"
-       y="865.71136"
-       id="text3769"
-       sodipodi:linespacing="125%"
-       transform="scale(0.83777396,1.1936394)"><tspan
-         sodipodi:role="line"
-         id="tspan3771"
-         x="-0.76592249"
-         y="865.71136"
-         style="font-size:118.34104919px;font-weight:bold;fill:#d40000;-inkscape-font-specification:Sans Bold">K</tspan></text>
-    <text
-       xml:space="preserve"
-       style="font-size:130.11079407px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#2b0000;fill-opacity:1;stroke:none;font-family:Sans"
-       x="78.060204"
-       y="932.96344"
-       id="text3102"
-       sodipodi:linespacing="125%"
-       transform="scale(0.90196969,1.1086847)"><tspan
-         sodipodi:role="line"
-         id="tspan3104"
-         x="78.060204"
-         y="932.96344">B</tspan></text>
-  </g>
-</svg>
diff --git a/assets/img/inkscape-optimized-icon.svg b/assets/img/inkscape-optimized-icon.svg
new file mode 100644
index 000000000..4d7b92bc9
--- /dev/null
+++ b/assets/img/inkscape-optimized-icon.svg
@@ -0,0 +1,6 @@
+<svg version="1.1" viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg">
+<g transform="translate(0 -908.36)">
+<path transform="scale(.82874 1.2066)" d="m86.692 856.38h-27.513l-25.994-34.814-5.2572 6.367v28.447h-22.431v-86.977h22.431v39.37l31.076-39.37h25.994l-33.996 40.247z" fill="#d40000" stroke-width="1.0109" aria-label="K"/>
+<path transform="scale(.9009 1.11)" d="m154.53 901.82q0 7.0603-2.6715 12.467-2.6715 5.4065-7.1875 8.9049-5.3429 4.198-11.767 5.979-6.3606 1.781-16.22 1.781h-33.584v-94.71h28.05q10.368 0 15.52 0.76328 5.1521 0.76328 9.859 3.1803 5.2157 2.7351 7.5692 7.0603 2.3534 4.2616 2.3534 10.241 0 6.7423-3.4348 11.513-3.4348 4.7069-9.1593 7.5692v0.50885q9.6046 1.9718 15.138 8.4597 5.5338 6.4242 5.5338 16.283zm-21.181-42.68q0-3.4348-1.1449-5.7882-1.1449-2.3534-3.6892-3.8164-2.9895-1.7174-7.2511-2.099-4.2616-0.44525-10.559-0.44525h-15.011v27.351h16.283q5.9154 0 9.4138-0.57246 3.4984-0.63607 6.4879-2.5443 2.9895-1.9082 4.198-4.8977 1.2721-3.0531 1.2721-7.1875zm8.078 43.189q0-5.7246-1.7174-9.0957-1.7174-3.3711-6.2334-5.7246-3.0531-1.5902-7.442-2.0354-4.3252-0.50886-10.559-0.50886h-19.782v35.238h16.665q8.2688 0 13.548-0.82689 5.2793-0.89049 8.6505-3.1803 3.562-2.4806 5.2157-5.661 1.6538-3.1803 1.6538-8.2052z" fill="#2b0000" stroke-width="1.0012" aria-label="B"/>
+</g>
+</svg>
diff --git a/assets/img/inkscape-path-icon.svg b/assets/img/inkscape-path-icon.svg
new file mode 100644
index 000000000..625faead1
--- /dev/null
+++ b/assets/img/inkscape-path-icon.svg
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="144"
+   height="144"
+   id="svg2"
+   version="1.1"
+   inkscape:version="1.3 (0e150ed, 2023-07-21)"
+   inkscape:export-filename="/Users/fred/Devel/websites/miniflux/favicon.png"
+   inkscape:export-xdpi="40"
+   inkscape:export-ydpi="40"
+   sodipodi:docname="inkscape-path-icon.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:zoom="4"
+     inkscape:cx="83.125"
+     inkscape:cy="95.125"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:window-width="1392"
+     inkscape:window-height="1212"
+     inkscape:window-x="828"
+     inkscape:window-y="157"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1">
+    <inkscape:grid
+       id="grid1"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="1"
+       spacingy="1"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       dotted="false"
+       gridanglex="30"
+       gridanglez="30"
+       visible="true" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-908.36218)">
+    <path
+       style="font-weight:bold;font-size:119.63px;line-height:1.25;-inkscape-font-specification:'Sans Bold';letter-spacing:0px;word-spacing:0px;fill:#d40000;stroke-width:1.01089"
+       d="M 86.691831,856.38123 H 59.179268 l -25.993822,-34.8142 -5.257178,6.36702 v 28.44718 H 5.4976436 V 769.40414 H 27.928268 v 39.37042 l 31.075761,-39.37042 h 25.993823 l -33.996416,40.24662 z"
+       id="text3769"
+       transform="scale(0.82874493,1.2066439)"
+       aria-label="K" />
+    <path
+       style="font-size:130.266px;line-height:1.25;letter-spacing:0px;word-spacing:0px;fill:#2b0000;stroke-width:1.00119"
+       d="m 154.53448,901.82082 q 0,7.06032 -2.67147,12.46687 -2.67147,5.40654 -7.18753,8.9049 -5.34294,4.19802 -11.76719,5.97901 -6.36065,1.78098 -16.21965,1.78098 H 83.104438 v -94.71001 h 28.050442 q 10.36785,0 15.51998,0.76328 5.15212,0.76328 9.85899,3.18032 5.21573,2.73508 7.56917,7.06032 2.35344,4.26163 2.35344,10.24064 0,6.74228 -3.43475,11.51276 -3.43475,4.70688 -9.15933,7.56917 v 0.50885 q 9.60458,1.9718 15.13834,8.45966 5.53376,6.42425 5.53376,16.28325 z M 133.35353,859.1409 q 0,-3.43475 -1.14491,-5.78819 -1.14492,-2.35344 -3.68918,-3.81639 -2.9895,-1.71737 -7.25113,-2.09901 -4.26164,-0.44525 -10.55867,-0.44525 H 95.698515 v 27.35078 h 16.283255 q 5.9154,0 9.41375,-0.57246 3.49835,-0.63607 6.48786,-2.54426 2.9895,-1.90819 4.19802,-4.8977 1.27213,-3.05311 1.27213,-7.18752 z m 8.07802,43.18877 q 0,-5.72458 -1.71737,-9.09572 -1.71738,-3.37114 -6.23343,-5.72458 -3.05311,-1.59016 -7.44196,-2.0354 -4.32524,-0.50886 -10.55867,-0.50886 H 95.698515 v 35.23798 H 112.3634 q 8.26884,0 13.54818,-0.82689 5.27933,-0.89049 8.65047,-3.18032 3.56197,-2.48065 5.21573,-5.66097 1.65377,-3.18033 1.65377,-8.20524 z"
+       id="text3102"
+       transform="scale(0.90089659,1.1100053)"
+       aria-label="B" />
+  </g>
+</svg>
diff --git a/assets/img/inkscape-text-icon.svg b/assets/img/inkscape-text-icon.svg
new file mode 100644
index 000000000..710924219
--- /dev/null
+++ b/assets/img/inkscape-text-icon.svg
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="144"
+   height="144"
+   id="svg2"
+   version="1.1"
+   inkscape:version="1.3 (0e150ed, 2023-07-21)"
+   inkscape:export-filename="/Users/fred/Devel/websites/miniflux/favicon.png"
+   inkscape:export-xdpi="40"
+   inkscape:export-ydpi="40"
+   sodipodi:docname="inkscape-text-icon.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="1"
+     inkscape:pageshadow="2"
+     inkscape:zoom="4"
+     inkscape:cx="83.125"
+     inkscape:cy="95.125"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     inkscape:window-width="1392"
+     inkscape:window-height="1212"
+     inkscape:window-x="828"
+     inkscape:window-y="157"
+     inkscape:window-maximized="0"
+     inkscape:showpageshadow="2"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1">
+    <inkscape:grid
+       id="grid1"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="1"
+       spacingy="1"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       dotted="false"
+       gridanglex="30"
+       gridanglez="30"
+       visible="true" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-908.36218)">
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.1307px;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#d40000;fill-opacity:1;stroke:none;stroke-width:1.01089"
+       x="-5.6008425"
+       y="856.38123"
+       id="text3769"
+       transform="scale(0.82874493,1.2066439)"><tspan
+         sodipodi:role="line"
+         id="tspan3771"
+         x="-5.6008425"
+         y="856.38123"
+         style="font-weight:bold;font-size:119.63px;line-height:1.25;font-family:sans-serif;-inkscape-font-specification:'Sans Bold';fill:#d40000;stroke-width:1.01089">K</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-style:normal;font-weight:normal;font-size:12.0143px;line-height:0%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#2b0000;fill-opacity:1;stroke:none;stroke-width:1.00119"
+       x="70.383148"
+       y="930.95258"
+       id="text3102"
+       transform="scale(0.90089659,1.1100053)"><tspan
+         sodipodi:role="line"
+         id="tspan3104"
+         x="70.383148"
+         y="930.95258"
+         style="font-size:130.266px;line-height:1.25;font-family:sans-serif;stroke-width:1.00119">B</tspan></text>
+  </g>
+</svg>