🧹 Chore: Add PNG versions to all images to ensure SEO compatibility

semantyk · Jul 6, 2024 · 79aafb0 · 79aafb0
2 parents efcd1b8 + 65a17ea
commit 79aafb0
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 19 deletions.
diff --git a/public/favicon-dark.ico b/public/favicon-dark.ico
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/icon-dark.png b/public/icon-dark.png
diff --git a/public/icon.png b/public/icon.png
diff --git a/public/seo-dark.png b/public/seo-dark.png
diff --git a/public/seo.png b/public/seo.png
diff --git a/src/backend/logic/seo.js b/src/backend/logic/seo.js
@@ -45,44 +45,96 @@ export async function getMetadata() {
         icons: {
             apple: [
                 {
+                    type: "image/svg+xml",
                     media: "(prefers-color-scheme: light)",
                     url: "/icon.svg"
                 },
                 {
+                    type: "image/png",
+                    media: "(prefers-color-scheme: light)",
+                    url: "/icon.png"
+                },
+                {
+                    type: "image/svg+xml",
                     media: "(prefers-color-scheme: dark)",
-                    url: "/icon-dark.svg",
+                    url: "/icon-dark.svg"
+                },
+                {
+                    type: "image/png",
+                    media: "(prefers-color-scheme: dark)",
+                    url: "/icon-dark.png"
+                },
+            ],
+            icon: [
+                {
+                    type: "image/svg+xml",
+                    media: "(prefers-color-scheme: light)",
+                    url: "/icon.svg"
+                },
+                {
+                    type: "image/png",
+                    media: "(prefers-color-scheme: light)",
+                    url: "/icon.png"
+                },
+                {
+                    type: "image/svg+xml",
+                    media: "(prefers-color-scheme: dark)",
+                    url: "/icon-dark.svg"
+                },
+                {
+                    type: "image/png",
+                    media: "(prefers-color-scheme: dark)",
+                    url: "/icon-dark.png"
+                },
+            ],
+            shortcut: [
+                {
+                    type: "image/svg+xml",
+                    media: "(prefers-color-scheme: light)",
+                    url: "/favicon.svg"
+                },
+                {
+                    type: "image/x-icon",
+                    media: "(prefers-color-scheme: light)",
+                    url: "/favicon.ico"
+                },
+                {
+                    type: "image/svg+xml",
+                    media: "(prefers-color-scheme: dark)",
+                    url: "/favicon-dark.svg"
+                },
+                {
+                    type: "image/x-icon",
+                    media: "(prefers-color-scheme: dark)",
+                    url: "/favicon-dark.ico"
                 }
             ],
-            icon: [{
-                media: "(prefers-color-scheme: light)",
-                url: "/icon.svg"
-            }, {
-                media: "(prefers-color-scheme: dark)",
-                url: "/icon-dark.svg"
-            }],
-            shortcut: [{
-                type: "image/x-icon",
-                media: "(prefers-color-scheme: light)",
-                url: "/favicon.svg"
-            }, {
-                type: "image/x-icon",
-                media: "(prefers-color-scheme: dark)",
-                url: "/favicon-dark.svg"
-            }],
         },
         keywords: app.keywords,
         lang: app.lang,
         openGraph: {
             description: `${app.slogan} | ${app.description}`,
             images: [
                 {
+                    type: "image/svg+xml",
                     media: "(prefers-color-scheme: light)",
                     url: "/seo.svg"
                 },
                 {
+                    type: "image/png",
+                    media: "(prefers-color-scheme: light)",
+                    url: "/seo.png"
+                },
+                {
+                    type: "image/svg+xml",
                     media: "(prefers-color-scheme: dark)",
                     url: "/seo-dark.svg"
-                }
+                },
+                {
+                    type: "image/png",
+                    media: "(prefers-color-scheme: dark)",
+                    url: "/seo-dark.png"
+                },
             ],
             locale: app.lang,
             siteName: app.name,
@@ -101,13 +153,25 @@ export async function getMetadata() {
             description: `${app.slogan} | ${app.description}`,
             images: [
                 {
+                    type: "image/svg+xml",
                     media: "(prefers-color-scheme: light)",
                     url: "/seo.svg"
                 },
                 {
+                    type: "image/png",
+                    media: "(prefers-color-scheme: light)",
+                    url: "/seo.png"
+                },
+                {
+                    type: "image/svg+xml",
                     media: "(prefers-color-scheme: dark)",
                     url: "/seo-dark.svg"
-                }
+                },
+                {
+                    type: "image/png",
+                    media: "(prefers-color-scheme: dark)",
+                    url: "/seo-dark.png"
+                },
             ],
             siteId: "",
             title: app.name,