ファビコンパッケージ生成ツール
1 枚の画像を、PNG・Web マニフェスト・head 用 HTML スニペットを含むマルチプラットフォーム対応のファビコンパッケージにブラウザ内で変換します。
ファビコンパッケージ生成ツール — PNG・JPG・SVG・WebP 画像を 1 枚ドロップするだけで、ファビコンパッケージが一式そろいます：16・32・48・180（Apple touch）・192・512 px（Android/PWA）の正方形 PNG アイコンに加え、そのまま貼り付けられる site.webmanifest と、それらをすべて読み込む head セクション用の HTML スニペットが手に入ります。各サイズは高品質なキャンバススケーリングで生成され、個別にダウンロードでき、まとめて一括ダウンロードも可能です。すべてブラウザ内のローカルで処理され、画像がアップロードされることはありません。
ファビコンパッケージ生成ツールとは？
Favicon Package Generator は、1 枚のソース画像から、現代の Web サイトに必要なすべてのファビコンファイルを生成できる無料のブラウザベースツールです。HTML、WordPress、PWA、Apple デバイス向けに、すぐ使えるアイコン一式をソフトのインストールも会員登録もなしで手に入れたい Web 開発者、デザイナー、サイト運営者のために作られています。画像を 1 枚ドロップすると、16・32・48 px の標準ファビコン、180 px の Apple touch アイコン、192・512 px の Android/PWA アイコンをレンダリングし、対応する site.webmanifest と、link・meta タグをまとめた、head セクション用のコピー可能なスニペットを生成します。ロゴを、すべて自分のデバイス上ですぐにデプロイできるファビコンファイルにまとめたいときにいつでもご利用ください。
ファビコンパッケージ生成ツールの使い方
- PNG・JPG・SVG・WebP 画像をドロップゾーンにドラッグするか、クリックしてデバイスからファイルを選びます。
- ツールが 6 つの正方形サイズすべてを自動でレンダリングするのを待ちます。下にソース画像と生成された各アイコンのプレビューが表示されます。
- ソース画像または任意のアイコンのサムネイルをクリックすると、ズームライトボックスが開き、そのピクセルサイズでの見え方を確認できます。
- サイズ別のダウンロードボタンを押すと、アイコンを 1 つだけ保存できます。たとえば 32 px ファビコンや 512 px の PWA アイコンだけといった保存が可能です。
- site.webmanifest と <head> 用 HTML スニペットをコピーして、アイコンをサイトに組み込み、プロジェクトに貼り付けます。
- 「パッケージをダウンロード」をクリックすると、すべての PNG と site.webmanifest ファイルを一度に保存します。
使用例
ロゴからファビコンパッケージ一式へ
正方形の PNG ロゴをドロップすると、favicon-16x16.png、favicon-32x32.png、favicon-48x48.png、apple-touch-icon.png、android-chrome-192x192.png、android-chrome-512x512.png が返され、site.webmanifest とともに public フォルダに入れられます。
HTML の head に組み込む
生成された link・manifest タグの <head> スニペットをコピーし、ページの <head> タグの間に貼り付けると、ブラウザや PWA が場面ごとに適切なアイコンを選びます。
Apple と PWA のアイコンだけ取得
パッケージをレンダリングさせてから、一式すべてではなく 180 px の Apple touch アイコンと 192・512 px の Android/PWA アイコンだけを個別にダウンロードします。
よくある質問
- どのファイルが生成されますか？
- 6 つの正方形 PNG アイコン（16・32・48・180・192・512 px）、site.webmanifest マニフェスト、そしてそれらを読み込むコピー可能な <head> HTML スニペットを生成します。各 PNG は個別にも、1 つのパッケージとしてまとめてもダウンロードできます。
- アップロードできる画像形式は何ですか？
- PNG・JPG・SVG・WebP 画像を 1 枚、ドロップまたは参照して選べます。ツールはその 1 枚のソース画像を読み込み、そこからすべての出力サイズをレンダリングします。
- アイコンは PNG ですか、それとも ICO ファイルですか？
- 生成されるアイコンはすべて PNG です。このツールは、まとめた 1 つの ICO ファイルではなく、サイズごとに個別の正方形 PNG ファイルを生成します。これは現代のブラウザや PWA が想定する形式です。
- 正方形でない画像は引き伸ばされますか？
- いいえ。各サイズは元のアスペクト比を保ち、高品質な canvas スケーリングで正方形の中央に配置され、余ったスペースは透明な余白で埋められます。
- 画像はサーバーにアップロードされますか？
- いいえ。すべては Canvas API を使ってブラウザ内でローカルに処理されます。画像が外部にアップロードされることは一切なく、ご自身のデバイス上で完全にプライベートな状態が保たれます。
関連ツール
コードを画像に
コードスニペットを、ブラウザ内で構文ハイライト付きの美しい PNG 画像に変換します。アップロードは不要です。
カラーコントラストチェッカー
前景色と背景色の WCAG コントラスト比をチェックし、通常テキストと大きいテキストで AA と AAA に適合するかを確認します。
カラーミキサー
2 つの HEX 色を指定した比率で RGB または Lab 色空間で混ぜ、できあがった中間色を色見本とコピー可能な HEX 値で表示します。
カラーシェード生成ツール
1 つの基準 HEX 色を Tailwind 風の 50〜950 シェードスケールに変換し、各段階を色見本とコピー可能な HEX 値で表示します。