Can I use the favicon in my website sections such as the navbar in Next.js?

First, I'm new to NextJS. When I try to use the SVG picture I'm using as a favicon in other parts of the website, it doesn't work.

Here's the tree of my directory:

|- components/
|  |- Navbar.tsx <--------- here's where I want to use it
|- src
|  |- app
|  |  | - global.css
|  |  | - icon.svg   <--------- here's the SVG picture
|  |  | - layout.tsx
|  |  | - page.tsx

I tried these, but neither works:

<Image src="../src/app/icon.svg" alt="logo" width={50} height={50} />
<Image src="/src/app/icon.svg" alt="logo" width={50} height={50} />

<img src="../src/app/icon.svg" alt="logo" />
<img src="/src/app/icon.svg" alt="logo" />

enter image description here

The point was not to have one SVG image in the src/app folder and one public folder in order to use the same SVG as a favicon and in other sections, by knowing that Next.js elevates some special files in the app folder like path. icon.*, robots.txt, sitemap.xml, and serves them at the root then put the right tag in the final html file, see the outputs in this page:https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons?utm_source=chatgpt.com