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

favicon, icon, and apple-icon

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

これらは、ウェブブラウザのタブ、電話のホーム画面、検索エンジンの検索結果のような場所に表示されるアプリアイコンを追加するのに便利です。

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

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

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

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

ファイル規約サポートするファイル形式有効な場所
favicon.icoapp/
icon.ico, .jpg, .jpeg, .png, .svgapp/**/*
apple-icon.jpg, .jpeg, .pngapp/**/*

favicon

ルートの/appルート Segment に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>"
/>

Good to know:

  • ファイル名に数字の接尾辞を付けることで、複数のアイコンを設定することができます。例えば、icon1.pngicon2.pngなど、番号の付いたファイルは辞書順にソートされます
  • Favicon は、ルートの/appセグメントにのみ設定できます。より詳細な設定が必要な場合は、iconを使うことができます
  • 適切な<link>タグとrelhreftypesizesなどの属性は、アイコンの種類と評価されたファイルのメタデータによって決まります
    • 例えば、32×32px の.pngファイルはtype="image/png"sizes="32x32"の属性を持ちます
  • sizes="any"は、.icoアイコンが.svgよりも優先されるブラウザのバグを避けるために、favicon.icoの出力に追加されます

アイコンを生成するコードを使用する(.js、.ts、.tsx)

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

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

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

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

app/icon.tsx
import { ImageResponse } from 'next/server'

// Route segment config
export const runtime = 'edge'

// Image metadata
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のオプション
{
// 便宜上、エクスポートしたアイコンサイズのメタデータ設定を再利用して
// ImageResponse の幅と高さも設定できます。
...size,
}
)
}
<head>の出力
<link rel="icon" href="/icon?<generated>" type="image/png" sizes="32x32" />

Good to know:

  • デフォルトでは、生成されたアイコンは、動的関数またはキャッシュされていないデータを使用しない限り、静的に最適化されます(ビルド時に生成され、キャッシュされます)
  • generateImageMetadataを使用して、同じファイルに複数のアイコンを生成できます
  • faviconアイコンは生成できません。代わりにiconまたはfavicon.icoファイルを使用してください

Props

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

params(任意)

iconまたはapple-iconがコロケートされているルート Segment から 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' }
app/shop/[...slug]/icon.js/shop/1/2{ slug: ['1', '2'] }

Returns

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

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

設定のエクスポート

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

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

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 の設定

iconapple-iconは、ページやレイアウトと同じルート Segment の設定オプションを使用できる、特殊なルートハンドラです。

オプションデフォルト
dynamic'auto' | 'force-dynamic' | 'error' | 'force-static''auto'
revalidatefalse | 'force-cache' | 0 | numberfalse
runtime'nodejs' | 'edge''nodejs'
preferredRegion'auto' | 'global' | 'home' | string | string[]'auto'
app/icon.tsx
export const runtime = 'edge'

export default function Icon() {}

バージョン履歴

VersionChanges
v13.3.0favicon icon apple-icon 導入