このツールについて
ファビコンは、ブラウザのタブやブックマークに表示されるウェブサイトの小さなアイコンです。このツールなら、よく使われるサイズをまとめて手軽に用意できます。
使い方
- PNG、JPG/JPEG、静止画の WebP を選択するか、ドラッグして追加します。
- 画像全体を収めるか中央を切り抜くかを選び、背景と各辺の余白（0～30%）を調整します。
- アイコンを生成し、16×16・32×32 の実寸表示と、ブラウザのタブを模したプレビューを確認します。
- 個別に、または ZIP でダウンロードし、生成したファイルに対応する HTML をコピーします。
対応サイズ
- favicon.ico には 16×16、32×32、48×48 の 3 枚の画像が入ります。
- favicon-16x16.png、favicon-32x32.png、favicon-48x48.png も同時に生成します。
アイコン作成のヒント
- 「全体を収める」は縦横比を保って画像全体を表示し、余った部分を選択した背景で埋めます。「中央を切り抜く」は中央の正方形を切り出します。どちらも画像を引き伸ばしません。
- 余白は出力サイズの各辺に対する割合です。10% の余白では、中央の画像部分の幅と高さがそれぞれ約 80% になります。
- 16×16 などの小さいサイズには、輪郭が単純でコントラストのはっきりした絵柄が適しています。複雑な写真や小さい文字は見分けにくくなるため、実寸プレビューをご確認ください。
PNG、JPG/JPEG、静止画の WebP に対応。1 ファイル 100 MiB まで、画像は 4,000 万ピクセルまで、1 辺 16,384 ピクセルまでです。大きな画像は処理時間とメモリを多く必要とする場合があります。
ファビコンの使い方
- ダウンロードしたアイコンをサイトに配置し、生成した HTML をページの head 部分に追加します。参照先はサイトのルートを想定しているため、別のフォルダーに置く場合はパスを変更してください。
- HTML には実際に生成したファイルだけが記載され、そのままコピーできます。Apple のホーム画面用や Android・PWA 用のサイズは、下の関連ツールで作成できます。
- タブのプレビューは、小さい表示領域でも絵柄を判別できるか確認するためのものです。実際の見た目はブラウザによって異なります。
プライバシー
画像、絵文字、生成したアイコンはお使いのブラウザ内だけで処理され、サーバーには送信されません。
入力内容や結果は自動保存されません。クリアしたりページを離れたりする前に必要なアイコンをダウンロードし、元の素材も保管してください。
よくある質問
favicon.ico とは何ですか？
ウェブサイトでよく使われるアイコンファイルです。複数サイズをまとめて保存でき、ブラウザがタブやブックマークなどに適したサイズを選んで表示します。
ファビコンはどのサイズを用意すればよいですか？
このツールでは一般的な 16×16、32×32、48×48 を用意できます。大きなサイズや別の組み合わせが必要な場合は「複数サイズのファビコン」をお使いください。
PNG のファビコンと ICO の違いは何ですか？
PNG は 1 ファイルにつき 1 つのサイズ、ICO は複数サイズを保存できます。ダウンロードには両方の形式が含まれるので、サイトに合わせて使えます。
ファビコンはどこに置けばよいですか？
生成する参照先は、/favicon.ico のようにサイトのルートを指定します。別のフォルダーに置く場合は、参照パスを実際の保存場所に合わせてください。
新しいアイコンがすぐ表示されないのはなぜですか？
ブラウザに古いファビコンのキャッシュが残っている場合があります。ファイルと参照パスを確認したうえで、ページの再読み込み、該当するキャッシュの削除、タブの開き直しをお試しください。