Dinou docs

🎨 Favicons

Add a favicon and app icons to your Dinou application for proper branding across browsers and devices.

Generate assets using a tool like favicon.io.
Unzip the downloaded folder.
Rename it to favicons and place it in your project root.
Update your root layout to include the references 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>
        {/* Favicon references */}
        <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" />
        {/* Don't forget your stylesheet! */}
        <link href="/styles.css" rel="stylesheet" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Asset Placement

Directory Structure

The favicons folder should be at the same level as your src directory.