コンテンツにスキップ
ファイルシステム規約メタデータファイルfavicon, icon, and apple-icon

favicon, icon, and apple-icon

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

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

アプリアイコンを設定するには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 を使用してください。
  • 適切な <link> タグと、rel、href、type、sizes などの属性は、アイコンのタイプと評価されたファイルのメタデータによって決定されます。
  • たとえば、32x32px の .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 を使用することです。

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

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

params (オプション)

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

重要: generateImageMetadata を使用する場合、関数は generateImageMetadata によって返されたアイテムのいずれかから id 値に解決される Promise である id プロップも受け取ります。

app/shop/[slug]/icon.tsx
export default async function Icon({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  // ...
}
RouteURLparams
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' }>

戻り値

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

重要: ImageResponse はこの返却タイプを満たします。

Config exports

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

Route Segment Config

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

バージョン履歴

バージョン変更履歴
v16.0.0params は、オブジェクトに解決される Promise になりました
v13.3.0favicon icon および apple-icon が導入されました