From 9a11dfa7f97fd0f3c340f7ae105a806170dc83a0 Mon Sep 17 00:00:00 2001
From: Juan de la Cruz <delacruzgarciajuan@gmail.com>
Date: Wed, 16 Sep 2026 08:36:12 +0200
Subject: [PATCH] :sparkles: Replace PNG favicon with theme-aware SVG (#11640)

* :sparkles: Replace PNG favicon with theme-aware SVG

* :tada: Add color changing favicon to docs page

---------

Co-authored-by: Eva Marco <evamarcod@gmail.com>
---
 docs/_includes/layouts/base.njk                 | 3 ++-
 docs/img/favicon.svg                            | 7 +++++++
 frontend/resources/images/favicon.svg           | 7 +++++++
 frontend/resources/templates/challenge.mustache | 3 ++-
 frontend/resources/templates/index.mustache     | 3 ++-
 5 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 docs/img/favicon.svg
 create mode 100644 frontend/resources/images/favicon.svg

diff --git a/docs/_includes/layouts/base.njk b/docs/_includes/layouts/base.njk
index 97fc32e20b..56ce942bca 100644
--- a/docs/_includes/layouts/base.njk
+++ b/docs/_includes/layouts/base.njk
@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="{{ '/css/index.css' | url }}">
     <link rel="stylesheet" href="{{ '/css/prism.css' | url }}">
-    <link rel="shortcut icon" href="/img/favicon.png">
+    <link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
+    <link rel="icon" href="/img/favicon.png" type="image/png">
     <link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
     <link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
     <link rel="preconnect" href="https://fonts.googleapis.com">
diff --git a/docs/img/favicon.svg b/docs/img/favicon.svg
new file mode 100644
index 0000000000..ea2bf2e33f
--- /dev/null
+++ b/docs/img/favicon.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-42 0 346 346">
+  <style>
+    path { fill: #000; }
+    @media (prefers-color-scheme: dark) { path { fill: #fff; } }
+  </style>
+  <path transform="translate(136.64258,-280.3457)" d="m -68.324219,280.3457 -36.376951,51.23633 0,28.96289 -31.65625,15.05664 -0.28516,-0.13476 0,11.90234 0,177.05078 123.417971,58.30664 7.5429684,3.56055 7.5410156,-3.56055 123.419925,-58.30664 0,-188.95312 -0.23242,0.10937 -31.666021,-15.06055 0,-28.93359 -1.107421,-1.55859 -35.271485,-49.67774 -36.378906,51.23633 0,0.0508 -26.4707032,-37.28125 -26.2656248,36.99414 -0.939453,-1.32226 -35.271485,-49.67774 z m 6.435547,29.76172 14.070313,19.81641 -41.011719,0 13.90625,-19.58399 13.035156,-0.23242 z m 125.326172,0 14.070312,19.81641 -41.011718,0 13.904297,-19.58399 13.037109,-0.23242 z m -62.84960938,14.00781 14.07031238,19.81446 -41.009765,0 13.904296,-19.58399 13.03515662,-0.23047 z m -93.30664062,15.79493 19.451172,0 0,65.49609 -19.451172,-9.18945 0,-56.30664 z m 29.4375,0 19.353516,0 -0.002,79.35546 -19.353515,-9.14257 0.002,-70.21289 z m 95.886719,0 19.453125,0 -0.002,70.14648 -19.449219,9.1875 -0.002,-79.33398 z m 29.4375,0 19.353515,0 0,56.28515 -19.353515,9.14258 0,-65.42773 z m -92.285157,14.00586 19.451172,0 0,81.0039 -19.451172,-9.18945 0,-71.81445 z m 29.4375005,0 19.3535155,0 -0.002,71.9707 -19.35351562,9.14453 0.001953,-81.11523 z m 94.1835935,21.52539 17.125004,7.00195 -17.125004,8.08984 0,-15.09179 z m -198.080076,0.0254 0,15.08984 -17.12305,-8.08984 17.12305,-7 z m -16.85938,23.80859 108.335941,51.17773 0,155.58985 -108.335941,-51.17774 0,-155.58984 z m 231.75586,0 0,155.58984 -108.335935,51.17774 0,-155.58985 108.335935,-51.17773 z"/>
+</svg>
diff --git a/frontend/resources/images/favicon.svg b/frontend/resources/images/favicon.svg
new file mode 100644
index 0000000000..ea2bf2e33f
--- /dev/null
+++ b/frontend/resources/images/favicon.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-42 0 346 346">
+  <style>
+    path { fill: #000; }
+    @media (prefers-color-scheme: dark) { path { fill: #fff; } }
+  </style>
+  <path transform="translate(136.64258,-280.3457)" d="m -68.324219,280.3457 -36.376951,51.23633 0,28.96289 -31.65625,15.05664 -0.28516,-0.13476 0,11.90234 0,177.05078 123.417971,58.30664 7.5429684,3.56055 7.5410156,-3.56055 123.419925,-58.30664 0,-188.95312 -0.23242,0.10937 -31.666021,-15.06055 0,-28.93359 -1.107421,-1.55859 -35.271485,-49.67774 -36.378906,51.23633 0,0.0508 -26.4707032,-37.28125 -26.2656248,36.99414 -0.939453,-1.32226 -35.271485,-49.67774 z m 6.435547,29.76172 14.070313,19.81641 -41.011719,0 13.90625,-19.58399 13.035156,-0.23242 z m 125.326172,0 14.070312,19.81641 -41.011718,0 13.904297,-19.58399 13.037109,-0.23242 z m -62.84960938,14.00781 14.07031238,19.81446 -41.009765,0 13.904296,-19.58399 13.03515662,-0.23047 z m -93.30664062,15.79493 19.451172,0 0,65.49609 -19.451172,-9.18945 0,-56.30664 z m 29.4375,0 19.353516,0 -0.002,79.35546 -19.353515,-9.14257 0.002,-70.21289 z m 95.886719,0 19.453125,0 -0.002,70.14648 -19.449219,9.1875 -0.002,-79.33398 z m 29.4375,0 19.353515,0 0,56.28515 -19.353515,9.14258 0,-65.42773 z m -92.285157,14.00586 19.451172,0 0,81.0039 -19.451172,-9.18945 0,-71.81445 z m 29.4375005,0 19.3535155,0 -0.002,71.9707 -19.35351562,9.14453 0.001953,-81.11523 z m 94.1835935,21.52539 17.125004,7.00195 -17.125004,8.08984 0,-15.09179 z m -198.080076,0.0254 0,15.08984 -17.12305,-8.08984 17.12305,-7 z m -16.85938,23.80859 108.335941,51.17773 0,155.58985 -108.335941,-51.17774 0,-155.58984 z m 231.75586,0 0,155.58984 -108.335935,51.17774 0,-155.58985 108.335935,-51.17773 z"/>
+</svg>
diff --git a/frontend/resources/templates/challenge.mustache b/frontend/resources/templates/challenge.mustache
index 16bba9b6af..2c8ba84ed6 100644
--- a/frontend/resources/templates/challenge.mustache
+++ b/frontend/resources/templates/challenge.mustache
@@ -3,7 +3,8 @@
   <head>
     <meta charset="utf-8" />
     <title>Penpot - Challenge</title>
-    <link rel="icon" href="images/favicon.png" />
+    <link rel="icon" href="images/favicon.svg" type="image/svg+xml" />
+    <link rel="icon" href="images/favicon.png" type="image/png" />
 
     <script>
      var params = new URL(document.location.toString()).searchParams;
diff --git a/frontend/resources/templates/index.mustache b/frontend/resources/templates/index.mustache
index 590408748d..30670db076 100644
--- a/frontend/resources/templates/index.mustache
+++ b/frontend/resources/templates/index.mustache
@@ -27,7 +27,8 @@
     <link rel="icon" href="images/favicon-local.png?version={{& version_tag }}" />
     {{/isDebug}}
     {{^isDebug}}
-    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" />
+    <link rel="icon" href="images/favicon.svg?version={{& version_tag }}" type="image/svg+xml" />
+    <link rel="icon" href="images/favicon.png?version={{& version_tag }}" type="image/png" />
     {{/isDebug}}
 
     <script type="importmap">{{& manifest.importmap }}</script>