⭐ ファビコン生成

手持ちの画像を選ぶと、16／32／48／180（Apple touch）／192／512pxのファビコンPNGをまとめて作成し、サイズごとにダウンロードできます。処理はすべてお使いのブラウザ内で行われ、画像はサーバーに送信されません。

画像の選択

ここに画像をドラッグ＆ドロップ
または

PNG / JPEG / WebP / SVG など・正方形の画像が理想です

※ 生成される画像はすべてPNGです。元画像は正方形が理想で、正方形でない場合は中央クロップかfit余白のいずれかで正方形化します。小さいサイズ（16/32px）は細部がつぶれやすいため、細かい文字や線の多いロゴはシンプルな図案がきれいに出ます。

解説

ファビコン生成は、手持ちの画像（ロゴやイラスト、写真など）から、ウェブサイトやアプリで使うアイコン画像を必要なサイズごとにまとめて作成するツールです。ブラウザのタブに表示される小さなアイコン（ファビコン）から、スマホのホーム画面に置くApple touchアイコン、PWA用の大きめアイコンまで、16／32／48／180／192／512pxのPNGを一度に書き出せます。処理はすべてお使いのブラウザ内（Canvas）で行われ、選んだ画像がサーバーに送信されることはありません。

「ファビコン（favicon）」は favorite icon の略で、ブラウザのタブやアドレスバー、ブックマーク一覧に表示されるサイトの目印アイコンです。表示は数十px四方と小さいものの、たくさん開いたタブの中から目的のサイトを見分けたり、ブックマークで一目でそのサイトだと分かってもらったりと、地味ながら効き目のある要素です。設定していないと、多くのブラウザで白紙や既定アイコンが表示され、少し素っ気ない印象になります。

サイズごとに用途が異なります。16pxはブラウザのタブやアドレスバー、32pxは高解像度ディスプレイのタブやWindowsのタスクバー、48pxはWindowsのショートカットなどで使われます。180pxはApple touchアイコンで、iPhone・iPadのホーム画面に追加したときのアイコンになります。192pxと512pxはAndroidやPWA（ホーム画面に追加できるウェブアプリ）で使われ、512pxはスプラッシュ画面やストア表示など大きく見せる場面にも使われます。まとめて用意しておけば、主要な環境をひと通りカバーできます。

元画像は正方形（縦横が同じ長さ）が理想です。アイコンは正方形の枠に収まる前提で表示されるため、横長・縦長の画像だと中心がずれたり余白が目立ったりしがちです。本ツールでは、正方形でない画像に対して「中央を正方形にクロップ（はみ出しを切り取る）」か「全体を収める（余白を背景色で足す）」のどちらかを選べます。ロゴなど全体を見せたいものはfit、写真の主要部分だけ切り出したいときはクロップが向きます。背景色は透過・白・黒・任意のHEXから選べます。

作成したPNGは、HTMLの<head>内に<link>タグで設置します。本ツールは推奨タグ（rel="icon" と apple-touch-icon）をまとめたスニペットを出力するので、コピーして貼り付け、favicon-16.png などのファイル名・パスを実際の配置に合わせて調整してください。PWAを作る場合は、192pxと512pxを manifest.json の icons に登録します。画像は最終的にサーバーへアップロードして公開しますが、このツール上での生成・変換はすべて端末内で完結します。

本ツールはブラウザだけで完結する点が特長です。画像の読み込み・正方形化・各サイズへの縮小・PNG書き出しはすべて端末内で処理され、ネットワークに画像データが出ていきません。オフラインでも動作するので、公開前のロゴや社内向け素材でも安心して使えます。なお、16pxや32pxといった小さいサイズでは細かい文字や線がつぶれやすいため、ファビコンにはできるだけシンプルな図案を使うと、小さくてもはっきり見分けられるアイコンになります。

よくある質問

ファビコンとは何ですか？必ず設定した方がいいですか？

ファビコン（favicon）は、ブラウザのタブやアドレスバー、ブックマークに表示されるサイトの目印アイコンです。必須ではありませんが、設定しないと白紙や既定アイコンが表示され素っ気ない見た目になります。たくさん開いたタブやブックマークの中からサイトを見分けやすくなるため、設定しておくのがおすすめです。

どのサイズを用意すればいいですか？

一般的なサイトなら16・32・48pxがあれば基本のファビコンとして十分です。iPhone・iPadのホーム画面追加に対応するなら180px（Apple touch）、Android・PWAに対応するなら192pxと512pxも用意します。本ツールはこれらをまとめて生成するので、貼り付け先に合わせて必要なものを使ってください。

正方形でない画像を使うとどうなりますか？

アイコンは正方形の枠で表示されるため、そのままだと中心がずれたり余白が出たりします。本ツールでは「中央を正方形にクロップ（はみ出しを切り取る）」か「全体を収める（余白を背景色で足す）」を選べます。ロゴなど全体を見せたいときはfit、写真の主要部分を切り出したいときはクロップが向きます。理想は元から正方形の画像を用意することです。

背景を透過にできますか？

はい。背景色で「透過」を選ぶと、PNGの透明を保持したまま書き出します。背景のないロゴやアイコンに向いています。白や黒、任意のHEX色を選ぶと、fit時の余白や元画像の透明部分がその色で塗られます。タブの背景色になじませたい場合などに使い分けてください。

生成した画像はどうやってサイトに設定しますか？

各サイズをダウンロードしてサーバー（サイトのフォルダ）に置き、画面下のスニペットをHTMLの<head>内に貼り付けます。favicon-16.png などのファイル名・パスは、実際に置いた場所に合わせて変更してください。PWAを作る場合は、192pxと512pxを manifest.json の icons に登録します。

選んだ画像はどこかにアップロードされますか？

いいえ。画像の読み込み・正方形化・各サイズへの縮小・PNG書き出しはすべてお使いのブラウザ内（Canvas）で行われ、画像データがサーバーへ送信されることはありません。オフラインでも動作するので、公開前のロゴや社内素材でも安心して使えます。