dinou logodinou
docs
npmGitHub

Favicons

Learn how to add a favicon and related icons to your dinou app.

Overview

To add a favicon to your app, you can use an online tool such as favicon.io to generate all the required icons.

After downloading the icons, unzip the folder and rename it to favicons. Then, move this folder to the root of your project.

Updating the Layout

Update your layout.tsx (or page.tsx if you're not using layouts) to include the favicon and related icons in the <head> tag:

"use client";

import type { ReactNode } from "react";

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <head>
        <title>dinou app</title>
        <link rel="icon" type="image/png" href="/favicon.ico" />
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/apple-touch-icon.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="32x32"
          href="/favicon-32x32.png"
        />
        <link
          rel="icon"
          type="image/png"
          sizes="16x16"
          href="/favicon-16x16.png"
        />
        <link rel="manifest" href="/site.webmanifest"></link>
      </head>
      <body>{children}</body>
    </html>
  );
}

Once you've added the icons and updated your layout, your web app will show the favicon across all pages and devices.