デザイン

ファビコンジェネレーター

PNG・JPG・SVG・WebP 画像をアップロードして、Web サイト用ファビコンを各サイズ（16×16〜512×512）で一括生成。ブラウザのみで完結し、サーバーに画像は送信されません。

[[ labels.upload_title ]]

[[ labels.upload_hint ]]

[[ labels.upload_formats ]]

[[ labels.drop_active ]]
preview
[[ imageFile?.name ]]

[[ labels.result_title ]]

[[ g.def.size ]]×[[ g.def.size ]]
[[ sizeLabel(g.def) ]]
[[ g.def.filename ]]

[[ labels.html_title ]]

[[ labels.html_desc ]]

[[ htmlSnippet ]]

Tips

  • アップロードした画像はサーバーに送信されません。すべての処理はブラウザ内で完結しています。
  • 推奨画像: 正方形の PNG（最低 512×512 px）を使うと、すべてのサイズで綺麗に縮小されます。透過（アルファチャンネル）にも対応しています。
  • SVG ファビコンは一部のモダンブラウザで直接 <link rel="icon" type="image/svg+xml"> として使えます。ただし iOS Safari は PNG 形式の Apple Touch Icon が必要です。
  • PWA（プログレッシブ Web アプリ）を作る場合は、manifest.json に 192×192 と 512×512 の PNG を登録してください。

よくある質問

このツールは PNG 形式で出力します。モダンブラウザ（Chrome・Firefox・Edge・Safari）はすべて PNG ファビコンに対応しているため、実用上 ICO 形式は不要です。IE11 以下のサポートが必要な場合のみ ICO 形式が必要になりますが、現在その要件が発生するケースは稀です。

最低限 32×32（ブラウザタブ）と 180×180（Apple Touch Icon / iOS ホーム画面）を用意することを推奨します。PWA を構築する場合は 192×192 と 512×512 も必要です。

現在のバージョンでは、画像を正方形のキャンバスにフィットするよう縦横比を維持して縮小します。ロゴや文字が含まれる場合は、あらかじめ正方形にトリミングした画像を使うことを推奨します。

余談ですが ― ファビコンの歴史 ― 16px の小さな革命

1999年、Internet Explorer 5 が初めてブラウザのお気に入り（ブックマーク）に小さなアイコンを表示する機能を実装しました。当初は favicon.ico というファイル名でサイトルートに置く慣習が生まれ、これが「favorite icon」を縮めた「favicon（ファビコン）」の語源です。

ICO 形式は Windows のアイコン形式を流用したもので、1 ファイルに複数サイズ（16×16・32×32・48×48）を内包できる特殊なフォーマットでした。しかし現代では PNG・SVG で代替でき、特に SVG ファビコン（image/svg+xml）は解像度非依存でダークモードにも対応できるとして注目されています。HTML 仕様上は <link rel="icon"> タグが正式対応したのは 2000年代中頃のことで、favicon.ico のルート配置は今でも後方互換のために慣習として残っています。

Apple は 2007 年に iPhone を発表した際、独自の Apple Touch Icon（apple-touch-icon.png）仕様を導入しました。iOS のホーム画面にショートカットを追加すると表示されるアイコンで、当初は 57×57px でしたが Retina ディスプレイの普及に伴い現在の 180×180px が標準となっています。PWA 普及に伴い 192×192・512×512 といった大サイズも必要となり、ファビコン管理の複雑さは年々増しています。

同じカテゴリーのツール