Favicon一式を一括生成する無料ツール

1枚のロゴ画像から favicon.ico / 各サイズPNG / Apple Touch Icon / webmanifest までを一括生成。ZIPでダウンロードできます。すべての処理はブラウザ内で完結します。

ロゴ画像をここにドロップ

またはクリックして選択(PNG / JPG / WebP / SVG)

推奨: 512×512px以上の正方形画像

Favicon一式生成とは

Faviconはブラウザのタブ・ブックマーク・ホーム画面・PWAインストール時など、サイトの「顔」として様々な場所で表示される小さなアイコンです。かつては16×16のfavicon.ico一つで済みましたが、現代のWebでは Retina ディスプレイ・Android ホーム画面・iOS Safari の Touch Icon・Windows のタイル・PWA など、デバイスとコンテキストごとに異なる解像度のアイコンが必要になりました。FreeToolのFavicon一式生成は、1枚のロゴ画像をアップロードするだけで、favicon.ico(16/32/48マルチ解像度)・各サイズPNG(16/32/48/96/192/512)・Apple Touch Icon(180×180)・site.webmanifest までを一括で書き出し、ZIPでまとめてダウンロードできます。すべての処理はブラウザ内で完結します。

なぜブラウザ完結が安全なのか

ロゴ画像は企業・サービスのブランド資産であり、リリース前のロゴをオンラインサービスにアップロードすることに抵抗を感じる開発者・デザイナーは少なくありません。FreeToolはCanvas APIを用いて完全にブラウザ内で画像を変換するため、ロゴ画像が外部サーバーに送信されることはありません。さらに、競合のfavicon生成サービスの多くは広告を含み、生成結果のダウンロードページで様々なトラッキングが行われますが、FreeToolはシンプルで広告挿入もありません。

他のツールとの違い

favicon.io や realfavicongenerator.net といった代表的なfavicon生成サービスは、いずれもブラウザ完結あるいはサーバー処理で動作しますが、メール登録・広告表示・生成結果のリンク追跡など、用途によっては気になる挙動を含むものがあります。FreeToolのFavicon一式生成は、登録不要・広告なし・サーバー送信なしで、ロゴをアップロードした瞬間からZIPダウンロードまでが数秒で完結します。出力ファイル名・<head>スニペットは標準的な命名規約に沿っているため、既存のサイトテンプレートにもそのまま組み込めます。

業種・職種別の活用シーン

個人開発者・インディハッカーのサイト立ち上げ

サービスを新規ローンチする際、ロゴをFigmaやCanvaで作ったあとはfaviconの一式整備が必要です。手作業で16px〜512pxを書き出すと10ファイル近くになりますが、本ツールならロゴPNGをドロップしてZIPをダウンロードするだけで完結します。READMEの<head>スニペットをコピペすれば、Next.js / Astro / 静的サイトのいずれでもすぐに反映できます。

中小企業・スタートアップのWebサイト立ち上げ

コーポレートサイトの初期構築でファビコンをまとめて整備する必要がある場合に、デザイン会社に都度依頼することなく社内でロゴからfavicon一式を生成できます。site.webmanifestのテーマカラーをコーポレートカラーに揃えればPWAインストール時の見栄えも整います。ロゴが外部に送信されないためリリース前の機密ブランディングでも安心です。

マルチサイトオーナーの運用効率化

ブログ・メディア・LP・採用サイトなど複数サイトを並行運用しているオーナーは、サイトごとにfavicon一式を整備する必要があります。本ツールならロゴ画像を差し替えてZIPを出すだけなので、サイト数が増えても運用負担が増えません。生成物のファイル名はすべて標準命名のため、各サイトの /public/ に置き換えるだけで反映できます。

こんな場面で使えます

  • 個人ブログやポートフォリオサイトのファビコンを一括生成
  • 自社サイトのリブランディングで全ファビコンを差し替え
  • PWA対応のためのアイコンセット(192/512)とmanifestをまとめて準備
  • 複数サイトを運用するエンジニアのアイコン管理を統一
  • 1枚のロゴ画像からfavicon.icoとapple-touch-iconを同時に作成

トラブルシューティング

元画像が小さくて512pxのアイコンがぼやける

元画像が128px未満の場合、特に192/512pxの拡大書き出しでにじみが生じます。ロゴはベクター(SVG / AI / Figma)から512×512px以上のPNGに書き出してアップロードしてください。SVGを直接アップロードすると、ブラウザが任意の解像度でラスタライズします。

透過が反映されず白い背景になる

生成オプションの「背景」が「単色」になっていないか確認してください。「透過」を選ぶとアルファチャンネルが維持されたPNGが出力されます。なお favicon.ico はPNGエンコード形式で生成しているため、ICO内のアイコンも透過を保持します。

サイトに配置したのにfaviconが反映されない

ブラウザのキャッシュが原因のことが多いです。シークレットウィンドウで開くか、URLに ?v=2 を付けて読み込み直してください。また、apple-touch-iconはiOSデバイスで強くキャッシュされるため、ホーム画面から一度削除して再追加が必要なことがあります。

古いブラウザでICOが表示されない

本ツールが生成する favicon.ico はPNGエンコード形式(モダンICO)です。Internet Explorer 6 など極めて古い環境はBMP形式のICOしか読めないため、その場合はBMP形式のICOを別途用意してください。Edge / Chrome / Firefox / Safari 等の現代ブラウザはすべてPNGエンコードICOに対応しています。

PWA インストール時にアイコンが粗く見える

Android Chrome の PWA インストールでは 192×192 / 512×512 のいずれも参照されます。site.webmanifest の icons エントリが正しく解決されているか(パスが /favicon-192x192.png 等になっているか)DevTools の Application → Manifest で確認してください。

機能比較:FreeTool Favicon一式生成 vs favicon.io / realfavicongenerator.net

機能FreeToolfavicon.io / realfavicongenerator.net
価格○ 完全無料○ 無料
ファイルのサーバー送信なし(ブラウザ完結)△ サービスにより異なる
登録不要○ 不要○ 不要
広告表示なし△ 一部広告を含む
favicon.ico マルチ解像度 (16/32/48)○ 対応○ 対応
site.webmanifest 自動生成○ 対応○ 対応
Apple Touch Icon (180x180)○ 対応○ 対応

関連ツール

よくある質問

推奨サイズはどのくらいですか?
512×512px以上の正方形PNG画像を推奨します。最大512×512pxのアイコンまで生成するため、元画像が小さいと大きいサイズで画質が低下します。SVGなどベクター素材を元にしている場合は、十分大きいサイズでPNGに書き出してからアップロードしてください。元が正方形でない場合は中央クロップして生成します。
透過PNGには対応していますか?
はい。透過PNGをアップロードすると、透過部分を保ったまま各サイズのfaviconを生成します。背景設定で「単色」を選ぶと、透過部分を指定色で塗りつぶした上で書き出すこともできます。
favicon.icoファイルは本当に必要ですか?
現代のブラウザはほぼPNGのfaviconに対応しているため必須ではありませんが、古いブラウザや一部のクローラ、Windowsのショートカット、メールクライアント等はいまだに /favicon.ico を直接参照します。互換性のために生成・配置しておくことを推奨します。本ツールでは16×16・32×32・48×48を内包したマルチ解像度ICOを生成します。
Apple Touch Iconとは何ですか?
iPhone・iPadのSafariで「ホーム画面に追加」したときに使われるアイコンです。180×180pxのPNGが標準で、apple-touch-icon.png / apple-touch-icon-precomposed.png という名前で配置し、<link rel="apple-touch-icon"> で参照します。本ツールでは両方を同じ画像で書き出します。
PWA向けのwebmanifestも生成されますか?
はい。site.webmanifest(Web App Manifest)を自動生成し、192×192・512×512のアイコン参照、サイト名、テーマカラー、display: standalone を含めます。ZIP内のREADME.txtの<head>スニペットを貼り付けるだけでPWAのインストール要件(アイコン部分)を満たせます。