Next.js Discord

Discord Forum

How go to icon in website title

Answered
Donskoy posted this in #help-forum
Open in Discord
DonskoyOP
Answered by ᴉuɐpɹɐɐ
you can just drop your icons and src/app and Next.js will create the necessary meta tags.

See here:
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image
View full answer

11 Replies

ᴉuɐpɹɐɐ
accessing <insert url here>/favicon.ico usually give the favicon of a website
example: https://vercel.com/favicon.ico
DonskoyOP
Okay ! i check that ty
like that

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Head from "next/head";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Solea - Guild",
  description:
    "Solea est une guilde francophone sur Albion Online, placé sur le serveur Europe depuis ça sortie en mai 2024.",
  authors: [{ name: "SarCraft" }],
  keywords: ["Albion Online", "Solea", "Guilde", "Francophone", "Europe"],
  icons: ["/my-app/public/logo.png"],
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <Head>
        <link rel="shortcut icon" href="/my-app/public/logo.png" />
      </Head>
      <body className={inter.className}>{children}</body>
    </html>
  );
}
i write icons: ["/my-app/public/logo.png"],
and after i call here
<html lang="en"> <Head> <link rel="shortcut icon" href="/my-app/public/logo.png" /> </Head> <body className={inter.className}>{children}</body> </html>
ᴉuɐpɹɐɐ
you can just drop your icons and src/app and Next.js will create the necessary meta tags.

See here:
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image
Answer
DonskoyOP
oh okay the name must be favicon
ty
its work