メインコンテンツまでスキップ

favicon, icon と apple-icon

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

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

アプリのアイコンを設定するには、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​

favicon.ico 画像ファイルを root /app route segment に追加します。

<head> output
<link rel="icon" href="/favicon.ico" sizes="any" />

icon​

icon.(ico|jpg|jpeg|png|svg) 画像ファイルを追加します。

<head> output
<link
  rel="icon"
  href="/icon?<generated>"
  type="image/<generated>"
  sizes="<generated>"
/>

apple-icon​

apple-icon.(jpg|jpeg|png) 画像ファイルを追加します。

<head> output
<link
  rel="apple-touch-icon"
  href="/apple-icon?<generated>"
  type="image/<generated>"
  sizes="<generated>"
/>

Good to know:

  • ファイル名に数値後続文字を追加して複数のアイコンを設定することができます。例えば、icon1.png、icon2.png などです。番号付きのファイルは辞書順にソートされます。
  • Favicon は root /app セグメントでのみ設定できます。より詳細な設定が必要な場合は、icon を使用してください。
  • 適切な <link> タグと属性 rel、href、type、sizes は、アイコンの種類と評価されたファイルのメタデータによって決定されます。
  • 例えば、32x32px の .png ファイルには type="image/png" および sizes="32x32" 属性が付きます。
  • 拡張子が .svg の場合やファイルの画像サイズが不明な場合、sizes="any" がアイコンに追加されます。この詳細については、この favicon handbook を参照してください。

コードを使用してアイコンを生成する (.js, .ts, .tsx)​

画像ファイルを使う かわりに、コードを使ってプログラム的にアイコンを生成することができます。

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

ファイル規約対応しているファイルタイプ
icon.js, .ts, .tsx
apple-icon.js, .ts, .tsx

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

app/icon.tsx
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 element
      <div
        style={{
          fontSize: 24,
          background: 'black',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
        }}
      >
        A
      </div>
    ),
    // ImageResponse options
    {
      // 便利のために、エクスポートされたアイコンのサイズメタデータを
      // ImageResponse の幅と高さを設定するための設定にも再利用できます。
      ...size,
    }
  )
}
<head> output
<link rel="icon" href="/icon?<generated>" type="image/png" sizes="32x32" />

Good to know:

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

Props​

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

params (任意)​

root segment から icon または apple-icon が共置されている segment までの動的ルートパラメータオブジェクトを含むオブジェクトです。

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 を返す必要があります。

Good to know: ImageResponse はこの戻り値の型を満たします。

Config exports​

icon または apple-icon route から 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> output
<link rel="icon" sizes="32x32" />

contentType​

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

export default function Icon() {}
<head> output
<link rel="icon" type="image/png" />

Route Segment Config​

icon と apple-iconは、PagesやLayoutsと同じroute segment configurationオプションを使用できる特殊なRoute Handlersです。

バージョン履歴​

バージョン変更内容
v13.3.0favicon、icon と apple-icon が導入されました