Add system theme-based favicon (light/dark)#86
Conversation
📝 WalkthroughWalkthroughAdds a new Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
✅ Deploy Preview for develop-devlovers ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
frontend/app/layout.tsx (1)
6-17: Consider adding apple-touch-icon for iOS devices.Including an
appleicon entry improves the user experience for iOS users who add the site to their home screen.🔎 Example implementation
export const metadata: Metadata = { icons: { icon: [ { media: '(prefers-color-scheme: light)', url: '/favicon-light.svg', }, { media: '(prefers-color-scheme: dark)', url: '/favicon-dark.svg', }, ], + apple: [ + { + url: '/apple-touch-icon.png', + }, + ], }, };
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (4)
frontend/app/favicon.icois excluded by!**/*.icofrontend/public/favicon-dark.svgis excluded by!**/*.svgfrontend/public/favicon-light.svgis excluded by!**/*.svgfrontend/public/github-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (1)
frontend/app/layout.tsx
🧰 Additional context used
🧬 Code graph analysis (1)
frontend/app/layout.tsx (3)
frontend/app/[locale]/dashboard/page.tsx (1)
metadata(11-14)frontend/app/[locale]/contacts/page.tsx (1)
metadata(1-5)frontend/app/[locale]/not-found.tsx (1)
metadata(1-4)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Redirect rules - develop-devlovers
- GitHub Check: Header rules - develop-devlovers
- GitHub Check: Pages changed - develop-devlovers
🔇 Additional comments (1)
frontend/app/layout.tsx (1)
1-1: LGTM!The type-only import for
Metadatais correct and follows Next.js TypeScript conventions.
| export const metadata: Metadata = { | ||
| icons: { | ||
| icon: [ | ||
| { | ||
| media: '(prefers-color-scheme: light)', | ||
| url: '/favicon-light.svg', | ||
| }, | ||
| { | ||
| media: '(prefers-color-scheme: dark)', | ||
| url: '/favicon-dark.svg', | ||
| }, | ||
| ], | ||
| }, | ||
| }; |
There was a problem hiding this comment.
Add a fallback icon for broader browser compatibility.
The current configuration only specifies icons with media queries. Browsers that don't support prefers-color-scheme in icon metadata (or older browsers) may fail to display any favicon. Include a default icon entry without a media query as a fallback.
🔎 Proposed fix to add fallback icon
export const metadata: Metadata = {
icons: {
icon: [
+ {
+ url: '/favicon-light.svg',
+ },
{
media: '(prefers-color-scheme: light)',
url: '/favicon-light.svg',
},
{
media: '(prefers-color-scheme: dark)',
url: '/favicon-dark.svg',
},
],
},
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const metadata: Metadata = { | |
| icons: { | |
| icon: [ | |
| { | |
| media: '(prefers-color-scheme: light)', | |
| url: '/favicon-light.svg', | |
| }, | |
| { | |
| media: '(prefers-color-scheme: dark)', | |
| url: '/favicon-dark.svg', | |
| }, | |
| ], | |
| }, | |
| }; | |
| export const metadata: Metadata = { | |
| icons: { | |
| icon: [ | |
| { | |
| url: '/favicon-light.svg', | |
| }, | |
| { | |
| media: '(prefers-color-scheme: light)', | |
| url: '/favicon-light.svg', | |
| }, | |
| { | |
| media: '(prefers-color-scheme: dark)', | |
| url: '/favicon-dark.svg', | |
| }, | |
| ], | |
| }, | |
| }; |
🤖 Prompt for AI Agents
In frontend/app/layout.tsx around lines 5 to 18, the metadata.icons only lists
icons with media queries which can result in no favicon in browsers that don't
honor prefers-color-scheme; add a default icon entry (an icon object with url:
'/favicon.ico' or '/favicon-light.svg' and no media) alongside the
media-specific entries so browsers have a fallback and will always display a
favicon.
| media: '(prefers-color-scheme: light)', | ||
| url: '/favicon-light.svg', | ||
| }, | ||
| { | ||
| media: '(prefers-color-scheme: dark)', | ||
| url: '/favicon-dark.svg', |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check for favicon files in the public directory
fd -t f 'favicon.*\.svg$' public/ 2>/dev/null || echo "No favicon SVG files found"
# Also check the public directory structure
echo "=== Public directory contents ==="
ls -la public/ 2>/dev/null | head -20Repository: DevLoversTeam/devlovers.net
Length of output: 131
🌐 Web query:
Next.js 16 metadata icons prefers-color-scheme media query support
💡 Result:
Short answer: Yes — Next.js's Metadata API supports a media attribute on icon descriptors so you can provide favicons that use the prefers-color-scheme media query. Example:
export const metadata = {
icons: [
{ rel: 'icon', url: '/favicon-light.png', media: '(prefers-color-scheme: light)' },
{ rel: 'icon', url: '/favicon-dark.png', media: '(prefers-color-scheme: dark)' },
],
};
Notes:
- This is documented in the Next.js metadata docs showing icon entries with a media field. [1]
- The Metadata API does not (as of current discussion) support a media attribute for themeColor meta tags — that has been requested in the Next.js repo (issue/discussion). [2]
- Community guides and examples show this pattern works to load light/dark favicons. [3]
Sources:
[1] Next.js docs — generateMetadata / icons examples.
[2] Vercel/next.js GitHub issue/discussion about media for themeColor.
[3] Community guide on adaptive favicons in Next.js.
Add the missing favicon files to the public/ directory.
The referenced favicon files /favicon-light.svg and /favicon-dark.svg do not exist in public/. The prefers-color-scheme media query approach is supported in Next.js 16, but the implementation will fail at runtime without these files. Create both SVG files in public/ to resolve the broken icon references.
🤖 Prompt for AI Agents
In frontend/app/layout.tsx around lines 9 to 14, the favicon references
'/favicon-light.svg' and '/favicon-dark.svg' are missing from the public/
directory; create two SVG files named favicon-light.svg and favicon-dark.svg in
the project's public/ folder (ensure they are valid SVGs and sized appropriately
for favicons, e.g., include viewBox and simple paths) so the
prefers-color-scheme media entries resolve at runtime and prevent broken icon
references.
Add system theme-based favicon (light/dark)
1 participant
What was done
prefers-color-schemeImplementation details
public/directorymetadata.iconsconfigurationResult
Notes
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.