ファビコンジェネレーターとは？

このファビコンジェネレーターは、アップロードした画像、入力したイニシャル、または絵文字から、ウェブサイトに必要なすべてのファビコンサイズを作成します。素材を選ぶと、16×16・32×32・48×48 サイズの ICO ファイル、無段階に拡大できる SVG、さらに Apple Touch アイコンや Android ホーム画面用の PNG 版が手に入り、すぐにプロジェクトへ組み込めます。

画像から始めても、フォントと形を選んで 1〜3 文字を入力しても、絵文字を選んでも構いません。本ツールは PNG を 6 種類(16・32・48・180・192・512 px)、くっきりした SVG、そして Windows のタブが今も要求する小サイズ 3 種類をまとめたマルチ解像度 ICO を書き出します。すべて ZIP にまとめ、site.webmanifest と head にそのまま貼れる link タグも同梱します。素材は正方形の SVG か PNG が最もきれいにスケールします。

使い方

1. 素材を選びます。正方形の画像（PNG・JPG・SVG、できれば 512×512 以上）をアップロードするか、フォントと形を選んでイニシャルを入力するか、絵文字を選びます。
2. すべての標準サイズ（16px、32px、48px、180px、192px、512px）で生成されたファビコンをプレビューします。
3. ICOファイル、すべてのPNGサイズ、ページheadに貼り付けるHTMLリンクタグを含む完全なファビコンパッケージをZIPファイルとしてダウンロードします。

使用するタイミング

• 新しいサイトや Web アプリにブラウザタブとホーム画面のアイコンを追加するとき。
• ロゴリデザイン後に、既存サイトのブランドアイコン一式を一斉に差し替えるとき。
• ホーム画面に追加する PWA 向けに、manifest の仕様に沿ったアイコンを用意するとき。

結果

開発者がスタートアップの1024×1024ロゴをアップロードします。ツールはfavicon.ico（16/32/48）、apple-touch-icon.png（180×180）、Androidアイコン（192/512）を含む完全なファビコンセット、さらにHTMLメタタグを生成します。

よくある質問

なぜこんなに多くの favicon サイズが必要なの?

プラットフォームごとに要求サイズが違うからです。Chrome のタブは 32 px、ブックマークは 16、iOS のホーム画面は 180、Android のホーム画面は 192、PWA のスプラッシュは 512。すべて用意しておくと、どこに表示されてもくっきり保てます。

アップロードは PNG・SVG・JPG のどれがいい?

SVG が最良です。どのサイズにも無劣化でスケールします。次点が 512×512 の PNG。JPG でも一応動きますが、非可逆圧縮でエッジに薄いハロが出ることがあり、特に 16 や 32 px では目立ちます。

ICO ファイルの中身は何?

ICO はコンテナ形式で、本ツールが作るものはビットマップを 3 層(16・32・48 px)含んでいます。タスクバー・ファイル一覧・ブラウザタブなど、表示場所に応じて Windows が自動的に最適なレイヤを選びます。

ファイル群はプロジェクトのどこに置けばいい?

サイトの public ルートに、index.html と同じ階層へ展開してください。同梱の link タグはルートパス(/favicon.ico、/apple-touch-icon.png)を使うため、素の HTML や Next.js、Astro、Vite ではそれ以上の設定は不要です。

favicon を更新したのにブラウザに古いのが残るのはなぜ?

ブラウザは favicon を非常に積極的にキャッシュします。ハードリフレッシュ(Windows は Ctrl+Shift+R、Mac は Cmd+Shift+R)するか、link タグにクエリ文字列(例: /favicon.ico?v=2)を付けて強制取得してください。通常 1 日以内に勝手にキャッシュが切れます。

関連ツール