add new logo (#714)

jkroepke · web-flow · commit 6f31c3f0af75 · 2026-01-07T18:43:47.000Z
diff --git a/README.md b/README.md
@@ -6,6 +6,10 @@
 [![Go Report Card](https://goreportcard.com/badge/github.com/jkroepke/openvpn-auth-oauth2)](https://goreportcard.com/report/github.com/jkroepke/openvpn-auth-oauth2)
 [![codecov](https://codecov.io/gh/jkroepke/openvpn-auth-oauth2/graph/badge.svg?token=66VT000UYO)](https://codecov.io/gh/jkroepke/openvpn-auth-oauth2)
 
+<center>
+<img src="https://github.com/jkroepke/openvpn-auth-oauth2/blob/main/docs/img/logo.svg?raw=true" alt="openvpn-auth-oauth2 logo" width="400"/>
+</center>
+
 # openvpn-auth-oauth2
 
 ⭐ Don't forget to star this repository! ⭐
@@ -69,6 +73,7 @@ Thanks to JetBrains IDEs and Sparklabs for their support.
     <tr>
       <th><a href="https://www.jetbrains.com/?from=jkroepke">JetBrains IDEs</a></th>
       <th><a href="https://www.sparklabs.com/viscosity">Sparklabs</a></th>
+      <th><a href="https://rafaelalex.de/">Rafael Alex (Logo Design)</a></th>
     </tr>
   </thead>
   <tbody>
@@ -90,6 +95,13 @@ Thanks to JetBrains IDEs and Sparklabs for their support.
           </a>
         </p>
       </td>
+      <td>
+        <p align="center">
+          <a href="https://rafaelalex.de/">
+            <img src="https://rafaelalex.de/logo-rafaelalex.svg" alt="Sparklabs Viscosity logo" style="height: 100px">
+          </a>
+        </p>
+      </td>
     </tr>
   </tbody>
 </table>
diff --git a/docs/Layout Customization.md b/docs/Layout Customization.md
@@ -23,7 +23,7 @@ The default assets are here:
 
 - `style.css`: CSS file to enrich the default layout. By default, it is empty.
 - `mvp.css`: [MVP](https://github.com/andybrewer/mvp) CSS framework
-- `favicon.png`: Favicon of the login page
+- `favicon.svg`: Favicon of the login page
 - `i18n.js`: Localization script
 - `i18n/<lang>.json`: Language specific localization file. <lang> is the language code, e.g., `en` for English.
   See [de.json](https://github.com/jkroepke/openvpn-auth-oauth2/blob/main/internal/ui/static/i18n/de.json) for an example.
diff --git a/docs/img/logo.png b/docs/img/logo.png
diff --git a/docs/img/logo.svg b/docs/img/logo.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 303.24 333.31">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ee7f23;
+      }
+
+      .cls-2 {
+        fill: #1b3967;
+      }
+
+      .cls-3 {
+        fill: #5f7495;
+      }
+
+      .cls-4 {
+        fill: #bbc4d1;
+      }
+    </style>
+  </defs>
+  <g id="Ebene_1-2" data-name="Ebene 1">
+    <g>
+      <path class="cls-2" d="M90.46,108.44c0,2.45-.31,4.83-.89,7.1l29.54,17.23c7.44-9.82,19.23-16.17,32.51-16.17,12.02,0,22.83,5.21,30.29,13.48l31.09-18.14c-.14-1.15-.22-2.32-.22-3.5,0-1.56.13-3.09.37-4.59l-41.37-24.14c-5.16,5.15-12.29,8.33-20.16,8.33-8.73,0-16.54-3.93-21.78-10.11l-40.25,23.48c.57,2.24.87,4.59.87,7.01Z"/>
+      <circle class="cls-1" cx="151.62" cy="158.09" r="24.46"/>
+      <path class="cls-2" d="M82.73,186.76l29.91-17.45c-1.16-3.78-1.78-7.79-1.78-11.95,0-3.39.42-6.69,1.2-9.84l-30.88-18.02c-5.07,4.64-11.83,7.47-19.24,7.47-15.76,0-28.54-12.78-28.54-28.54,0-2.08.23-4.11.65-6.07L0,82.51v80.39l41.04,23.94c5.21-5.59,12.64-9.09,20.88-9.09s15.6,3.47,20.8,9.01Z"/>
+      <path class="cls-2" d="M.43,182.76c1.29,15.91,5.48,30.44,11.66,43.67l22.06-12.87c-.49-2.1-.76-4.29-.76-6.55,0-1.63.14-3.23.41-4.79L.43,182.76Z"/>
+      <path class="cls-3" d="M143.47,197.32c-9.16-1.86-17.21-6.8-23.01-13.68l-30.42,17.74c.28,1.6.43,3.23.43,4.91,0,2.68-.38,5.27-1.07,7.73l39.98,23.32c3.58-4.45,8.47-7.81,14.09-9.48v-30.55Z"/>
+      <path class="cls-3" d="M212.78,206.29c0-1.27.09-2.52.25-3.75l-30.97-18.07c-5.74,6.45-13.5,11.06-22.29,12.84v30.55c4.83,1.44,9.13,4.12,12.51,7.68l41-23.91c-.33-1.73-.51-3.52-.51-5.34Z"/>
+      <path class="cls-3" d="M143.47,283.29c-11.79-3.51-20.39-14.42-20.39-27.35,0-.87.05-1.74.12-2.59l-42.54-24.82c-5.01,4.37-11.56,7.02-18.74,7.02-7.62,0-14.53-2.99-19.65-7.85l-22.45,13.1c34.81,56.51,104.98,85.58,123.64,92.51v-50.01Z"/>
+      <path class="cls-3" d="M259.36,184.18l43.88-25.59v-76.39l-34.1,19.89c.46,2.04.72,4.17.72,6.35,0,15.76-12.78,28.54-28.54,28.54-8.69,0-16.47-3.89-21.7-10.02l-29.43,17.17c1.42,4.15,2.21,8.6,2.21,13.23s-.76,8.92-2.13,13.01l29.51,17.21c5.23-6.02,12.94-9.84,21.55-9.84,6.85,0,13.13,2.41,18.04,6.43Z"/>
+      <path class="cls-2" d="M41.92,88.81c5.15-5.06,12.21-8.19,20-8.19s14.22,2.85,19.31,7.53l42.06-24.53c-.13-1.11-.21-2.23-.21-3.38,0-12.93,8.6-23.84,20.39-27.35V0C47.6,1.2,0,23.14,0,23.14v41.21l41.92,24.45Z"/>
+      <path class="cls-4" d="M258.97,229.43c-4.86,3.83-10.99,6.12-17.66,6.12-8.05,0-15.32-3.34-20.51-8.71l-41.11,23.98c.3,1.66.46,3.36.46,5.11,0,12.93-8.6,23.84-20.39,27.35v50.01c18.43-6.85,87.07-35.28,122.3-90.4l-23.1-13.48Z"/>
+      <path class="cls-4" d="M290.09,228.7c7.36-15.05,12.13-31.83,12.99-50.42l-34.54,20.15c.85,2.71,1.32,5.59,1.32,8.58,0,3.16-.52,6.19-1.47,9.03l21.7,12.66Z"/>
+      <path class="cls-2" d="M159.77,32.88c11.79,3.51,20.39,14.42,20.39,27.35,0,2.01-.21,3.97-.61,5.86l40.74,23.77c5.22-5.68,12.7-9.24,21.02-9.24,7.69,0,14.66,3.05,19.79,7.99l42.13-24.57V23.14S255.64,1.2,159.77,0v32.88Z"/>
+    </g>
+  </g>
+</svg>
diff --git a/internal/httphandler/handler_test.go b/internal/httphandler/handler_test.go
@@ -34,7 +34,7 @@ func TestAssets(t *testing.T) {
 
 	handler := httphandler.New(conf, oAuth2Client)
 
-	require.HTTPSuccess(t, handler.ServeHTTP, http.MethodGet, "/assets/favicon.png", nil)
+	require.HTTPSuccess(t, handler.ServeHTTP, http.MethodGet, "/assets/favicon.svg", nil)
 	require.HTTPSuccess(t, handler.ServeHTTP, http.MethodGet, "/assets/i18n/de.json", nil)
 }
 
diff --git a/internal/ui/assets/assets.go b/internal/ui/assets/assets.go
@@ -2,5 +2,5 @@ package assets
 
 import "embed"
 
-//go:embed favicon.png i18n.js style.css i18n
+//go:embed favicon.svg i18n.js style.css i18n
 var FS embed.FS
diff --git a/internal/ui/assets/favicon.png b/internal/ui/assets/favicon.png
diff --git a/internal/ui/assets/favicon.svg b/internal/ui/assets/favicon.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_2" data-name="Ebene 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 303.24 333.31">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ee7f23;
+      }
+
+      .cls-2 {
+        fill: #1b3967;
+      }
+
+      .cls-3 {
+        fill: #5f7495;
+      }
+
+      .cls-4 {
+        fill: #bbc4d1;
+      }
+    </style>
+  </defs>
+  <g id="Ebene_1-2" data-name="Ebene 1">
+    <g>
+      <path class="cls-2" d="M90.46,108.44c0,2.45-.31,4.83-.89,7.1l29.54,17.23c7.44-9.82,19.23-16.17,32.51-16.17,12.02,0,22.83,5.21,30.29,13.48l31.09-18.14c-.14-1.15-.22-2.32-.22-3.5,0-1.56.13-3.09.37-4.59l-41.37-24.14c-5.16,5.15-12.29,8.33-20.16,8.33-8.73,0-16.54-3.93-21.78-10.11l-40.25,23.48c.57,2.24.87,4.59.87,7.01Z"/>
+      <circle class="cls-1" cx="151.62" cy="158.09" r="24.46"/>
+      <path class="cls-2" d="M82.73,186.76l29.91-17.45c-1.16-3.78-1.78-7.79-1.78-11.95,0-3.39.42-6.69,1.2-9.84l-30.88-18.02c-5.07,4.64-11.83,7.47-19.24,7.47-15.76,0-28.54-12.78-28.54-28.54,0-2.08.23-4.11.65-6.07L0,82.51v80.39l41.04,23.94c5.21-5.59,12.64-9.09,20.88-9.09s15.6,3.47,20.8,9.01Z"/>
+      <path class="cls-2" d="M.43,182.76c1.29,15.91,5.48,30.44,11.66,43.67l22.06-12.87c-.49-2.1-.76-4.29-.76-6.55,0-1.63.14-3.23.41-4.79L.43,182.76Z"/>
+      <path class="cls-3" d="M143.47,197.32c-9.16-1.86-17.21-6.8-23.01-13.68l-30.42,17.74c.28,1.6.43,3.23.43,4.91,0,2.68-.38,5.27-1.07,7.73l39.98,23.32c3.58-4.45,8.47-7.81,14.09-9.48v-30.55Z"/>
+      <path class="cls-3" d="M212.78,206.29c0-1.27.09-2.52.25-3.75l-30.97-18.07c-5.74,6.45-13.5,11.06-22.29,12.84v30.55c4.83,1.44,9.13,4.12,12.51,7.68l41-23.91c-.33-1.73-.51-3.52-.51-5.34Z"/>
+      <path class="cls-3" d="M143.47,283.29c-11.79-3.51-20.39-14.42-20.39-27.35,0-.87.05-1.74.12-2.59l-42.54-24.82c-5.01,4.37-11.56,7.02-18.74,7.02-7.62,0-14.53-2.99-19.65-7.85l-22.45,13.1c34.81,56.51,104.98,85.58,123.64,92.51v-50.01Z"/>
+      <path class="cls-3" d="M259.36,184.18l43.88-25.59v-76.39l-34.1,19.89c.46,2.04.72,4.17.72,6.35,0,15.76-12.78,28.54-28.54,28.54-8.69,0-16.47-3.89-21.7-10.02l-29.43,17.17c1.42,4.15,2.21,8.6,2.21,13.23s-.76,8.92-2.13,13.01l29.51,17.21c5.23-6.02,12.94-9.84,21.55-9.84,6.85,0,13.13,2.41,18.04,6.43Z"/>
+      <path class="cls-2" d="M41.92,88.81c5.15-5.06,12.21-8.19,20-8.19s14.22,2.85,19.31,7.53l42.06-24.53c-.13-1.11-.21-2.23-.21-3.38,0-12.93,8.6-23.84,20.39-27.35V0C47.6,1.2,0,23.14,0,23.14v41.21l41.92,24.45Z"/>
+      <path class="cls-4" d="M258.97,229.43c-4.86,3.83-10.99,6.12-17.66,6.12-8.05,0-15.32-3.34-20.51-8.71l-41.11,23.98c.3,1.66.46,3.36.46,5.11,0,12.93-8.6,23.84-20.39,27.35v50.01c18.43-6.85,87.07-35.28,122.3-90.4l-23.1-13.48Z"/>
+      <path class="cls-4" d="M290.09,228.7c7.36-15.05,12.13-31.83,12.99-50.42l-34.54,20.15c.85,2.71,1.32,5.59,1.32,8.58,0,3.16-.52,6.19-1.47,9.03l21.7,12.66Z"/>
+      <path class="cls-2" d="M159.77,32.88c11.79,3.51,20.39,14.42,20.39,27.35,0,2.01-.21,3.97-.61,5.86l40.74,23.77c5.22-5.68,12.7-9.24,21.02-9.24,7.69,0,14.66,3.05,19.79,7.99l42.13-24.57V23.14S255.64,1.2,159.77,0v32.88Z"/>
+    </g>
+  </g>
+</svg>
diff --git a/internal/ui/index.gohtml b/internal/ui/index.gohtml
@@ -9,7 +9,7 @@
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>OpenVPN SSO Login</title>
   <link rel="stylesheet" href="../assets/style.css">
-  <link rel="icon" href="../assets/favicon.png" sizes="192x192"/>
+  <link rel="icon" href="../assets/favicon.svg" sizes="192x192"/>
 </head>
 <body>
 <main>

Original file line number	Diff line number	Diff line change
`@@ -34,7 +34,7 @@ func TestAssets(t *testing.T) {`
`34`	`34`
`35`	`35`	`handler := httphandler.New(conf, oAuth2Client)`
`36`	`36`
`37`		`- require.HTTPSuccess(t, handler.ServeHTTP, http.MethodGet, "/assets/favicon.png", nil)`
	`37`	`+ require.HTTPSuccess(t, handler.ServeHTTP, http.MethodGet, "/assets/favicon.svg", nil)`
`38`	`38`	`require.HTTPSuccess(t, handler.ServeHTTP, http.MethodGet, "/assets/i18n/de.json", nil)`
`39`	`39`	`}`
`40`	`40`