ファビコン生成

ファビコン生成の使い方

1. 1元になる画像をドラッグ&ドロップまたはクリックでアップロードします
2. 2「変換する」ボタンをクリックします（出力サイズは16px・32px・48px・180pxの4種で固定です）
3. 3生成された4サイズのファビコンをそれぞれダウンロードします

ファビコン生成の例文・サンプル

元画像: logo.png（512x512 透過PNG）

良いファビコン生成の判断基準

サイトの立ち上げや納品前の仕上げで、ブラウザのタブやブックマークに表示されるファビコンを用意するときに使います。生成したファビコンは、下の基準で「小さくしても識別できるか・正しく表示されるか」を確認します。

• 元画像は十分な解像度の正方形か

  512px以上の正方形画像を元にすると、各サイズで美しく縮小できます。小さい元画像から生成すると、大きいサイズのファビコンがぼやけます。

• 最小サイズで図柄がつぶれていないか

  16pxのような小さいサイズでは細部がつぶれます。生成結果を実際の表示サイズで見て、何のマークか識別できるかを確認します。

• 必要なサイズが揃っているか

  ブラウザのタブ用・ブックマーク用・スマートフォンのホーム画面用など、用途ごとに必要なサイズが違います。生成されたセットに使う場面のサイズが含まれているかを確認します。

• 明るい背景・暗い背景の両方で見えるか

  ブラウザのテーマによってタブの背景色は変わります。特に透過背景のファビコンは、白背景と黒背景の両方に置いて視認できるかを確認します。

• HTML側のlink要素を記述したか

  ファビコンのファイルを生成・設置しただけでは表示されません。本ツールが返すのは4サイズの画像ファイルまでで、貼り付けコードの提示は無いため、head内のlink要素は自分で記述したかを確認します。

• 反映確認はキャッシュを考慮したか

  ファビコンはブラウザに強くキャッシュされ、差し替えてもすぐ反映されないことがよくあります。表示されないと判断する前に、キャッシュを消した状態や別ブラウザで確認します。

ありがちな失敗例（NG → 改善）

タブやブックマークに出る小さなアイコンを、サイズごとに用意する手間

ファビコン（favicon）は、ブラウザのタブやブックマークに表示される小さなアイコンで、サイトを見分ける目印になります。しかし、複数サイズ（16px、32px、180px など）のファビコンを Photoshop や Illustrator で個別に作成するのは手間がかかります。PWA 対応で必要な複数解像度のアイコンセットを揃えるのも面倒です。本ツールは画像をアップロードするだけで、16px・32px・48px・180px の4サイズのファビコンを自動生成し、サイズごとにダウンロードできます。

ブログ立ち上げ・納品前の仕上げ・ホーム画面アイコンで使う場面

【1. 個人ブログ・ポートフォリオサイトの立ち上げ】サイトのロゴ画像から、必要な全サイズのファビコンを一括生成できます。

【2. クライアントサイト納品前の最終仕上げ】ファビコンが未設定のままになっているサイトの最終仕上げに使えます。

【3. スマートフォンのホーム画面用アイコンの用意】iOS のホーム画面などで使われる 180px のアイコンも、同じ操作で一緒に生成されます。

生成されるのは 16px・32px・48px・180px の4サイズで、いずれも PNG です。サイズを足したり、品質を指定したりする設定欄はありません。画像は当サイトのサーバー側で処理され、4サイズがまとめて返ります。AI は使っていません。

1600x1000 の写真を入れて4サイズを生成した実処理結果

実際に何が返るのか、編集部で3枚の画像を入れて確かめました。1枚目は横長の写真（1600x1000・JPEG）で、左上にタイトル文字、右下に円形の要素が入ったものです。

返ってきたのは4枚です。16px が 768バイト、32px が 2,050バイト、48px が 5,053バイト、180px が 61,418バイトで、いずれも形式は PNG、透過は無しでした。寸法はそれぞれ 16x16、32x32、48x48、180x180 です。

中身を 180px で目視すると、左上に置いていたタイトル文字は大部分が切れて消え、右下の円形の要素と細かい注記だけが残っていました。横長の画像を正方形にそろえるとき、中央を基準にして左右を均等に切り落とす処理を使っているためです。元画像のどこが残るかは、デザインの寄せ方で決まります。今回試した3枚で見えた範囲であり、どんな画像でも同じ切れ方になる保証ではありません。

透過ロゴと 64x64 の小さいアイコンを入れた実処理結果

2枚目は透過のあるロゴ（512x512・PNG）です。4サイズとも透過は保たれました。バイト数は 16px が 569バイト、32px が 1,410バイト、48px が 2,444バイト、180px が 11,630バイトです。正方形で中央にロゴが収まっている画像だったため、切り落としで欠ける部分も出ませんでした。

3枚目は 64x64 の小さいアイコン（透過あり）です。4サイズとも生成でき、16px が 472バイト、32px が 898バイト、48px が 1,393バイト、180px が 10,023バイトでした。透過も保たれています。ただし 64px の画像から 180px を作る場合は、約2.8倍に引き伸ばすことになり、輪郭がわずかに柔らかくなりました。壊れはしませんが、失われたシャープさは戻りません。ホーム画面用の大きいサイズまできれいに出したいなら、元画像は大きめを用意してください。

ファビコン生成で分かったクセと弱点（中央以外は消える・画面に案内が出ない）

分かったクセは3つです。1つ目は、正方形にそろえるときの基準が常に画像の中央であること。左上寄せ・右下寄せでデザインした画像を入れると、見せたい要素が切れて消えます。2つ目は、出力が常に PNG の4サイズに固定されていること。サイズの追加も、品質の指定もできません。3つ目は、透過はそのまま保たれることです。

弱点は、切り落としが起きることそのものより、それが事前に分からない点にあります。画面には中央で切り取るという案内が出ません。1枚目の写真のように元画像の主役が中央から外れていると、生成された結果を開くまで欠けに気づけません。

なお、今回入れたのは JPEG と PNG だけです。SVG など他の形式を入れたときにどうなるかは測れていません。

ファビコンに向かない元画像と、生成前に直しておくこと

実測から言えるのは、横長・縦長のバナーやスクリーンショットをそのまま入れる使い方が向かない、ということです。中央以外は消える前提になるため、先に正方形へ切り抜いてから入れてください。

生成前に直しておきたい点は3つあります。1つ目の失敗は、元画像の解像度が低すぎることです。512px 以上の正方形画像を元にすると、各サイズで美しく縮小できます。256px 未満の画像から生成すると、大きいサイズのファビコンがぼやけます。

2つ目は、複雑なロゴをそのまま使うことです。16px のような小さいサイズでは細部が潰れるため、シンプルな図柄を選んでください。

3つ目は、HTML側のlink要素の記述漏れです。ファビコンファイルを生成しても、HTML の head 内に link 要素として記述しないと表示されません。本ツールが返すのは4サイズの画像ファイルまでで、HTML への記述は自分で行ってください。

海外の生成サービスや画像編集ソフトとの使い分け

海外製のファビコン生成サービスは設定項目が多く、英語の画面で細かく指定していく作りのものが目立ちます。初めて作る人には敷居が高い側面があります。本ツールは日本語の画面で、画像をアップロードすれば 16px・32px・48px・180px が一度に返ります。会員登録もログインも不要です。

一方で、余白の付け方、背景色の指定、4サイズ以外の書き出しは本ツールではできません。ここを詰めたい場合は、画像編集ソフトで正方形に整えてから本ツールに入れるか、書き出しまでソフト側で済ませるほうが速いです。アイコンの図柄そのものを作る作業も、本ツールの範囲外です。

生成した4サイズを本番に置く前に開いて見る3点

1つ目は、180px を等倍で開いて、残したい要素が中央に残っているかを見ることです。写真やバナーを入れた場合は、ここで欠けに気づけます。

2つ目は、透過のある元画像を入れたとき、透過が残っているかです。今回の3枚では透過は保たれましたが、置き場所の背景色によっては、透過のままのほうが不都合なこともあります。

3つ目は、元画像より大きいサイズへ引き伸ばしていないかです。64px の画像から 180px を作ったときは、輪郭が柔らかくなりました。元画像の一辺が 180px を下回っているなら、元画像を作り直すか、大きいサイズの用途を諦めるかの判断が要ります。