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

favicon、icon、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などです。番号付きのファイルは辞書順にソートされます。
  • ファビコンは、ルートの /app セグメントでのみ設定できます。より詳細な設定が必要な場合は、icon を使用できます。
  • 適切な <link> タグと、rel、href、type、sizes などの属性は、アイコンの種類と評価されたファイルのメタデータによって決定されます。
  • たとえば、32 x 32px の .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' }

Returns

デフォルトのエクスポート関数は、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 は、ページやレイアウトと同じ ルートセグメント構成オプションを使用できる特別な ルートハンドラーです。

バージョン履歴

バージョン変更点
v13.3.0favicon icon および apple-icon を導入