To change the logo that appears in the browser tab (favicon), you have a few options in Next.js:

Option 1: Add favicon.ico to the app folder Add a favicon.ico file directly to the /app directory. Next.js will automatically use it.

Option 2: Use the metadata API in layout.tsx You can specify custom icons in your app/layout.tsx using the metadata export:

Option 3: Add multiple icon sizes For better browser support, add these files to the /app directory:

• icon.png (automatically becomes favicon)
• apple-icon.png (for Apple devices)
• favicon.ico (fallback)

Since you already have the Emberstone logo uploaded, would you like me to:

1. Create a favicon from your logo image and add it to the app?
2. Update the layout.tsx metadata to use your logo as the favicon?

Let me know which approach you prefer, or I can implement both for complete browser support.

I've added your Emberstone logo as the favicon by placing it in the app folder as icon.png. Next.js will automatically detect and use this file as the browser tab icon. The logo will now appear in browser tabs, bookmarks, and history for your website.