ファビコン生成の使い方｜画像から16〜512pxのファビコンをまとめて作る
公開日：2026年8月10日 対象ツール：ファビコン生成
ウェブサイトを作ったとき、ブラウザのタブに表示される小さなアイコンが白紙のままだと、少し素っ気ない印象になります。この小さなアイコンがファビコン（favicon）です。ファビコン生成は、手持ちの画像（ロゴやイラスト、写真など）から、サイトやアプリで必要になるサイズのファビコンPNGをまとめて作れるツールです。処理はすべてお使いのブラウザ内（Canvas）で行われ、選んだ画像がサーバーに送信されることはありません。無料で、会員登録も不要です。
ファビコンとは・どこに表示される？
ファビコンは favorite icon の略で、サイトの目印になる小さなアイコンです。表示される場所は主に次のとおりです。
- ブラウザのタブ・アドレスバー：たくさん開いたタブの中から目的のサイトを見分ける手がかりになります。
- ブックマーク一覧：登録したサイトを一目で判別しやすくなります。
- スマホのホーム画面：iPhone・iPadで「ホーム画面に追加」したときのアイコン（Apple touchアイコン）や、Android・PWAのアイコンとして使われます。
必須ではありませんが、設定しておくとサイトの見分けがつきやすくなり、印象も引き締まります。
必要なサイズと用途
このツールは、16／32／48／180／192／512pxのPNGを一度に書き出します。サイズごとに役割が違います。
- 16px：ブラウザのタブやアドレスバーで使われる、いちばん基本のサイズです。
- 32px：高解像度ディスプレイのタブやWindowsのタスクバーなどで使われます。
- 48px：Windowsのショートカットなどで使われます。
- 180px：Apple touchアイコン。iPhone・iPadのホーム画面に追加したときのアイコンになります。
- 192px・512px：Android・PWA（ホーム画面に追加できるウェブアプリ）で使われ、512pxはスプラッシュ画面など大きく見せる場面にも使われます。
まとめて用意しておけば、主要な環境をひと通りカバーできます。貼り付け先に合わせて必要なものだけ使ってもかまいません。
元画像の作り方のコツ
元画像は正方形（縦横が同じ長さ）が理想です。アイコンは正方形の枠に収まる前提で表示されるため、横長・縦長の画像だと中心がずれたり余白が目立ったりしがちです。もうひとつ大切なのは小さくても視認できる単純な形にすることです。16pxや32pxでは細かい文字や線がつぶれやすいので、要素を詰め込みすぎず、シンボル1つや頭文字1文字くらいのシンプルな図案にすると、小さくてもはっきり見分けられます。余白を少し取っておくと、枠の端で切れる印象も避けられます。
使い方
- 「画像ファイルを選択」から画像を選ぶか、点線の枠内にドラッグ＆ドロップします。正方形が理想ですが、そうでなくても生成できます。
- 正方形でない画像の扱いを選びます。中央を正方形にクロップははみ出しを切り取り、全体を収める（fit）は余白を背景色で足して正方形にします。ロゴなど全体を見せたいものはfit、写真の主要部分だけ切り出したいときはクロップが向きます。
- 背景色を選びます。透過（PNGの透明を保持）／白／黒／カスタムHEXから選べ、fit時の余白や元画像の透明部分に使われます。
- 「ファビコンを生成」を押すと各サイズのプレビューが表示され、サイズごとの「保存」ボタンで個別にPNGをダウンロードできます。
- 画面下の設置スニペットを<head>内に貼り付け、パスを実際の配置場所に合わせて調整すれば完了です。
生成したファビコンの設置手順
ダウンロードしたPNGをサーバー（サイトのフォルダ）に置いたら、HTMLの<head>内に<link>タグで読み込みます。このツールは推奨タグ（rel="icon" と apple-touch-icon）をまとめたスニペットを出力するので、コピーして貼り付けるだけです。たとえば次のような形になります。
- <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
- <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180.png">
favicon-16.png などのファイル名・パスは、実際に置いた場所に合わせて変更してください。PWAを作る場合は、192pxと512pxを manifest.json の icons に登録します。画像は最終的にサーバーへアップロードして公開しますが、このツール上での生成・変換はすべて端末内で完結します。
よくある質問
どのサイズを用意すればいいですか
一般的なサイトなら16・32・48pxがあれば基本のファビコンとして十分です。iPhone・iPadのホーム画面追加に対応するなら180px、Android・PWAに対応するなら192pxと512pxも用意します。このツールはこれらをまとめて生成するので、貼り付け先に合わせて必要なものを使ってください。
正方形でない画像を使うとどうなりますか
アイコンは正方形の枠で表示されるため、そのままだと中心がずれたり余白が出たりします。このツールでは「中央を正方形にクロップ（はみ出しを切り取る）」か「全体を収める（余白を背景色で足す）」を選べます。ロゴなど全体を見せたいときはfit、写真の主要部分を切り出したいときはクロップが向きます。理想は元から正方形の画像を用意することです。
背景を透過にできますか
できます。背景色で「透過」を選ぶと、PNGの透明を保持したまま書き出します。背景のないロゴやアイコンに向いています。白や黒、任意のHEX色を選ぶと、fit時の余白や元画像の透明部分がその色で塗られます。タブの背景色になじませたいときなどに使い分けてください。
選んだ画像はどこかにアップロードされますか
いいえ。画像の読み込み・正方形化・各サイズへの縮小・PNG書き出しはすべてお使いのブラウザ内（Canvas）で行われ、画像データがサーバーへ送信されることはありません。オフラインでも動作するので、公開前のロゴや社内素材でも安心して使えます。
手持ちの画像さえあれば、必要なサイズのファビコンをまとめて用意して<head>に貼り付けるだけで設定できます。すべて端末内で処理され外部に送信されない無料ツールなので、まずは手元のロゴで気軽に試してみてください。