Where Favicons and Meta Tags Are Stored and Updated in the AI Website Cloner Template

Favicons and meta tags in the AI Website Cloner Template are managed through the metadata export in src/app/layout.tsx and physical files stored in src/app/favicon.ico and the public/seo/ directory.

This repository leverages Next.js 13+ App Router conventions to handle SEO assets. The src/app/layout.tsx file exports a metadata object that automatically generates HTML <head> tags, while favicon assets reside in specific filesystem locations for both automatic and custom serving.

Where Favicons and Meta Tags Are Stored

The template separates configuration from static assets. Metadata definitions live in TypeScript code, while binary files and additional icons reside in the public directory.

HTML Metadata Configuration

The central location for meta tags is src/app/layout.tsx. According to the source code, this file exports a metadata constant that Next.js reads to populate the <head> section of every page.

// src/app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "My Cloned Site",
  description: "A pixel‑perfect replica of Example.com",
  openGraph: {
    title: "My Cloned Site",
    description: "A pixel‑perfect replica of Example.com",
    images: [{ url: "/seo/og-image.png" }],
  },
  icons: {
    icon: "/seo/favicon-32x32.png",
    shortcut: "/seo/favicon.ico",
    apple: "/seo/apple-touch-icon.png",
  },
};

Changes to this object are reflected immediately in the generated HTML without requiring additional imports or manual <Head> components.

Favicon Asset Locations

Favicon files are stored in two locations:

• Primary favicon: src/app/favicon.ico serves as the default site icon and is automatically served at the /favicon.ico route.
• Additional assets: The public/seo/ directory contains Apple touch icons, PNG variants, Open Graph images, and site.webmanifest files.

The public/seo/ directory is referenced by the metadata configuration using root-relative paths like /seo/filename.png.

How to Update Favicons and Meta Tags

Updating SEO assets requires modifying both the metadata configuration and replacing physical files. The repository's workflow documentation in .windsurf/workflows/clone-website.md explicitly outlines this process at line 133.

Updating Metadata in layout.tsx

Edit the metadata object in src/app/layout.tsx to change page titles, descriptions, or social graph information. The Metadata type from Next.js provides TypeScript completion for standard and Open Graph properties.

export const metadata: Metadata = {
  title: "New Site Title",
  description: "Updated site description for search engines",
  openGraph: {
    title: "New Site Title",
    description: "Updated site description",
    images: [{ url: "/seo/og-image.png", width: 1200, height: 630 }],
  },
};

Replacing Favicon Files

For custom favicon sizes or formats, place files in the public/seo/ directory. If you need to replace the default browser favicon, overwrite src/app/favicon.ico.

# Add custom favicon variants

cp favicon-32x32.png public/seo/favicon-32x32.png
cp apple-touch-icon.png public/seo/apple-touch-icon.png
cp site.webmanifest public/seo/site.webmanifest

After placing files in public/seo/, update the icons property in the metadata object to register new sizes or types with the browser.

Complete Implementation Example

Here is a comprehensive configuration that demonstrates the full integration between the metadata export and the public/seo/ directory:

// src/app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  title: "AI Website Cloner",
  description: "Clone any website with AI precision",
  openGraph: {
    title: "AI Website Cloner",
    description: "Clone any website with AI precision",
    images: [{ url: "/seo/og-image.png" }],
  },
  icons: {
    icon: [
      { url: "/seo/favicon-32x32.png", sizes: "32x32", type: "image/png" },
      { url: "/seo/favicon-16x16.png", sizes: "16x16", type: "image/png" },
    ],
    shortcut: "/seo/favicon.ico",
    apple: [
      { url: "/seo/apple-touch-icon.png", sizes: "180x180" },
    ],
  },
  manifest: "/seo/site.webmanifest",
};

This configuration references assets stored in public/seo/ while src/app/favicon.ico provides the legacy fallback icon.

Summary

• Meta tags are configured in the metadata export inside src/app/layout.tsx using Next.js 13+ Metadata API.
• Primary favicon resides at src/app/favicon.ico for automatic serving at the root /favicon.ico path.
• Extended assets (Apple touch icons, PNG favicons, webmanifest) are stored in public/seo/ and referenced via the metadata icons and manifest properties.
• Updates require editing the TypeScript configuration in layout.tsx and replacing files in the designated directories, as documented in .windsurf/workflows/clone-website.md.

Frequently Asked Questions

What is the purpose of the public/seo/ directory?

The public/seo/ directory serves as the dedicated storage location for favicon variants, Apple touch icons, Open Graph images, and the site.webmanifest file. Files placed here are served at the root URL path /seo/ and can be referenced in the metadata configuration using relative paths like /seo/filename.png.

How does Next.js 13+ use the metadata export from layout.tsx?

Next.js 13+ automatically processes the exported metadata object from src/app/layout.tsx to generate HTML <meta>, <link>, and <title> tags in the document head. This convention eliminates the need for manual <Head> components and ensures type safety through the Metadata type import from the next package.

Can I use custom favicon sizes and formats?

Yes. You can add multiple favicon sizes and formats by placing the files in public/seo/ and extending the icons property in the metadata object. The icons property accepts an object with keys like icon, shortcut, and apple, or arrays of icon descriptors containing url, sizes, and type properties.

Where is the favicon update process documented in the clone workflow?

The specific step for updating favicons and metadata is documented at line 133 in .windsurf/workflows/clone-website.md. This workflow instructs users to "Download favicons, apple‑touch‑icons, OG images, webmanifest to public/seo/. Update layout.tsx metadata" during the website cloning process.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}