fix: logo icon on desktop chrome and favicon on mobile

hugo.yaml

@@ -105,8 +105,8 @@ params:
     displayTitle: true
     displayLogo: true
     logo:
-      path: images/logo-128x128.svg
+      path: images/logo-128x128.png
-      dark: images/logo-128x128.svg
+      dark: images/logo-128x128.png
       width: 30
       height: 15
     width: wide

layouts/partials/favicons.html

@@ -0,0 +1,6 @@
+<link rel="icon shortcut" href="{{ "favicon.ico" | relURL }}" sizes="32x32" />
+<link rel="icon" href="{{ "favicon-16x16.png" | relURL }}" type="image/png" sizes="16x16" />
+<link rel="icon" href="{{ "favicon-32x32.png" | relURL }}" type="image/png" sizes="32x32" />
+<link rel="icon" href="{{ "android-chrome-192x192.png" | relURL }}" type="image/png" sizes="192x192" />
+<link rel="icon" href="{{ "android-chrome-512x512.png" | relURL }}" type="image/png" sizes="512x512" />
+<link rel="apple-touch-icon" href="{{ "apple-touch-icon.png" | relURL }}" sizes="180x180" />

static/site.webmanifest

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