PNG を ICO に変換して favicon.ico を作る

ウェブサイトのアイコン、つまりブラウザのタブに出る小さなマークは、たいてい favicon.ico というファイルです。ロゴの画像が PNG しかなくても、そこに必要なファイル一式を作れます。このページではその作り方を、ブラウザの中だけで説明します。アップロードは不要です。

favicon.ico とは何か

favicon.ico は、通常の画像形式ではありません。同じ画像を複数の大きさで持つ小さな入れ物で、ブラウザが表示に合うものを選びます。16×16 はタブ、32×32 はブックマークや履歴、48×48 はデスクトップのショートカットに使われます。3つの大きさが1つのファイルにまとめるので、favicon.ico 1個でどこでも使えます。

現代のウェブサイトでは、.ico では扱えない場面のために別のファイルを指定することもあります。180×180 の Apple touch icon、192 と 512 ピクセルの Android 用アイコン、そしてそれらをまとめる Web アプリマニフェストです。ブラウザはまず .ico を要求します。タブやブックマークやフィードリーダーは、今でも慣習として /favicon.ico を探すからです。

ファイル一式をここで作る

サイトアイコン一式は、ファビコン ジェネレーター でまとめて作れます。ブラウザの中で完結するので、アップロードは要りません。

1. ロゴを選びます。PNG、JPG、WebP、SVG のどれでも使えます。
2. 正方形で 512×512 以上なら、小さい大きさでも見た目が保たれます。
3. タブ用のアイコンなら 背景を透明に にチェックするか、背景色を選びます。
4. ZIP をダウンロードします。

その ZIP には favicon.ico（16、32、48）、apple-touch-icon.png（180）、Android 用と 192 と 512 の PNG、そして site.webmanifest が含まれます。

アイコンはすべてあなたのブラウザが描画します。ページのセキュリティ方針がサーバーへの接続を遮断しているので、ロゴが外部に送られることはありません。

16 ピクセルでぼやける理由

16 ピクセル四方には余裕がほとんどありません。文字を含むロゴは灰色のかたまりになり、太い字やシンプルな記号なら読めます。

設定を変えるより、アイコン用の簡易版を用意して、タブの中で少し余白を残すほうが無難です。

ロゴが正方形でない場合は、切り抜きと回転 で形を整え、リサイズ でページ本体用の大きいロゴを別に用意できます。

Apple のアイコンから透明感がなくなる理由

iOS は透明な部分を黒く見せるため、apple-touch-icon.png は選んだ背景色で必ず塗られます。これは意図的な処理です。

背景色は、サイトのロゴの下の色か白にします。

アイコンが反映されないとき

ブラウザはファビコンを強くキャッシュするので、新しいファイルがすぐ無視されることがあります。強制再読み込みするか、プライベートウィンドウで開いてみてください。

それでも古いマークが出る場合は、ファイルがサイトのルートにあるか確認してください。

よくある質問