How do metadata files like favicon.ico, icon, opengraph-image and manifest work in Next.js?

Q: How do metadata files like favicon.ico, icon, opengraph-image and manifest work in Next.js?

**Target Audience:** Beginners preparing for Next.js interviews — basic HTML (what the head element is) helps. **Difficulty:** Easy > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against a lab app built with `next build`, served with `next start` and inspected with `curl`. ## 1. Why This Even Matters — A Story First When you post a link in a group chat, a little card appears with a picture and a title. When you bookmark a site, a tiny logo shows in the tab. When you "add to home screen" on a phone, an app-like icon appears. None of that comes from the page content; it comes from small files and tags in the page head that browsers and chat apps read. Without a framework you would create each image, copy it into a public folder, and hand-write a ` ` or ` ` tag with the right type and s

The problem

Question presented to candidate: "Our site needs a favicon, a home-screen icon, a preview image when links are shared on social media, and a web app manifest. How do you add these in a Next.js App Router project, and what does Next.js do with the files?"

What a strong answer should cover:

Metadata files are special file names in app/: favicon.ico (root only), icon and apple-icon, opengraph-image and twitter-image (with optional .alt.txt), manifest.json/.webmanifest or manifest.ts, plus sitemap and robots.
Each can be a static file or code (.tsx/.ts) that generates it, for example with ImageResponse from next/og.
Next.js serves each file at a URL and writes the matching <head> tags automatically (rel icon, apple-touch-icon, og:image with type, width, height and alt, rel manifest), adding a content hash to the URL.
Files apply to their route segment and below; a deeper opengraph-image overrides a parent one.
Generated files are special Route Handlers, prerendered and cached by default unless they use request data; set metadataBase so image URLs are absolute.

Clarifying questions expected:

"Does each page need its own share image, or is one per site enough?" — static file versus generated per segment.
"Do we want the site installable as a PWA?" — then the manifest needs proper icons.

Code / implementation expected: Yes — a file layout and one generated image or manifest.

nextjs
metadata
seo
file-conventions

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Beginners preparing for Next.js interviews — basic HTML (what the head element is) helps. Difficulty: Easy

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the Verified section, against a lab app built with next build, served with next start and inspected with curl.

1. Why This Even Matters — A Story First

When you post a link in a group chat, a little card appears with a picture and a title. When you bookmark a site, a tiny logo shows in the tab. When you "add to home screen" on a phone, an app-like icon appears. None of that comes from the page content; it comes from small files and tags in the page head that browsers and chat apps read. Without a framework you would create each imag

The solution is hidden so you can try first

8 min read · 9 sections

Read the code

Static metadata files in app/

app/
├── favicon.ico                  # root only   -> <link rel="icon" href="/favicon.ico?...">
├── icon.png                     # any segment -> <link rel="icon" sizes="32x32" type="image/png">
├── apple-icon.png               #             -> <link rel="apple-touch-icon" sizes="180x180">
├── opengraph-image.tsx          # generated   -> og:image + twitter:image tags for "/"
├── manifest.ts                  # root only   -> <link rel="manifest" href="/manifest.webmanifest">
├── layout.tsx                   # set metadataBase here so image URLs are absolute
└── about/
    ├── page.tsx
    ├── opengraph-image.png      # overrides the root image for /about
    └── opengraph-image.alt.txt  # -> og:image:alt (save it without a trailing newline)

Generated Open Graph image and web manifest

// app/opengraph-image.tsx — generated at build time unless it uses request data
import { ImageResponse } from "next/og";

export const alt = "Acme — tools for builders";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

export default function Image() {
  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontSize: 96,
          background: "#0b1220",
          color: "white",
        }}
      >
        Acme
      </div>
    ),
    { ...size }
  );
}

// app/manifest.ts — served as /manifest.webmanifest
import type { MetadataRoute } from "next";

export default function manifest(): MetadataRoute.Manifest {
  return {
    name: "Acme",
    short_name: "Acme",
    start_url: "/",
    display: "standalone",
    background_color: "#ffffff",
    theme_color: "#1e5ac8",
    icons: [{ src: "/icon.png", sizes: "32x32", type: "image/png" }],
  };
}

// app/layout.tsx (excerpt) — makes og:image an absolute URL on your real domain
import type { Metadata } from "next";
export const metadata: Metadata = {
  metadataBase: new URL("https://acme.example"),
  title: "Acme",
};

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.