Next.js site hosted on VPS Nginx Server doesn't show a favicon

Question

I recently encountered a problem with my Next.js website. I host it on VPS server, using Nginx. Even though a page has a link for a favicon <link rel='icon' href='/favicon.ico' and also Nginx serves a favicon:

location = /favicon.ico {
                alias /root/public_html/favicon.ico;
          }

When you type in a browser lotusite.pl/favicon.ico, an icon appears on a center, but it's not displaying on a tab. Lastly I had a problem with this, when you had entered this url there was a 403 error, but changing permissions helped. Unfortunatelly it didn't help width displaying it on a tab. I cleared a browser cache, tried visiting page in different browsers, also on different devices, but still nothing. Here's my project structure:

lotusite/ 
 --- public/ 
        --- favicon.ico
 --- src/ 
        --- app/ 
            --- layout.js

Layout.js:

export const metadata = {
  icons: {
      icon: [
        {
          url: "/images/favicon.ico", 
          href: "/images/favicon.ico", 
        },
      ],
    },
};

The icon is showing when I use a development server on my local PC, but it doesn't on VPS server.

I tried using but it was only giving me errors. Asked ChatGPT, but it didn't help either.