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

> Discover where favicons and meta tags are stored and updated in the AI Website Cloner Template. Learn how to manage metadata and icons efficiently for your cloned sites.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: internals
- Published: 2026-07-11

---

**Favicons and meta tags in the AI Website Cloner Template are managed through the `metadata` export in [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.

```tsx
// 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.

```tsx
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`.

```bash

# 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:

```tsx
// 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/layout.tsx) and replacing files in the designated directories, as documented in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/layout.tsx)?

Next.js 13+ automatically processes the exported `metadata` object from [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md). This workflow instructs users to "Download favicons, apple‑touch‑icons, OG images, webmanifest to `public/seo/`. Update [`layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/layout.tsx) metadata" during the website cloning process.