feat: give v1 a logo, favicons, and app icons in place of stock defaults

README.md

@@ -1,5 +1,8 @@
 <div align="center">
-  <h1 align="center">▶️ <code>v1</code></h1>
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="./.github/assets/v1-logo-dark.svg">
+    <img src="./.github/assets/v1-logo-light.svg" alt="v1" width="160">
+  </picture>
 
   <p align="center">
     <em><strong>Start once. Ship everywhere.</strong></em>

apps/app/src/routes/__root.tsx

@@ -62,7 +62,23 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 
   component: RootComponent,
   head: () => ({
-    links: [{ href: globals, rel: "stylesheet" }],
+    links: [
+      { href: globals, rel: "stylesheet" },
+      { href: "/favicon.ico", rel: "icon", sizes: "32x32" },
+      {
+        href: "/favicon-light.svg",
+        media: "(prefers-color-scheme: light)",
+        rel: "icon",
+        type: "image/svg+xml",
+      },
+      {
+        href: "/favicon-dark.svg",
+        media: "(prefers-color-scheme: dark)",
+        rel: "icon",
+        type: "image/svg+xml",
+      },
+      { href: "/apple-touch-icon.png", rel: "apple-touch-icon" },
+    ],
     meta: [
       { charSet: "utf8" },
       { content: "width=device-width, initial-scale=1", name: "viewport" },

apps/docs/astro.config.ts

@@ -18,6 +18,28 @@ export default defineConfig({
       defaultLocale: "root",
       description: DOCS_DESCRIPTION,
       disable404Route: true,
+      favicon: "/favicon.ico",
+      head: [
+        {
+          attrs: {
+            href: "/favicon-light.svg",
+            media: "(prefers-color-scheme: light)",
+            rel: "icon",
+            type: "image/svg+xml",
+          },
+          tag: "link",
+        },
+        {
+          attrs: {
+            href: "/favicon-dark.svg",
+            media: "(prefers-color-scheme: dark)",
+            rel: "icon",
+            type: "image/svg+xml",
+          },
+          tag: "link",
+        },
+        { attrs: { href: "/apple-touch-icon.png", rel: "apple-touch-icon" }, tag: "link" },
+      ],
       lastUpdated: true,
       locales: {
         es: {

apps/docs/src/shared/components/head.astro

@@ -1,8 +1,5 @@
 ---
 import DefaultHead from "@astrojs/starlight/components/Head.astro"
-
-const route = Astro.locals.starlightRoute
-route.head = route.head.filter(({ attrs }) => attrs?.rel !== "shortcut icon")
 ---
 
 <DefaultHead {...Astro.props} />

apps/mobile/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <background android:drawable="@color/iconBackground"/>
     <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
     <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
 </adaptive-icon>

apps/mobile/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
-    <background android:drawable="@mipmap/ic_launcher_background"/>
+    <background android:drawable="@color/iconBackground"/>
     <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
     <monochrome android:drawable="@mipmap/ic_launcher_monochrome"/>
 </adaptive-icon>

apps/mobile/android/app/src/main/res/values/colors.xml

@@ -1,5 +1,5 @@
 <resources>
   <color name="splashscreen_background">#ffffff</color>
-  <color name="iconBackground">#e6f4fe</color>
+  <color name="iconBackground">#000000</color>
   <color name="colorPrimary">#023c69</color>
 </resources>

apps/mobile/app.config.js

@@ -8,8 +8,7 @@ const VERSION = "1.0.0"
 const expoConfig = {
   android: {
     adaptiveIcon: {
-      backgroundColor: "#e6f4fe",
-      backgroundImage: "./src/shared/assets/images/android-icon-background.png",
+      backgroundColor: "#000000",
       foregroundImage: "./src/shared/assets/images/android-icon-foreground.png",
       monochromeImage: "./src/shared/assets/images/android-icon-monochrome.png",
     },
@@ -23,6 +22,10 @@ const expoConfig = {
   icon: "./src/shared/assets/images/icon.png",
   ios: {
     bundleIdentifier: APP_BUNDLE_IDENTIFIER,
+    icon: {
+      dark: "./src/shared/assets/images/icon-dark.png",
+      light: "./src/shared/assets/images/icon.png",
+    },
     supportsTablet: true,
   },
   name: APP_NAME,
@@ -40,6 +43,7 @@ const expoConfig = {
         backgroundColor: "#ffffff",
         dark: {
           backgroundColor: "#000000",
+          image: "./src/shared/assets/images/splash-icon-dark.png",
         },
         image: "./src/shared/assets/images/splash-icon.png",
         imageWidth: 200,

apps/mobile/ios/v1/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -5,6 +5,18 @@
       "idiom": "universal",
       "platform": "ios",
       "size": "1024x1024"
+    },
+    {
+      "filename": "App-Icon-dark-1024x1024@1x.png",
+      "idiom": "universal",
+      "platform": "ios",
+      "size": "1024x1024",
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ]
     }
   ],
   "info": {

apps/mobile/ios/v1/Images.xcassets/SplashScreenLogo.imageset/Contents.json

@@ -14,6 +14,39 @@
       "idiom": "universal",
       "filename": "image@3x.png",
       "scale": "3x"
+    },
+    {
+      "idiom": "universal",
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "scale": "1x",
+      "filename": "dark_image.png"
+    },
+    {
+      "idiom": "universal",
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "scale": "2x",
+      "filename": "dark_image@2x.png"
+    },
+    {
+      "idiom": "universal",
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "scale": "3x",
+      "filename": "dark_image@3x.png"
     }
   ],
   "info": {

apps/web/src/shared/components/layout.astro

@@ -18,6 +18,10 @@ const canonicalUrl = new URL(Astro.url.pathname, SITE_URL)
 <html lang={locale}>
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" sizes="32x32" />
+    <link rel="icon" href="/favicon-light.svg" type="image/svg+xml" media="(prefers-color-scheme: light)" />
+    <link rel="icon" href="/favicon-dark.svg" type="image/svg+xml" media="(prefers-color-scheme: dark)" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="canonical" href={canonicalUrl} />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="generator" content={Astro.generator} />