Menu

favicon、icon、apple-icon

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

これらはウェブブラウザタブ、スマートフォンのホーム画面、検索エンジン結果など、様々な場所に表示されるアプリアイコンを追加する際に便利です。

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

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

/app ディレクトリ内に favicon、icon、apple-icon 画像ファイルを配置することで、画像ファイルを使用してアプリアイコンを設定できます。 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 などです。番号付きファイルは辞書順でソートされます。
  • Favicon はルートの /app セグメントにのみ設定できます。より細かく制御する必要がある場合は、icon を使用できます。
  • rel、href、type、sizes などの適切な <link> タグと属性は、アイコンの種類と評価されたファイルのメタデータによって決定されます。
  • 例えば、32×32px の .png ファイルは type="image/png" と sizes="32x32" 属性を持ちます。
  • sizes="any" は、拡張子が .svg である場合またはファイルの画像サイズが判定されない場合、アイコンに追加されます。詳細はこちらの favicon handbook を参照してください。

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

リテラル画像ファイルの使用に加えて、コードを使用してプログラム的にアイコンを生成できます。

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

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

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

app/icon.tsx
TypeScript
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" />

補足：

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

Props

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

params（オプション）

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

補足：generateImageMetadata を使用する場合、関数は generateImageMetadata が返するアイテムの1つからの id 値に解決されるPromiseである id propも受け取ります。

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

Returns

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

補足：ImageResponse はこの戻り値の型を満たします。

Config エクスポート

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

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

size

icon.tsx
TypeScript
export const size = { width: 32, height: 32 }
 
export default function Icon() {}
<head>
<link rel="icon" sizes="32x32" />

contentType

icon.tsx
TypeScript
export const contentType = 'image/png'
 
export default function Icon() {}
<head>
<link rel="icon" type="image/png" />

ルートセグメント設定

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

バージョン履歴

バージョン変更内容
v16.0.0params は、オブジェクトに解決されるPromiseになりました
v13.3.0導入時期：favicon、icon、apple-icon