Favicon アセットジェネレーター

ICO、PNG、Apple touch アイコン、PWA アイコン、Web manifest、HTML スニペットを含む完全な favicon バンドルをブラウザー内でローカルに生成。

ソース画像
PNG、JPEG、WebP、SVG をドロップまたは選択してください。下で個別に上書きしない限り、すべてのプラットフォームでこの画像が使用されます。
サイト情報
manifest、apple-touch-icon、HTML スニペットで使用されます。

アプリ名が表示領域に対して長すぎる場合に表示されます。

任意。空欄の場合は manifest から省略されます。

インストール済み PWA を起動したときに開く URL。

HTML スニペット内のすべての href と、manifest の icons 配列内のすべての src に適用されるプレフィックス。

manifest の theme_color と、HTML の <meta name="theme-color"> タグを制御します。

manifest の background_color。PWA のスプラッシュ画面の描画にブラウザーが使用します。

デスクトップブラウザー favicon
favicon.ico、favicon-16x16.png、favicon-32x32.png、および（ソースが SVG の場合は）favicon.svg を制御します。

アイコン内のソース画像の周囲に設ける視覚的な余白。

デスクトップブラウザータブ
デスクトップブラウザータブ (dark)
検索エンジンの検索結果
iOS Web クリップ
iOS ホーム画面で使用される 180×180 の apple-touch-icon.png を制御します。

Apple のアイコンは不透明である必要があるため、この塗りつぶしは常に適用されます。

アイコン内のソース画像の周囲に設ける視覚的な余白。

iOS ホーム画面
PWA アイコン
pwa-192x192.png、pwa-512x512.png、および maskable バリアントを制御します。

アイコン内のソース画像の周囲に設ける視覚的な余白。

W3C が推奨するセーフエリアは 40% です。どのプラットフォームのマスクの内側でも、ソースコンテンツが表示され続けます。

Windows タスクバー
Android ランチャー
生成されたバンドル
「生成」をクリックすると、すべてのアセットをレンダリングし、zip を構築して、HTML スニペットをコピーできます。
まだバンドルはありません
画像を選択して「生成」をクリックすると、favicon バンドルが組み立てられます。

このツールで生成できるもの

このジェネレーターは、1 枚の画像から完全でモダンなファビコンバンドルを作成します — レガシーブラウザー向けのマルチサイズ .ico、16 / 32 / 180 / 192 / 512 の PNG バリエーション、任意のオリジナル .svg、PWA 用の site.webmanifest、 そして <head> に貼り付ける HTML スニペットまで。すべてのバイトはあなたの ブラウザー内で生成されます。アップロードもサーバーも分析も一切ありません。

バンドルに含まれるもの

  • favicon.ico — ブラウザータブ、ブックマーク、古い Windows ショートカット 向けのマルチイメージ (16 / 32 / 48)。
  • favicon-16x16.png と favicon-32x32.png — 現行ブラウザーで使われる モダンな PNG バリエーション。
  • favicon.svg — ソース画像が SVG で、「オリジナルの SVG を使用」スイッチが オンの場合にのみ含まれます。
  • apple-touch-icon.png — 180×180、不透明、iOS のホーム画面で使われます。
  • pwa-192x192.png と pwa-512x512.png — 標準的な PWA アイコン。
  • pwa-maskable-192x192.png と pwa-maskable-512x512.png — W3C 推奨の セーフエリアを持つマスカブルバリエーション。
  • site.webmanifest — 上記のアイコンに紐付けられた PWA マニフェスト。

パディング、背景、マスカブルセーフゾーンの仕組み

各プラットフォームには独自のパディング (「マージン」) があり、アイコン キャンバス内に余白を残せます。「背景を追加」スイッチはソースの背後に 不透明な四角を描画します — ソースが透過で、出力先が不透明性を要求する場合 (Apple のホーム画面) や、ブラウザータブで視覚的なコントラストが欲しい場合に 便利です。マスカブル PWA アイコンは、プラットフォームのマージンに加えて 追加のセーフゾーンを使用します。中央約 80% の外側にあるものは、Android、 Windows、ChromeOS が円形、角丸、スクワークルマスクを適用したときに切り取られる 可能性があります。

サイトへの組み込み方

  1. ダウンロードしたアーカイブを展開し、Web ルートに配置します (ファイルが /favicon.ico、/site.webmanifest などに置かれるように)。
  2. HTML スニペットをサイトの <head> に貼り付けます。
  3. アセットをサブパス (例: /static/icons/) から配信している場合は、 生成前に「アセットパス」を設定して、スニペットとマニフェストが正しい URL を使うようにします。
  4. このツールが公開していない範囲でマニフェストをカスタマイズした場合 (例: categories や screenshots を追加するなど)、site.webmanifest をテキストエディターで開いて直接編集してください — ただの JSON です。