Image Description: The screenshot shows a Chrome browser tab with a dark navy/green background color. The favicon's red checkmark element is partially visible, but the dark navy arrow portions of the Day Zero mark blend into the dark tab background, making the icon hard to see.
The problem is the favicon has dark navy elements on a transparent background, so they disappear against Chrome's dark tab bar. The fix is to give the icon a solid light background (a rounded square "app icon" treatment) so it stays legible on any tab color. Let me regenerate it that way.
The new favicon now has a warm off-white rounded-square background behind the Day Zero mark, so the dark navy arrow no longer blends into Chrome's dark tab bar. Since I kept the same filename (public/dayzero-icon.png), the existing metadata.icons references in layout.tsx already point to it — no code change needed. The icon will now stay legible against any tab color, light or dark.
Image Description: The screenshot shows the Chrome tab now displaying a cream/white rounded square that stands out against the dark green tab bar — so the background fix worked. However, the Day Zero mark inside is small with too much padding, making the actual logo hard to read at tab size.
The background now reads well, but the mark is too small inside the square. The fix is to scale the mark up so it fills most of the icon with minimal padding, making it legible at 16px tab size.
The favicon mark now fills about 85% of the cream rounded square with only tight padding, so the red checkmark and navy upward arrow read clearly even at 16px tab size. The cream background keeps it legible against Chrome's dark tab bar, and since the filename is unchanged, the existing metadata.icons references already pick it up with no code change.
