favicon生成ツール｜PNG複数サイズ・Apple Touch Icon・HTMLスニペット付き
PNG/JPEG/WebP画像からfaviconを一括生成。16〜512pxの6サイズ・Apple Touch Icon・PWA用manifestをZIPでダウンロード。サーバー送信なし・無料。
クリックまたはドラッグ＆ドロップで画像を選択
PNG・JPEG・WebP ／ 5MB以内
詳細設定
webmanifest の name フィールドに使用します
このツールについて
使い方・特徴・補足情報
favicon生成ツールとは
favicon生成ツールは、手持ちの画像（PNG・JPEG・WebP）から favicon を一括生成するツールです。
タブに出る小さなアイコンは、サイトのブランドを示す要素です。16×16 から 512×512 まで複数サイズが要り、手作業だと手間がかかります。
処理は Canvas API ですべてブラウザ内に完結し、画像を外部へ送りません。会社ロゴや未公開デザインも手元で扱えます。
生成したファイルは ZIP でまとめて取得でき、設置用の HTML スニペットもコピーできます。
👤 こんな人におすすめ✨
Webサイトを作る人
✅ 楽になること
画像からfaviconを一括生成
✍️ 避けたい手間
サイズ漏れや設置コードのミス
解決できる困りごと
- 16px〜512px の必要サイズを毎回個別に書き出す作業を省ける
- PWA や Apple Touch Icon のサイズ漏れによる表示崩れを防ぎやすい
- 既存ロゴから一括生成できるので、ファイル名・配置の取り違えを減らせる
使い方
- 「ファイルを選択」ボタンをクリックするか、PNG・JPEG・WebP画像をドラッグ＆ドロップして読み込む
- プレビューで16×16・32×32の実寸表示を確認し、必要なら詳細設定でサイズや生成対象を調整する
- 「ZIPでダウンロード」をクリックして全サイズのPNGとwebmanifestを一括取得し、HTMLスニペットをコピーして
<head>に貼り付ける
使用例
ロゴPNG→全サイズ一括生成
正方形 512×512px のロゴ画像から、ブラウザ・PWA・Apple Touch Icon の全サイズをまとめて生成する例です。
入力
logo.png（512×512px の透過 PNG）をアップロード
出力
ZIPに favicon-16x16.png / favicon-32x32.png / apple-touch-icon-180x180.png / android-chrome-192x192.png / android-chrome-512x512.png / site.webmanifest を同梱
HTMLスニペットの取得
生成と同時に <head> に貼り付けるためのリンクタグをコピーする例です。手書きのスペルミスを防げます。
入力
ロゴをアップロード後、「HTMLスニペット」をコピー
出力
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
活用シーン
Webサイト公開前の準備
公開時に必須の favicon を、ロゴ画像1枚から用意できます。ブラウザ用の16・32pxから、Apple 用の180px、PWA 用の512pxまで一括生成できます。
スマホのホーム画面追加
ホーム画面に追加すると専用アイコンが出ます。Apple Touch Icon（180px）と Android 用（192px）があれば、ネイティブアプリ風の見栄えになります。
PWA開発
PWA には manifest とアイコンセットが要ります。本ツールは192・512pxのアイコンを manifest とともに出すため、追加設定なしに要件を満たせます。
既存サイトのリブランディング
ロゴ刷新時の favicon 差し替えに使えます。新しい画像を1枚ドロップして全サイズを再生成し、スニペットで <head> を上書きすれば完了します。
複数サービスの一括準備
複数サイトを運用していても、ロゴを次々アップロードして ZIP を取るだけです。ブラウザ内で完結するので、未公開サービスのロゴも安全に扱えます。
HTMLコーディング学習
favicon 設置は、実際のスニペットを見て手を動かすのが近道です。3種のリンクタグが含まれ、役割を見ながら使えます。
技術的な解説
補足: 仕組み
画像読み込みは createImageBitmap(file) を使い、Promise で非同期に扱えます。
リサイズは Canvas の drawImage で拡縮し、toDataURL で PNG を取り出します。サイズごとに独立した <canvas> を使い、干渉を防ぎます。
ZIP 化は fflate で各 PNG と manifest をまとめます。スニペットは rel を変えながらリンクタグを連結します。
もっと詳しく
16pxで潰れないロゴ作りのコツ
精緻なロゴをそのまま縮小すると、16×16px のタブでは細い線や小さな文字が潰れ、何のマークか分からなくなります。
元画像の時点で線を太く、要素を1〜2個に絞ると小サイズでも視認できます。本ツールは16・32pxを実寸でプレビューでき、書き出す前に潰れ具合を確認できます。
PNGだけで.icoが不要になった背景
かつて favicon は .ico が必須でしたが、現在の主要ブラウザは PNG をそのまま認識します。.ico は複数解像度を束ねる古い形式で、今は手間のわりに必須ではありません。
本ツールがサイズ別の PNG と manifest を出すのは、ブラウザ・PWA・iOS の要求を素直に満たすためです。端末がリンクタグから最適なサイズを選びます。
よくある質問
favicon.icoファイルは生成できますか？
現在は PNG 形式のみ対応しています。現代のブラウザは PNG の favicon を認識するため、favicon.ico がなくても正常に表示されます。
SVG画像をアップロードできますか？
現在対応しているのは PNG・JPEG・WebP の3形式です。SVG は Canvas との連携に制約があるためスコープ外で、あらかじめ PNG に変換してからアップロードしてください。
画像データはサーバーに送信されますか？
送信されません。処理はすべてブラウザ内で行い画像を外部へ転送しないため、未公開のロゴや社内デザインも手元で favicon にできます。
生成したfaviconをどこに置けばよいですか？
通常はサイトのルート（/）に置き、スニペットの href がルートパス前提のためそのまま使えます。サブディレクトリ運用なら、スニペットのパスを修正してください。
関連ツール
同じカテゴリの他のツールも合わせてどうぞ。