︙

favicon, icon, and apple-icon

favicon、icon、またはapple-iconファイルの規則により、アプリケーションのアイコンを設定できます。

彼らは、ウェブブラウザのタブや携帯電話のホーム画面、検索エンジンの結果など、さまざまな場所に表示される app のアイコンを追加するのに役立ちます。

app アイコンを設定するには二つの方法があります：

image ファイル (.ico、.jpg、.png)の使用
コードを使用してアイコンを生成する(.js、.ts、.tsx)

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

image ファイルを使用して、favicon、icon、またはapple-iconの image ファイルを/appディレクトリ内に配置することで、 app icon を設定します。faviconの image は、app/のトップレベルにしか配置できません。

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

ファイル規約	対応するファイルタイプ	有効な場所
`favicon`	`.ico`	`app/`
`icon`	`.ico`, `.jpg`, `.jpeg`, `.png`, `.svg`	`app/*/`
`apple-icon`	`.jpg`, `.jpeg`, `.png`	`app/*/`

`favicon`

favicon.ico image ファイルを root の/app route セグメントに追加してください。

<head>

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

`icon`

icon.(ico|jpg|jpeg|png|svg)image ファイルを追加してください。

<head>

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

`apple-icon`

apple-icon.(jpg|jpeg|png)image ファイルを追加してください。

<head>

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

Good to know

あなたは、ファイル名に number という接尾詞を追加することで、複数のアイコンを設定することができます。例えば、icon1.png、icon2.pngなどです。番号付きのファイルは辞書順に並びます。

Favicons は、root /appセグメントでのみ設定できます。もしもっと細かく設定が必要な場合は、icon を使用できます。

適切な<link>タグと属性(例えばrel、href、type、sizes)は、評価されたファイルの icon type と metadata によって決定されます。

例えば、32x32px の.pngファイルは、type="image/png"およびsizes="32x32"の属性を持つでしょう。

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

Generate icons using code (.js, .ts, .tsx)

さらに、文字通りの image ファイルを使用するだけでなく、code を使ってプログラム的に generate アイコンを作成することもできます。

icon または apple-icon を作成することにより、 app icon を生成する route で、関数を default エクスポートします。

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

最も簡単な方法で icon を生成する方法は、next/ogからの ImageResponse API を使用することです。

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,
    }
  )
}

app/icon.js

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>

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

Good to know

default では、生成されたアイコンは静的に最適化されています(build 時に生成され、キャッシュされます)。ただし、dynamic な関数を使用するか、キャッシュされていないデータを使用する場合を除きます。

あなたは、generateImageMetadata を使用して同じファイル内に複数のアイコンを生成することができます。

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

Props

default export 関数は次の props を受け取ります：

`params` (オプショナル)

iconまたはapple-iconセグメントまでの root セグメントからの動的な root パラメータを含む object が共在します。

app/shop/[slug]/icon.tsx

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

app/shop/[slug]/icon.js

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

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

Good to know: ImageResponseはこの戻り type を満たします。

Config の export

あなたはオプションでアイコンの metadata を、iconまたはapple-iconの route からsizeやcontentTypeの変数を export することで設定することができます。

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

`size`

icon.tsx

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

export default function Icon() {}

icon.js

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

export default function Icon() {}

<head>

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

`contentType`

icon.tsx

export const contentType = 'image/png'

export default function Icon() {}

icon.js

export const contentType = 'image/png'

export default function Icon() {}

<head>

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

Route セグメント Config

iconおよびapple-iconは、ページや Layout と同じ Route segment configuration options を使用できる専門の route Handlers です。

オプション	Type	Default
`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'`

app/icon.tsx

export const runtime = 'edge'

export default function Icon() {}

app/icon.js

export const runtime = 'edge'

export default function Icon() {}

Version History

Version	Changes
`v13.3.0`	`favicon` `icon` および `apple-icon` が導入されました