早押しボタンweb

用意すべきicon画像について

Webサイトにおいて、アイコン画像はユーザー体験やブランド印象に大きく影響します。ここでは、サイトに必要な各種アイコンファイルの種類やサイズ、役割について解説します。

favicon.ico

favicon.ico は、主にブラウザのタブやブックマークで表示されるアイコンです。Windows環境との互換性が高く、現在でも設置が推奨されています。

ファイル名：favicon.ico
推奨サイズ：16×16ピクセル（または複数サイズを含むマルチアイコン）
形式：ICO形式（複数のサイズを含むことが可能）
配置場所：/public/favicon.ico

Next.jsでは、このパスに配置するだけで自動的に認識されます。

SVGまたはPNG形式のfavicon

近年のブラウザでは、favicon.svg や favicon.png の使用も可能です。高解像度に対応しやすく、拡大しても画質が劣化しないのが特徴です。

ファイル名例：favicon.svg または favicon-32x32.png
推奨サイズ（PNG）：32×32、48×48
推奨サイズ（SVG）：ベクター形式のためサイズは可変

apple-touch-icon.png

これはiOSデバイスでホーム画面に追加された際に使われるアイコンです。iPhoneやiPadで見栄えを整えるために設定します。

ファイル名：apple-touch-icon.png
推奨サイズ：180×180ピクセル
形式：PNG
配置場所：/public/apple-touch-icon.png

Next.jsでの設定方法

Next.js App Routerでは、metadata オブジェクトに icons プロパティを追加することで、各種アイコンの設定を自動的に <head> に反映させることができます。

1// app/layout.tsx または app/page.tsx で記述
2  export const metadata = {
3    icons: {
4      icon: [
5        { url: '/favicon.ico', type: 'image/x-icon' },
6        { url: '/favicon.svg', type: 'image/svg+xml' },
7      ],
8      apple: '/apple-touch-icon.png',
9    },
10  };
11

上記のように記述しておけば、HTMLの<head>タグ内に<link rel="icon"> や <link rel="apple-touch-icon"> が自動的に挿入されます。

HTMLを直接編集する必要はありません。

その他の推奨アイコン

より多くのプラットフォームに対応したい場合は、以下のようなアイコンの追加も検討できます：

favicon-16x16.png：古いブラウザ用のPNGアイコン
favicon-32x32.png：一般的な高解像度向け
site.webmanifest：PWA対応用の設定ファイル（icons配列で複数サイズを指定）

まとめ

Webサイトで使用するアイコン画像は、環境ごとに最適な形式やサイズがあります。以下のように用意しておくと安心です：

favicon.ico（16×16 またはマルチサイズ、ICO形式）
favicon.svg（モダンブラウザ向け、ベクター形式）
favicon-32x32.png（フォールバック用）
apple-touch-icon.png（iOSホーム追加用、180×180）

これらを /public フォルダに配置し、Next.jsの metadata.icons に設定すれば、多くの環境に対応した適切な表示が可能になります。

記事一覧へ戻る