Next.js Appleアイコン設定：2026年App Routerガイド

Next.js サイトを iPhone で開いて、ホーム画面に追加したときに空白のグレーの四角形が表示された経験はありませんか？それは、Apple touch icon が設定されていないからです。ブラウザのタブの favicon は正常に見えても、iOS は別のファイルを使用します。そして、Next.js にはそれを配信するための特定の方法があります。

このガイドでは、App Router のファイルベースのメタデータシステムを使用した Next.js での Apple アイコン設定 について説明します。カスタム API ルートや _document.tsx への手動の <link> タグの追加は不要です。適切なフォルダにファイルを置くだけで完了します。

前提条件

始める前に、以下のものを用意してください：

App Router を使用している Next.js プロジェクト（バージョン 13.2 以降）。
アイコン用の画像ファイル。Apple はタッチアイコンに 180×180 の PNG を推奨していますが、これについては後ほど説明します。
プロジェクトの app/ ディレクトリに関する基本的な知識。

ステップ 1: Apple Touch Icon を準備する

Apple のタッチアイコンは、ユーザーがサイトをホーム画面に追加したときに iOS が使用する PNG ファイルです。推奨サイズは 180×180 ピクセルですが、iPad Pro 用に 167×167、古い iPad 用に 152×152 を提供することもできます。ただし、iOS は 180×180 のアイコンを自動的に縮小するため、1 つのファイルだけで十分です。

既製のアイコンがない場合は、Mzu favicondl などのツールを使用してロゴから生成できます。このツールは、適切な透明度とパディングを持つ 180×180 の PNG をエクスポートできます。

ステップ 2: ファイルを App ディレクトリに配置する

Next.js App Router では、apple-icon.png（または apple-icon.jpg）を app/ ディレクトリに直接追加できます。Next.js が自動的にそれを検出し、サイトのルートで配信します。ファイルは layout.tsx と同じフォルダ（通常は app/）に配置する必要があります。

フォルダ構造の例は次のとおりです：

app/
├── layout.tsx
├── page.tsx
├── apple-icon.png
└── icon.png

これで完了です。Next.js がページの head に適切な <link rel='apple-touch-icon'> タグを自動的に生成します。手動で HTML を記述する必要はありません。

ステップ 3: 生成された HTML を確認する

アイコンが正しく配信されていることを確認するには、開発サーバーを実行してページのソースを調べます。次のような行が表示されるはずです：

<link rel='apple-touch-icon' href='/apple-icon.png' sizes='180x180' type='image/png'/>

表示されない場合は、ファイル名が正確に apple-icon.png であり、正しいディレクトリにあることを確認してください。Next.js は Linux と macOS では大文字と小文字を区別します。

ステップ 4: より詳細な制御のために Metadata API を使用する

複数のアイコンを指定する必要がある場合や、プログラムで設定したい場合は、レイアウトの metadata エクスポートを使用できます。これは、ルートごとに異なるアイコンがある場合や、Android 用のマスカブルアイコンを追加したい場合に便利です。

app/layout.tsx の例は次のとおりです：

import type { Metadata } from 'next';

export const metadata: Metadata = {
  icons: {
    apple: [
      { url: '/apple-icon.png', sizes: '180x180', type: 'image/png' },
    ],
  },
};

この方法では、rel、sizes、type 属性を完全に制御できます。また、Android PWA 用の maskable アイコンを追加するためにも使用できますが、それは別のトピックです。

よくある落とし穴

遭遇する可能性のあるいくつかの問題を以下に示します：

ファイルが見つからない： ファイル名を再確認してください。正確に apple-icon.png または apple-icon.jpg である必要があります。Next.js は apple-touch-icon.png を認識しません。
キャッシュの問題： iOS はアイコンを積極的にキャッシュします。アイコンを変更しても更新されない場合は、Safari のキャッシュをクリアするか、別のデバイスで試してください。
サイズの誤り： Apple は 180×180 を推奨していますが、異なるサイズを使用すると iOS がスケーリングします。スケーリングによりぼやけが生じる可能性があるため、推奨サイズに従ってください。
透明度： iOS は Apple touch icon の透明度をサポートしていません。PNG に透明な領域があると、黒く表示されます。アイコンは不透明な背景にしてください。

まとめ

Next.js での Apple touch icon の設定は、ファイルベースの規約を知っていれば簡単です。適切なサイズの PNG を app/ フォルダに置くだけで、Next.js が残りを処理します。より高度なシナリオでは、metadata API を使用してプログラムで制御できます。

アイコン自体を生成する必要がある場合は、Mzu favicondl を使用して、ロゴから必要なすべてのサイズを作成してみてください。また、Next.js での favicon 設定の詳細については、Next.js Favicon ガイドを参照してください。

ドキュメントに記載されている要件を確認する

Next.js は、favicon とアプリアイコンについて、メタデータファイル規約で文書化しています。