{"editorial_visual":"https://favicon.now/static/images/editorial/guides/nextjs-favicon.webp","implementation_artifact":{"code":"export const metadata = {\n  icons: {\n    icon: [{ url: '/icon.svg', type: 'image/svg+xml' }],\n    apple: '/apple-icon.png',\n  },\n  manifest: '/manifest.webmanifest',\n};","heading":"Next.js App Router metadata files","intro":"These filenames let the App Router emit icon metadata before route components render. Choose this convention instead of duplicating the same candidates in a manual metadata object.","language":"tsx","tree":"app/\n\u251c\u2500\u2500 favicon.ico\n\u251c\u2500\u2500 icon.svg\n\u251c\u2500\u2500 apple-icon.png\n\u251c\u2500\u2500 manifest.webmanifest\n\u2514\u2500\u2500 layout.tsx"},"published":"2026-07-31","section_headings":["Use file-based metadata","Generate when branding is dynamic","Avoid duplicate declarations","Choose one App Router metadata strategy","Inspect the build and deployed response"],"sources":[{"label":"Next.js icon file conventions","url":"https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons"}],"title":"Next.js App Router Favicons: Files and Metadata","updated":"2026-07-31","url":"https://favicon.now/guides/nextjs-favicon"}