Favicons with MetaData API files system not working

[da-kicks-87]

Description

This is for Next.js 14.2.16. - App Router

Hello after installing next-intel the favicon no longer load from the file-based metadata system. I had tried to have the favion.ico in /src/app/[locale] and /src/app. (https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons)

I got the favicons to work by doing the alternative by using Next.js metadata export object and putting the favicons in the /public/favicons

Eg from layout.js:

export const metadata = {  icons: {
    icon: [
      { url: '/favicons/favicon-96x96.png', type:'image/png', sizes: '96x96' },
      { url: '/favicons/favicon.svg', type:'image/svg+xml',},
      { url: '/favicons/favicon.ico' },
    ],
    shortcut: '/favicons/favicon.ico',
    apple: { url: '/favicons/apple-touch-icon.png', sizes: '180x180' },
    other: {
      rel: 'manifest',
      url: '/favicons/site.webmanifest'
    }
  }, }

However the Next.js guide mention i should be using the special metadata files inside the app folder for favicons.
What should I do?

Verifications

• I've verified that the problem I'm experiencing isn't covered in the docs.
• I've searched for similar, existing issues on GitHub and Stack Overflow.
• I've compared my app to a working example to look for differences.

Mandatory reproduction URL

/sorry-offline

Reproduction description

See above description

Expected behaviour

See above description

[amannn]

The next-intl examples currently simply put a favicon.ico in public—that seems to work for me. I'm not aware of if there are implications for other patterns. There might be details relevant to your app, like a potential matcher you're using the middleware config.

I'll move this to a discussion since it's a Next.js usage question and not a bug report about next-intl.

[da-kicks-87]

My middleware.js is like this:

import createMiddleware from 'next-intl/middleware';
import {routing} from './i18n/routing';
 
export default createMiddleware(routing);
 
export const config = {
  // Match only internationalized pathnames
  matcher: ['/', '/(fr|en)/:path*', '/((?!_next|_vercel|.*\\..*).*)']
};

[FireLord]

Same here. I have added in /public/favicon.ico and even in src/app/favicon.ico still it’s not working. Even the example one when ran locally doesn’t load favicon.

[FireLord]

@da-kicks-87 this worked for me. added icon.ico in src/app/ dir

[da-kicks-87]

Doing that only works for the default .ico size. The other sizes don't get auto generated. The Next.js docs says they should, but they don't. Also I don't see how the webmainifest icons would work with the file-based metadata system.

I will go back to the Meta data object and explicitly define them there. It's the only way I can get them to render.