Add environment-specific favicons

Author: huv1k

public/favicon-development.ico

@@ -4,13 +4,31 @@ import '@/styles/globals.css'
 import { Analytics } from '@vercel/analytics/next'
 import { SpeedInsights } from '@vercel/speed-insights/next'
 import Head from 'next/head'
+import type { Metadata } from 'next/types'
 import { Suspense } from 'react'
+import {
+  FAVICON_CONTENT_TYPE,
+  FAVICON_SIZE,
+  getFaviconHref,
+} from '@/configs/favicon'
 import ClientProviders from '@/features/client-providers'
 import { GeneralAnalyticsCollector } from '@/features/general-analytics-collector'
 import { GTMHead } from '@/features/google-tag-manager'
 import { Toaster } from '@/ui/primitives/toaster'
 import { Body } from './body'
 
+export const metadata: Metadata = {
+  icons: {
+    icon: [
+      {
+        url: getFaviconHref(),
+        type: FAVICON_CONTENT_TYPE,
+        sizes: `${FAVICON_SIZE.width}x${FAVICON_SIZE.height}`,
+      },
+    ],
+  },
+}
+
 export default function RootLayout({
   children,
 }: {

public/favicon-preview.ico

@@ -0,0 +1,28 @@
+export type FaviconEnvironment = 'production' | 'preview' | 'development'
+
+export const FAVICON_SIZE = {
+  width: 32,
+  height: 32,
+} as const
+
+export const FAVICON_CONTENT_TYPE = 'image/x-icon'
+
+const FAVICON_HREFS = {
+  production: '/favicon.ico',
+  preview: '/favicon-preview.ico',
+  development: '/favicon-development.ico',
+} as const satisfies Record<FaviconEnvironment, string>
+
+export function getFaviconEnvironment(
+  vercelEnv = process.env.VERCEL_ENV
+): FaviconEnvironment {
+  if (vercelEnv === 'production' || vercelEnv === 'preview') {
+    return vercelEnv
+  }
+
+  return 'development'
+}
+
+export function getFaviconHref(vercelEnv = process.env.VERCEL_ENV) {
+  return FAVICON_HREFS[getFaviconEnvironment(vercelEnv)]
+}

public/favicon.ico

@@ -0,0 +1,30 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { getFaviconEnvironment, getFaviconHref } from '@/configs/favicon'
+
+describe('environment favicon', () => {
+  afterEach(() => {
+    vi.unstubAllEnvs()
+  })
+
+  it('uses the original favicon appearance in production', () => {
+    expect(getFaviconEnvironment('production')).toBe('production')
+    expect(getFaviconHref('production')).toBe('/favicon.ico')
+  })
+
+  it('uses amber background in preview', () => {
+    expect(getFaviconEnvironment('preview')).toBe('preview')
+    expect(getFaviconHref('preview')).toBe('/favicon-preview.ico')
+  })
+
+  it('uses green background in local development', () => {
+    expect(getFaviconEnvironment('development')).toBe('development')
+    expect(getFaviconHref('development')).toBe('/favicon-development.ico')
+  })
+
+  it('falls back to local development when VERCEL_ENV is missing', () => {
+    vi.stubEnv('VERCEL_ENV', undefined)
+
+    expect(getFaviconEnvironment()).toBe('development')
+    expect(getFaviconHref()).toBe('/favicon-development.ico')
+  })
+})