コンテンツへスキップ
ファイル規約メタデータファイルfavicon、icon、およびapple-icon

favicon、icon、およびapple-icon

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

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

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

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

アプリのアイコンを設定するには、`favicon`、`icon`、または`apple-icon` の画像ファイルを`/app` ディレクトリ内に配置します。`favicon` 画像は `app/` のトップレベルにのみ配置できます。

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

ファイル規約サポートされているファイル形式有効な配置場所
favicon.icoapp/
icon.ico、.jpg、.jpeg、.png、.svgapp/**/*
apple-icon.jpg、.jpeg、.pngapp/**/*

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` などです。番号付きのファイルは辞書順にソートされます。
  • ファビコンはルートの`/app`セグメントにのみ設定できます。より細かく設定したい場合は、iconを使用できます。
  • 適切な`<link>` タグと、`rel`、`href`、`type`、`sizes`などの属性は、評価されたファイルのアイコンタイプとメタデータによって決定されます。
  • 例えば、32x32ピクセルの`.png`ファイルは、`type="image/png"` および `sizes="32x32"` の属性を持ちます。
  • 拡張子が`.svg`の場合、またはファイルの画像サイズが決定されていない場合、アイコンに`sizes="any"`が追加されます。詳細については、このファビコンハンドブックを参照してください。

コードでアイコンを生成 (.js, .ts, .tsx)

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

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

ファイル規約サポートされているファイル形式
icon.js、.ts、.tsx
apple-icon.js、.ts、.tsx

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

app/icon.tsx
import { ImageResponse } from 'next/og'
 
// 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" />

知っておくと良いこと:

  • デフォルトでは、生成されたアイコンは静的に最適化されます（ビルド時に生成されキャッシュされます）。ただし、動的APIやキャッシュされていないデータを使用する場合は除きます。
  • generateImageMetadata を使用して、同じファイルで複数のアイコンを生成できます。
  • favicon アイコンを生成することはできません。代わりにiconまたはfavicon.icoファイルを使用してください。
  • アプリのアイコンは、デフォルトでキャッシュされる特殊なルートハンドラです。ただし、動的APIまたは動的設定オプションを使用する場合は除きます。

Props

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

params (オプション)

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

app/shop/[slug]/icon.tsx
export default function Icon({ params }: { params: { slug: string } }) {
  // ...
}
ルートURLparams
app/shop/icon.js/shopundefined
app/shop/[slug]/icon.js/shop/1{ slug: '1' }
app/shop/[tag]/[item]/icon.js/shop/1/2{ tag: '1', item: '2' }

戻り値

デフォルトエクスポート関数は、`Blob` | `ArrayBuffer` | `TypedArray` | `DataView` | `ReadableStream` | `Response` を返す必要があります。

知っておくと良いこと: `ImageResponse` はこの戻り型を満たします。

設定エクスポート

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

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

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

ルートセグメント設定

icon と `apple-icon` は、Pages と Layouts と同じルートセグメント設定オプションを使用できる、特殊なルートハンドラです。

バージョン履歴

バージョン変更点
v13.3.0favicon、icon、およびapple-icon が導入されました