🔨 style: Use different favicon.ico in dev mode (#9723)

src/app/[variants]/metadata.ts

@@ -6,6 +6,8 @@ import { translation } from '@/server/translation';
 import { DynamicLayoutProps } from '@/types/next';
 import { RouteVariants } from '@/utils/server/routeVariants';
 
+const isDev = process.env.NODE_ENV === 'development';
+
 export const generateMetadata = async (props: DynamicLayoutProps) => {
   const locale = await RouteVariants.getLocale(props);
   const { t } = await translation('metadata', locale);
@@ -23,8 +25,8 @@ export const generateMetadata = async (props: DynamicLayoutProps) => {
       ? BRANDING_LOGO_URL
       : {
           apple: '/apple-touch-icon.png?v=1',
-          icon: '/favicon.ico?v=1',
-          shortcut: '/favicon-32x32.ico?v=1',
+          icon: isDev ? '/favicon-dev.ico' : '/favicon.ico?v=1',
+          shortcut: isDev ? '/favicon-32x32-dev.ico' : '/favicon-32x32.ico?v=1',
         },
     manifest: '/manifest.json',
     metadataBase: new URL(OFFICIAL_URL),