Frontend Metadata Files Checklist

title: Contents 
style: nestedList # TOC style (nestedList|inlineFirstLevel)
minLevel: 1 # Include headings from the specified level
maxLevel: 4 # Include headings up to the specified level
includeLinks: true # Make headings clickable
debugInConsole: false # Print debug info in Obsidian console

Overview

Sources:

**

Diagram

graph LR

Checklist

Favicon, Icon, and Apple Icon

Image File Method

NOTE

The favicon, icon, or apple-icon file conventions allow you to set icons for your application.

They are useful for adding app icons that appear in places like web browser tabs, phone home screens, and search engine results.

File convention	Supported file types	Valid locations
`favicon`	`.ico`	`app/`
`icon`	`.ico`, `.jpg`, `.jpeg`, `.png`, `.svg`	`app/*/`
`apple-icon`	`.jpg`, `.jpeg`, `.png`	`app/*/`

Add a favicon.ico image file to the root /app route segment.

<link rel="icon" href="/favicon.ico" sizes="any" />

Add an icon.{ico|jpg|jpeg|png|svg} image file.

<link
  rel="icon"
  href="/icon?<generated>"
  type="image/<generated>"
  sizes="<generated>"
/>

Add an apple-icon.{jpg|jpeg|png}.

<link rel="apple-touch-icon" href="/apple-icon?<generated>" type="image/<generated>" sizes="<generated>"/>

TIP

You can set multiple icons by adding a number suffix to the file name. For example, icon1.png, icon2.png, etc. Numbered files will sort lexically.

Favicons can only be set in the root /app segment. If you need more granularity, you can use icon.

The appropriate <link> tags and attributes such as rel, href, type, and sizes are determined by the icon type and metadata of the evaluated file.

For example, a 32 by 32px .png file will have type="image/png" and sizes="32x32" attributes.

sizes="any" is added to favicon.ico output to avoid a browser bug where an .ico icon is favored over .svg.

Generate via Code Method

NOTE

In addition to using literal image files, you can programmatically generate icons using code.

Generate an app icon by creating an icon or apple-icon route that default exports a function.

File convention	Supported file types
`icon`	`.js`, `.ts`, `.tsx`
`apple-icon`	`.js`, `.ts`, `.tsx`/

The easiest way to generate an icon is to use the ImageResponse API from next/og.

app/icon.tsx:

import { ImageResponse } from 'next/og'
 
// Route segment config
export const runtime = 'edge'
 
// Image metadata
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'
 
// Image generation
export default function Icon() {
  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // ImageResponse options
    {
      // For convenience, we can re-use the exported icons size metadata
      // config to also set the ImageResponse's width and height.
      ...size,
    }
  )
}

<head> output:

<link rel="icon" href="/icon?<generated>" type="image/png" sizes="32x32" />

TIP

By default, generated icons are statically optimized (generated at build time and cached) unless they use dynamic functions or un-cached data.

You can generate multiple icons in the same file using generateImageMetadata.

You cannot generate a favicon icon. Use icon or a favicon.ico file instead.

Props

The default export function receives the following props:

params (optional)

An object containing the dynamic route parameters object from the root segment down to the segment icon or apple-icon is co-located in.

app/shop/[slug]/icon.tsx:

export default function Icon({ params }: { params: { slug: string } }) {
  // ...
}

Route	URL	`params`
`app/shop/icon.js`	`/shop`	`undefined`
`app/shop/[slug]/icon.js`	`/shop/1`	`{ slug: '1' }`
`app/shop/[tag]/[item]/icon.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`
`app/shop/[...slug]/icon.js`	`/shop/1/2`	`{ slug: ['1', '2'] }`

Returns

TIP

Good to know: ImageResponse satisfies this return type.

Config exports

You can optionally configure the icon’s metadata by exporting size and contentType variables from the icon or apple-icon route.

Option	Type
`size`	`{ width: number; height: number }`
`contentType`	`string` - image MIME type

size
icon.tsx | apple-icon.tsx:

export const size = { width: 32, height: 32 }
 
export default function Icon() {}

<head> output:

<link rel="icon" sizes="32x32" />

Manifest.json

NOTE

See Also: https://developer.mozilla.org/en-US/docs/Web/Manifest

Add or generate a manifest.json or manifest.webmanifest file that follows the Web Manifest Specification in the root of the app directory to provide information about the web application for the browser.
Example Static Manifest File:

{
  "name": "My Next.js Application",
  "short_name": "Next.js App",
  "description": "An application built with Next.js",
  "start_url": "/"
  // ...
}

Generate manifest.ts file that returns a Manifest Object:

import { MetadataRoute } from 'next'
 
export default function manifest(): MetadataRoute.Manifest {
  return {
    name: 'Next.js App',
    short_name: 'Next.js App',
    description: 'Next.js App',
    start_url: '/',
    display: 'standalone',
    background_color: '#fff',
    theme_color: '#fff',
    icons: [
      {
        src: '/favicon.ico',
        sizes: 'any',
        type: 'image/x-icon',
      },
    ],
  }
}

Manifest Object

The manifest object contains an extensive list of options that may be updated due to new web standards. For information on all the current options, refer to the MetadataRoute.Manifest type in your code editor if using TypeScript or see the MDN docs.

Open Graph and Twitter

The opengraph-image and twitter-image file conventions allow you to set Open Graph and Twitter images for a route segment.

They are useful for setting the images that appear on social networks and messaging apps when a user shares a link to your site.

There are two ways to set Open Graph and Twitter images:

Image files (.jpg, .png, .gif)

Use an image file to set a route segment’s shared image by placing an opengraph-image or twitter-image image file in the segment.

Next.js will evaluate the file and automatically add the appropriate tags to your app’s <head> element.

File convention	Supported file types
`opengraph-image`	`.jpg`, `.jpeg`, `.png`, `.gif`
`twitter-image`	`.jpg`, `.jpeg`, `.png`, `.gif`
`opengraph-image.alt`	`.txt`
`twitter-image.alt`	`.txt`

opengraph-image

Add an opengraph-image.(jpg|jpeg|png|gif) image file to any route segment.

<meta property="og:image" content="<generated>" />
<meta property="og:image:type" content="<generated>" />
<meta property="og:image:width" content="<generated>" />
<meta property="og:image:height" content="<generated>" />

twitter-image

Add a twitter-image.(jpg|jpeg|png|gif) image file to any route segment.

Robots.txt

Add or generate a robots.txt file that matches the Robots Exclusion Standard in the root of app directory to tell search engine crawlers which URLs they can access on your site.

Sitemap.xml

Conclusion

Appendix

Note created on 2024-04-02 and last modified on 2024-04-02.

Backlinks

LIST FROM [[Checklist - Frontend Metadata Files]] AND -"CHANGELOG" AND -"03-AREAS/Checklists/Checklist - Frontend Metadata Files"

🪴 Quartz 4.0

Explorer

Checklist - Frontend Metadata Files

Frontend Metadata Files Checklist

Overview

Diagram

Checklist

Favicon, Icon, and Apple Icon

Image File Method

Generate via Code Method

Props

Returns

Manifest.json

Manifest Object

Open Graph and Twitter

Image files (.jpg, .png, .gif)

opengraph-image

twitter-image

Robots.txt

Sitemap.xml

Conclusion

Appendix

Backlinks

Graph View

Table of Contents

Backlinks