App Router metadata icons
Next.js 13+ supports file-based metadata: place icon.png, apple-icon.png, and manifest in the app directory and Next.js will emit the correct tags automatically.
For finer control, put generated files in public/ and reference them via the metadata.icons field in layout.tsx. This approach works well when you need the exact filenames from a favicon generator package.
Recommended file placement
Copy favicon.ico, PNG sizes, apple-touch-icon.png, and site.webmanifest into public/. Keep paths consistent — most tools assume root-relative URLs like /favicon-32x32.png.
If you use a basePath or deploy to a subdirectory, update both your static files and metadata references accordingly.
Testing in production
Our generator includes a ready-to-copy Next.js metadata snippet on the download step. After deploying, hard-refresh and check the Network tab to confirm icons return 200 responses.
Safari and iOS cache aggressively; use a private window or rename files when verifying changes during development.
Written by Favicon Generator Team
Practical guides on favicons, PWAs, and web branding. Generate your complete favicon package free with our online tools.