feat(frontend): environment aware favicon (#11431)

## Changes 🏗️

Change the favicon colour in the tab depending on the environment, so
when you have multiple tabs open (production, staging, local... ) it is
clear which map to what.

### Local ( orange )

<img width="257" height="40" alt="Screenshot 2025-11-24 at 22 38 27"
src="https://github.com/user-attachments/assets/705ddf6b-cc4a-498a-ad15-ed2c60f6b397"
/>

### Dev ( green )

<img width="263" height="40" alt="Screenshot 2025-11-24 at 22 45 20"
src="https://github.com/user-attachments/assets/eda3ba16-8646-4032-ad3c-7a8fc4db778c"
/>

### Example

<img width="513" height="41" alt="Screenshot 2025-11-24 at 22 45 09"
src="https://github.com/user-attachments/assets/1a43f860-536a-465e-9c10-a68c5218a58c"
/>

## Checklist 📋

### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:
  - [x] Load the app and the favicon colour matches the env
This commit is contained in:
Ubbe
2025-11-25 20:15:31 +07:00
committed by GitHub
parent 64a775dfa7
commit 52aac09577
3 changed files with 13 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -10,6 +10,7 @@ import TallyPopupSimple from "@/components/molecules/TallyPoup/TallyPopup";
import { Toaster } from "@/components/molecules/Toast/toaster";
import { SetupAnalytics } from "@/services/analytics";
import { VercelAnalyticsWrapper } from "@/services/analytics/VercelAnalyticsWrapper";
import { environment } from "@/services/environment";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { headers } from "next/headers";
@@ -25,6 +26,8 @@ export default async function RootLayout({
}>) {
const headersList = await headers();
const host = headersList.get("host") || "";
const isDev = environment.isDev();
const isLocal = environment.isLocal();
return (
<html
@@ -33,6 +36,16 @@ export default async function RootLayout({
suppressHydrationWarning
>
<head>
<link
rel="icon"
href={
isLocal
? "/favicon-local.ico"
: isDev
? "/favicon-dev.ico"
: "/favicon.ico"
}
/>
<SetupAnalytics
host={host}
ga={{