すべてのウェブサイトにはファビコンが必要です — ブラウザタブ、ブックマーク、アドレスバーに表示される小さなアイコンです。ICOは後方互換性のためにすべてのブラウザが必要とする従来のファビコン形式です。 PNGロゴや画像をICOに変換するのは、無料のブラウザベースのツールを使えば数秒でできます。知っておくべきことをまとめました。

PNGをICOに無料で変換する方法

PicovertのPNG → ICOコンバーターを開きます。アカウントやインストール不要。
PNGファイルをドロップします。最良の結果のために正方形のPNGを使用してください — 512×512または256×256が最適です。
コンバーターは複数のサイズ（16×16、32×32、48×48）を含むICOファイルを作成します。これらが単一の.icoファイルに埋め込まれます。
.icoファイルをダウンロードし、ウェブサイトのルートディレクトリにfavicon.icoとして保存してください。

ICOファイルとは？

ICO（アイコン）はMicrosoftのアイコン用コンテナフォーマットです。.icoファイルには、単一のファイル内に異なる解像度と色深度の複数の画像を格納できます。ブラウザがファビコンを表示するとき、ICOに埋め込まれた画像から最も適切なサイズを選択します。そのため、きちんと作られたfavicon.icoには16×16、32×32、場合によっては48×48バージョンが含まれます — ブラウザは各コンテキストに適したものを使用します。

ICOファイルはWindowsのデスクトップアイコンやアプリケーションアイコンにも使用されます。同じフォーマットがウェブファビコンとシステムアイコンの両方に使われています。

ファビコン作成に推奨されるPNGサイズ

正方形のPNGから始めてください。コンバーターがターゲットサイズにリサイズするので、ソースサイズよりも正方形であることの方が重要です：

512×512または256×256 — 理想的な開始サイズ。32×32と16×16にきれいにダウンサンプリングするのに十分な大きさです。
最小64×64 — これより小さいと16×16版が非常にぼやけます。
必ず正方形 — ファビコンは常に正方形です。ロゴが縦より横長の場合は、変換前にパディングを追加して正方形にしてください。

favicon.ico vs. PNGファビコン — どちらを使うべきか？

最新のブラウザはPNGファビコンを直接サポートしており、多くの開発者が今ではICOの代わりにPNGを使用しています。どちらのアプローチも機能します。それぞれの使い時：

ルートのfavicon.ico: 後方互換性に必要です。古いブラウザと一部のメールクライアントは、<link>タグがなくても自動的に/favicon.icoを取得します。すべてのサイトにfavicon.icoが必要です。
linkタグによるPNGファビコン: より大きなサイズで高品質であり、正確なサイズを指定できます。Apple Touch Icon（180×180）と最新の高DPIスクリーンに使用されます。

ベストプラクティス：両方を用意してください。ルートディレクトリの自動フェッチ用のfavicon.icoと、最新ブラウザ向けにHTMLheadで宣言したPNGファビコン。

ウェブサイトにファビコンを追加する方法

ウェブサイトのルートにfavicon.icoを置き、HTMLの<head>に以下を追加してください：

<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.png" type="image/png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

ICOリンクのsizes="any"属性は、このファイルに複数のサイズが含まれていることをブラウザに伝えます。PNGフォールバックはPNGを優先する最新ブラウザを処理します。 apple-touch-iconは誰かがあなたのサイトをiPhoneのホーム画面に追加するときに使用されます — 180×180のPNGである必要があります。

Next.jsでのファビコン作成

Next.js App Routerでは、src/app/に直接favicon.icoを配置してください。 Next.jsが自動的にサイトのファビコンとして提供します。追加サイズの場合は、同じディレクトリにicon.pngまたはapple-icon.pngを追加してください。

PNG vs. ICO：主な違い

PNG: 固定サイズの単一画像。完全な透明度をサポート。個別画像のファイルサイズが小さい。
ICO: 単一ファイルに複数サイズを格納するコンテナ。/favicon.icoリクエストに必要。複数サイズをバンドルするためやや大きい。

ファビコンの場合、ICO形式のマルチサイズ機能が役立ちます。単一ファイルからブラウザタブ用の16×16と固定タスクバーアイコン用の32×32を処理します。

JPGをICOに変換できますか？

はい — PicovertはJPGをICOにも変換します。プロセスは同じです。JPGは透明度をサポートしていないので、ロゴに透明な背景がある場合は、 ICOでそれを保持するためにPNGソースファイルを使用してください。

よくあるファビコンの間違い

正方形でないソース画像 — 300×100のロゴは正方形のファビコンに強制されると歪みます。まず正方形にトリミングするかパディングを追加してください。
小さいサイズで複雑すぎる — 詳細なイラストは16×16で読み取りにくくなります。ロゴの簡略版を使用してください — フルワードマークではなくマークだけ。
favicon.icoを間違った場所にアップロード — favicon.icoはルートディレクトリに置く必要があり、yourdomain.com/favicon.icoからアクセスできる必要があります。
Apple Touch Iconを忘れている — iOSはホーム画面のブックマークアイコンに別個の180×180 PNGを使用します。ファビコンとは別にこれを作成してください。