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" 属性が付与されます。

.svg 拡張子の場合やファイルの画像サイズが決定されていない場合、sizes="any" がアイコンに追加されます。詳細は favicon ハンドブックを参照してください。

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

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

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

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

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

import { ImageResponse } from 'next/og'

// 画像メタデータ
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/og'

// 画像メタデータ
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" />

知っておくと便利:

デフォルトでは、生成されたアイコンは Dynamic APIs を使用しない限り、静的に最適化 されます（ビルド時に生成されキャッシュされます）。

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

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

アプリアイコンは特別な Route Handler で、Dynamic API または dynamic config オプションを使用しない限り、デフォルトでキャッシュされます。

Props

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

`params` (オプション)

icon または apple-icon が配置されているセグメントまでの dynamic route parameters オブジェクトを含むオブジェクトです。

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' }`

戻り値

知っておくと便利: ImageResponse はこの戻り値の型を満たします。

Config エクスポート

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

オプション	型
`size`	`{ width: number; height: number }`
`contentType`	`string` - image MIME type

`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" />

Route Segment Config

icon と apple-icon は特殊な Route Handlers で、Pages や Layouts と同じ route segment configuration オプションを使用できます。

バージョン履歴

バージョン	変更内容
`v13.3.0`	`favicon`、`icon`、`apple-icon` の導入

On this page