favicon, icon, and apple-icon
favicon
、icon
、またはapple-icon
ファイル規約により、アプリケーションのアイコンを設定できます。
これらは、ウェブブラウザのタブ、電話のホーム画面、検索エンジンの検索結果のような場所に表示されるアプリアイコンを追加するのに便利です。
アプリアイコンを設定するには 2 つの方法があります:
画像ファイル(.ico、.jpg、.png)
画像ファイルを使ってアプリアイコンを設定するには、/app
ディレクトリ内にfavicon
、icon
、apple-icon
の画像ファイルを配置します。favicon
画像はapp/
のトップレベルにのみ配置できます。
Next.js はファイルを評価し、アプリの<head>
要素に適切なタグを自動的に追加します。
ファイル規約 | サポートするファイル形式 | 有効な場所 |
---|---|---|
favicon | .ico | app/ |
icon | .ico , .jpg , .jpeg , .png , .svg | app/**/* |
apple-icon | .jpg , .jpeg , .png | app/**/* |
favicon
ルートの/app
ルート Segment にfavicon.ico
画像ファイルを配置します。
<link rel="icon" href="/favicon.ico" sizes="any" />
icon
icon.(ico|jpg|jpeg|png|svg)
画像ファイルを配置します。
<link
rel="icon"
href="/icon?<generated>"
type="image/<generated>"
sizes="<generated>"
/>
apple-icon
apple-icon.(jpg|jpeg|png)
画像ファイルを配置します。
<link
rel="apple-touch-icon"
href="/apple-icon?<generated>"
type="image/<generated>"
sizes="<generated>"
/>
Good to know:
- ファイル名に数字の接尾辞を付けることで、複数のアイコンを設定することができます。例えば、
icon1.png
、icon2.png
など、番号の付いたファイルは辞書順にソートされます- Favicon は、ルートの
/app
セグメントにのみ設定できます。より詳細な設定が必要な場合は、icon
を使うことができます- 適切な
<link>
タグとrel
、href
、type
、sizes
などの属性は、アイコンの種類と評価されたファイルのメタデータによって決まります
- 例えば、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/server
のImageResponse APIを使用することです。
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,
}
)
}
<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 の動的な ルートパラメータオブジェクトを含むオブジェクトです。
export default function Icon({ params }: { params: { slug: string } }) {
// ...
}
ルート | URL | params |
---|---|---|
app/shop/icon.js | /shop | undefined |
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
ルートからsize
とcontentType
変数をエクスポートすることで、オプションでアイコンのメタデータを設定できます。
オプション | 型 |
---|---|
size | { width: number; height: number } |
contentType | string - image MIME type |
size
export const size = { width: 32, height: 32 }
export default function Icon() {}
<link rel="icon" sizes="32x32" />
contentType
export const contentType = 'image/png'
export default function Icon() {}
<link rel="icon" type="image/png" />
Route Segment の設定
icon
とapple-icon
は、ページやレイアウトと同じルート Segment の設定オプションを使用できる、特殊なルートハンドラで す。
オプション | 型 | デフォルト |
---|---|---|
dynamic | 'auto' | 'force-dynamic' | 'error' | 'force-static' | 'auto' |
revalidate | false | 'force-cache' | 0 | number | false |
runtime | 'nodejs' | 'edge' | 'nodejs' |
preferredRegion | 'auto' | 'global' | 'home' | string | string[] | 'auto' |
export const runtime = 'edge'
export default function Icon() {}
バージョン履歴
Version | Changes |
---|---|
v13.3.0 | favicon icon apple-icon 導入 |