content: add favicons

codeforjapan · Feb 12, 2025 · 94090d4 · 94090d4
1 parent 83cabbc
commit 94090d4
Show file tree

Hide file tree

Showing 9 changed files with 38 additions and 0 deletions.
diff --git a/app/components/Favicon.tsx b/app/components/Favicon.tsx
@@ -0,0 +1,12 @@
+// generated with https://realfavicongenerator.net
+
+export const Favicons = () => (
+  <>
+    <link href="/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" />
+    <link href="/favicon.svg" rel="icon" type="image/svg+xml" />
+    <link href="/favicon.ico" rel="shortcut icon" />
+    <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
+    <meta content="BirdXPlorer" name="apple-mobile-web-app-title" />
+    <link href="/site.webmanifest" rel="manifest" />
+  </>
+);
diff --git a/app/root.tsx b/app/root.tsx
@@ -15,6 +15,7 @@ import {
 import dayjs from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 
+import { Favicons } from "./components/Favicon";
 import { mantineTheme } from "./config/mantine";
 
 dayjs.extend(customParseFormat);
@@ -25,6 +26,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
       <head>
         <meta charSet="utf-8" />
         <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <Favicons />
         <Meta />
         <Links />
         <ColorSchemeScript />

diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "BirdXPlorer",
+  "short_name": "BirdXPlorer",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/public/web-app-manifest-192x192.png b/public/web-app-manifest-192x192.png
diff --git a/public/web-app-manifest-512x512.png b/public/web-app-manifest-512x512.png