favicon, icon, and 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ルート Segment に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>"
/>

Good to know:

ファイル名に数字の接尾辞を付けることで、複数のアイコンを設定することができます。例えば、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を使用することです。

app/icon.tsx
import { ImageResponse } from 'next/server'

// Route segment config
export const runtime = 'edge'

// Image metadata
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

// 画像生成
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のオプション
    {
      // 便宜上、エクスポートしたアイコンサイズのメタデータ設定を再利用して
      // ImageResponse の幅と高さも設定できます。
      ...size,
    }
  )
}

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

Good to know:

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

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

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

Props

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

`params`（任意）

iconまたはapple-iconがコロケートされているルート Segment から Segment の動的なルートパラメータオブジェクトを含むオブジェクトです。

app/shop/[slug]/icon.tsx
export default function Icon({ params }: { params: { slug: string } }) {
  // ...
}

ルート	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は戻り値の型を満たします。

設定のエクスポート

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

オプション	型
`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>の出力
<link rel="icon" sizes="32x32" />

`contentType`

icon.tsx / apple-icon.tsx
export const contentType = 'image/png'

export default function Icon() {}

<head>の出力
<link rel="icon" type="image/png" />

Route Segment の設定

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

オプション	型	デフォルト
`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() {}

バージョン履歴

Version	Changes
`v13.3.0`	`favicon` `icon` `apple-icon` 導入

画像ファイル（.ico、.jpg、.png）​

favicon​

icon​

apple-icon​

アイコンを生成するコードを使用する（.js、.ts、.tsx）​

Props​

params（任意）​

Returns​

設定のエクスポート​

size​

contentType​

Route Segment の設定​

バージョン履歴​