Merge pull request #1587 from dpgraham4401/dark_mode_favicon

vitalik · web-flow · commit 31c1275ceae3 · 2025-11-14T18:27:57.000+02:00
Add dark mode favicons and template to overwrite favicons
diff --git a/docs/docs/guides/api-docs.md b/docs/docs/guides/api-docs.md
@@ -115,3 +115,19 @@ class MyDocsViewer(DocsBase):
 api = NinjaAPI(docs=MyDocsViewer())
 
 ```
+
+## Using a custom favicon
+
+The django-ninja OpenAPI docs contain a default favicon, the ninja star.
+To use your own, overwrite the `ninja/favicon.html` django template.
+
+```html
+<!-- templates/ninja/favicons.html -->
+{% load static %}
+
+{% block favicons %}
+    <link rel="icon" type="image/png" href="{% static 'path/to/your/favicon.png' %}">
+{% endblock %}
+```
+
+for more information, see the [Django documentation on overriding templates](https://docs.djangoproject.com/en/5.2/howto/overriding-templates/).
diff --git a/docs/docs/img/favicon.png b/docs/docs/img/favicon.png
diff --git a/docs/docs/img/favicon.svg b/docs/docs/img/favicon.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="72"
+   height="72"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <style
+     id="style1">
+    path {
+      fill: black;
+    }
+    @media (prefers-color-scheme: dark) {
+      path {
+        fill: white;
+      }
+    }
+  </style>
+  <path
+     id="path3-3"
+     style="stroke-width:7.26736"
+     d="M 43.856036,1.4321847 C 43.116043,4.5387445 42.29555,9.6234578 40.775762,13.479866 39.412556,16.938955 39.213299,17.712216 35.423353,23.265793 32.35683,22.215991 23.952049,18.580247 16.9469,19.723478 9.0214511,21.016901 2.4895623,27.023481 0.81699423,28.64589 3.6918621,29.311532 10.710658,29.725325 15.292498,31.515238 c 3.102315,1.21193 5.068051,2.499061 8.52272,5.215507 -1.232439,3.841152 -3.943262,8.9479 -3.980128,15.541539 -0.05427,9.705699 5.056975,12.975468 8.77359,18.114782 0.514742,-3.361108 1.469801,-8.78928 3.10277,-12.899081 1.331046,-3.349934 3.536601,-7.033239 5.376635,-9.382723 4.777115,1.788215 10.114328,4.437886 16.898245,4.007818 7.992748,-0.5067 13.252001,-5.198513 16.870558,-9.152568 -3.603846,-1.237006 -9.007861,-1.900975 -13.359392,-3.369266 -3.34266,-1.127879 -8.101316,-3.147585 -9.732282,-4.15837 1.71813,-4.24383 5.43847,-11.977622 4.371221,-18.794864 C 50.958741,9.1152682 48.249576,5.3675905 43.856036,1.4321847 Z M 36.072287,29.640923 c 3.05636,5.07e-4 5.533836,2.488829 5.534111,5.558336 6.77e-4,3.070184 -2.477079,5.559561 -5.534111,5.560069 -3.057708,4.53e-4 -5.536518,-2.489207 -5.535841,-5.560069 2.74e-4,-3.070185 2.478807,-5.558788 5.535841,-5.558336 z" />
+</svg>
diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml
@@ -33,7 +33,7 @@ theme:
         icon: material/weather-sunny
         name: Switch to light mode
   logo: img/docs-logo.png
-  favicon: img/favicon.png
+  favicon: img/favicon.svg
   language: en
   features:
     - navigation.expand
diff --git a/ninja/static/ninja/favicon.png b/ninja/static/ninja/favicon.png
diff --git a/ninja/static/ninja/favicon.svg b/ninja/static/ninja/favicon.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   width="72"
+   height="72"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <style
+     id="style1">
+    path {
+      fill: black;
+    }
+    @media (prefers-color-scheme: dark) {
+      path {
+        fill: white;
+      }
+    }
+  </style>
+  <path
+     id="path3-3"
+     style="stroke-width:7.26736"
+     d="M 43.856036,1.4321847 C 43.116043,4.5387445 42.29555,9.6234578 40.775762,13.479866 39.412556,16.938955 39.213299,17.712216 35.423353,23.265793 32.35683,22.215991 23.952049,18.580247 16.9469,19.723478 9.0214511,21.016901 2.4895623,27.023481 0.81699423,28.64589 3.6918621,29.311532 10.710658,29.725325 15.292498,31.515238 c 3.102315,1.21193 5.068051,2.499061 8.52272,5.215507 -1.232439,3.841152 -3.943262,8.9479 -3.980128,15.541539 -0.05427,9.705699 5.056975,12.975468 8.77359,18.114782 0.514742,-3.361108 1.469801,-8.78928 3.10277,-12.899081 1.331046,-3.349934 3.536601,-7.033239 5.376635,-9.382723 4.777115,1.788215 10.114328,4.437886 16.898245,4.007818 7.992748,-0.5067 13.252001,-5.198513 16.870558,-9.152568 -3.603846,-1.237006 -9.007861,-1.900975 -13.359392,-3.369266 -3.34266,-1.127879 -8.101316,-3.147585 -9.732282,-4.15837 1.71813,-4.24383 5.43847,-11.977622 4.371221,-18.794864 C 50.958741,9.1152682 48.249576,5.3675905 43.856036,1.4321847 Z M 36.072287,29.640923 c 3.05636,5.07e-4 5.533836,2.488829 5.534111,5.558336 6.77e-4,3.070184 -2.477079,5.559561 -5.534111,5.560069 -3.057708,4.53e-4 -5.536518,-2.489207 -5.535841,-5.560069 2.74e-4,-3.070185 2.478807,-5.558788 5.535841,-5.558336 z" />
+</svg>
diff --git a/ninja/templates/ninja/favicons.html b/ninja/templates/ninja/favicons.html
@@ -0,0 +1,6 @@
+{% load static %}
+
+{% block favicons %}
+    <link rel="icon" href="{% static 'ninja/favicon.svg' %}" type="image/svg+xml">
+    <link rel="icon" href="{% static 'ninja/favicon.png' %}" type="image/png">
+{% endblock %}
diff --git a/ninja/templates/ninja/redoc.html b/ninja/templates/ninja/redoc.html
@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <link rel="shortcut icon" href="{% static 'ninja/favicon.png' %}">
+    {% include "ninja/favicons.html" %}
     <title>{{ api.title }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
diff --git a/ninja/templates/ninja/redoc_cdn.html b/ninja/templates/ninja/redoc_cdn.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <link rel="shortcut icon" href="https://django-ninja.dev/img/favicon.png">
+    <link rel="icon" href="https://django-ninja.dev/img/favicon.svg" type="image/svg+xml">
+    <link rel="icon" href="https://django-ninja.dev/img/favicon.png" type="image/png">
     <title>{{ api.title }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style>
diff --git a/ninja/templates/ninja/swagger.html b/ninja/templates/ninja/swagger.html
@@ -3,7 +3,7 @@
 <html>
 <head>
     <link type="text/css" rel="stylesheet" href="{% static 'ninja/swagger-ui.css' %}">
-    <link rel="shortcut icon" href="{% static 'ninja/favicon.png' %}">
+    {% include "ninja/favicons.html" %}
     <title>{{ api.title }}</title>
 </head>
 <body
diff --git a/ninja/templates/ninja/swagger_cdn.html b/ninja/templates/ninja/swagger_cdn.html
@@ -2,7 +2,8 @@
 <html>
 <head>
     <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui.css">
-    <link rel="shortcut icon" href="https://django-ninja.dev/img/favicon.png">
+    <link rel="icon" href="https://django-ninja.dev/img/favicon.svg" type="image/svg+xml">
+    <link rel="icon" href="https://django-ninja.dev/img/favicon.png" type="image/png">
     <title>{{ api.title }}</title>
 </head>
 <body>
diff --git a/tests/demo_project/db.sqlite3 b/tests/demo_project/db.sqlite3
