favicon、icon、apple-icon

favicon、icon、apple-icon ファイル規約を使用すると、アプリケーションのアイコンを設定できます。

これらのアイコンは、ウェブブラウザのタブ、スマートフォンのホーム画面、検索エンジンの結果などに表示されるアプリアイコンの追加に役立ちます。

アプリアイコンを設定する方法は2つあります：

画像ファイルを使用 (.ico, .jpg, .png)
コードを使用してアイコンを生成 (.js, .ts, .tsx)

画像ファイル (.ico, .jpg, .png)

/app ディレクトリ内に favicon、icon、apple-icon 画像ファイルを配置することで、アプリアイコンを設定できます。 favicon 画像は app/ の最上位レベルにのみ配置可能です。

Next.js はファイルを評価し、自動的にアプリの <head> 要素に適切なタグを追加します。

ファイル規約	サポートされるファイルタイプ	有効な配置場所
`favicon`	`.ico`	`app/`
`icon`	`.ico`, `.jpg`, `.jpeg`, `.png`, `.svg`	`app/*/`
`apple-icon`	`.jpg`, `.jpeg`, `.png`	`app/*/`

`favicon`

ルート /app ルートセグメントに favicon.ico 画像ファイルを追加します。

<head> 出力

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

`icon`

icon.(ico|jpg|jpeg|png|svg) 画像ファイルを追加します。

<head> 出力

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

`apple-icon`

apple-icon.(jpg|jpeg|png) 画像ファイルを追加します。

<head> 出力

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

豆知識

ファイル名に番号を追加することで複数のアイコンを設定できます（例：icon1.png、icon2.png）。番号付きファイルは辞書順にソートされます。

Faviconはルート /app セグメントでのみ設定可能です。より細かい制御が必要な場合は icon を使用できます。

適切な <link> タグと rel、href、type、sizes などの属性は、アイコンのタイプと評価されたファイルのメタデータによって決定されます。

例えば、32×32pxの .png ファイルには type="image/png" と sizes="32x32" 属性が付与されます。

sizes="any" は .ico アイコンが .svg よりも優先されるブラウザのバグを回避するために favicon.ico 出力に追加されます。

コードを使用したアイコンの生成 (.js, .ts, .tsx)

画像ファイルを使用するだけでなく、コードを使用してアイコンをプログラム的に生成することもできます。

icon または apple-icon ルートを作成し、デフォルトエクスポート関数を定義することでアプリアイコンを生成します。

ファイル規約	サポートされるファイルタイプ
`icon`	`.js`, `.ts`, `.tsx`
`apple-icon`	`.js`, `.ts`, `.tsx`

アイコンを生成する最も簡単な方法は、next/server の ImageResponse API を使用することです。

import { ImageResponse } from 'next/server'

// ルートセグメント設定
export const runtime = 'edge'

// 画像メタデータ
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

// 画像生成
export default function Icon() {
  return new ImageResponse(
    (
      // ImageResponse JSX要素
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // ImageResponseオプション
    {
      // 便利のために、エクスポートされたアイコンのサイズメタデータを
      // ImageResponseの幅と高さの設定にも再利用できます
      ...size,
    }
  )
}

import { ImageResponse } from 'next/server'

// ルートセグメント設定
export const runtime = 'edge'

// 画像メタデータ
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

// 画像生成
export default function Icon() {
  return new ImageResponse(
    (
      // ImageResponse JSX要素
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // ImageResponseオプション
    {
      // 便利のために、エクスポートされたアイコンのサイズメタデータを
      // ImageResponseの幅と高さの設定にも再利用できます
      ...size,
    }
  )
}

<head> 出力

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

豆知識

デフォルトでは、生成されたアイコンは静的最適化されます（ビルド時に生成されキャッシュされます）。ただし、動的関数やキャッシュされていないデータを使用する場合は除きます。

generateImageMetadata を使用して同じファイル内で複数のアイコンを生成できます。

favicon アイコンを生成することはできません。代わりに icon または favicon.ico ファイルを使用してください。

Props

デフォルトエクスポート関数は以下の props を受け取ります：

`params` (オプション)

icon または apple-icon が配置されているセグメントまでの動的ルートパラメータオブジェクトを含むオブジェクトです。

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

export default function Icon({ params }) {
  // ...
}

ルート	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'] }`

戻り値

豆知識: ImageResponse はこの戻り値の型を満たします。

設定エクスポート

icon または apple-icon ルートから size と contentType 変数をエクスポートすることで、アイコンのメタデータをオプションで設定できます。

オプション	型
`size`	`{ width: number; height: number }`
`contentType`	`string` - 画像MIMEタイプ

`size`

export const size = { width: 32, height: 32 }

export default function Icon() {}

export const size = { width: 32, height: 32 }

export default function Icon() {}

<head> 出力

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

`contentType`

export const contentType = 'image/png'

export default function Icon() {}

export const contentType = 'image/png'

export default function Icon() {}

<head> 出力

<link rel="icon" type="image/png" />

ルートセグメント設定

icon と apple-icon は特殊なルートハンドラであり、ページやレイアウトと同じルートセグメント設定オプションを使用できます。

オプション	型	デフォルト
`dynamic`	`'auto' \| 'force-dynamic' \| 'error' \| 'force-static'`	`'auto'`
`revalidate`	`false \| 'force-cache' \| 0 \| number`	`false`
`runtime`	`'nodejs' \| 'edge'`	`'nodejs'`
`preferredRegion`	`'auto' \| 'global' \| 'home' \| string \| string[]`	`'auto'`

export const runtime = 'edge'

export default function Icon() {}

export const runtime = 'edge'

export default function Icon() {}

バージョン履歴

バージョン	変更内容
`v13.3.0`	`favicon`、`icon`、`apple-icon` が導入されました

On this page