ZeroTool Workbench

Favicon ジェネレーター

絵文字・テキスト・画像・SVGから完全なファビコンセットを生成。ICO・複数サイズPNG・apple-touch-icon・webmanifest対応。完全ブラウザ完結、アップロード不要。

100% クライアントサイド データはブラウザ外に出ません 無料 · 登録不要
Background
Shape
Live preview 16 / 32 / 64 / 180 px
16 px
32 px
64 px
180 px

関連ツール

SVG → PNG 変換器 SVGをオンラインでPNGに変換。ファイルアップロードまたはコード貼り付け、サイズ・背景指定対応。完全ブラウザ完結。 WebP 変換器 PNG/JPG/GIFをWebPに、またはWebPをPNGに変換。バッチ変換・品質調整・サイズ比較対応。完全ブラウザ完結。 画像 Base64 変換器 画像をBase64文字列とData URIに変換。PNG・JPEG・GIF等対応。 EXIF メタデータビューアー JPEG 写真の EXIF メタデータをオンラインで確認・削除 — GPS、カメラ情報、タイムスタンプを一括除去。完全ブラウザ完結、アップロード不要。 JSON フォーマッター ブラウザ上でJSONを即座に整形・圧縮・検証。 Base64 エンコード / デコード テキストをBase64にエンコード、またはBase64をテキストにデコード。

なぜ今もマルチファイルのファビコンセットが必要か

ファビコンはタブのアイコンだけではありません。検索結果のドメイン横、ブラウザのブックマーク、iOS ユーザーが「ホーム画面に追加」したときのアイコン、Android の PWA インストールカードまで、登場場面ごとに必要なサイズが異なり、フォーマットも微妙に違います。favicon.ico 一枚だけ置いて済ませると、Retina ディスプレイやインストール可能 PWA で目に見える粗が残ります。

このツールはモダンなセットを一括生成します — レガシー互換のための ICO、現代の <link rel=“icon”> スタックに合わせた複数サイズ PNG、iOS 向けの apple-touch-icon、そして maskable な Android アイコンを宣言する webmanifest です。

使い方

  1. 素材を選びます。4 つのタブはそれぞれ、絵文字（プリセットまたは貼り付け）、1〜4 文字のテキスト、アップロードした PNG/JPG/SVG（10 MB まで）、貼り付けた SVG マークアップを受け付けます。
  2. 背景と形状を設定します。透過はマスク前提のデザイン向け、塗りつぶし色はブランドマーク向け。形状は正方形・角丸（12.5% 半径）・円形の 3 種。Padding スライダーが内容物をセーフエリアの内側に収めます。
  3. ライブプレビューを確認します。重要な 4 サイズ（16・32・64・180 px）が同期描画されます。16 と 32 px はタブバーでの可読性、180 px は iOS のホーム画面アイコンを示します。
  4. Generate package をクリックします。ブラウザが約 1 秒で 11 ファイルを生成。Download ZIP で保存、Copy HTML snippet で <head> に貼る <link> タグをコピーできます。

HTML スニペットの中身

生成されるスニペットは約 7 行で、現代のあらゆる場面をカバーします：

  • <link rel=“icon” type=“image/x-icon” href=“/favicon.ico”> — 古いブラウザや favicon.ico を優先するブックマーク向けのフォールバック。
  • <link rel=“icon” type=“image/png” sizes=”…”> 16/32/48 — モダンブラウザは sizes が一致する PNG を優先選択し、ICO をスキップします。
  • <link rel=“apple-touch-icon”> 180×180 — iOS Safari が「ホーム画面に追加」時に使用。
  • <link rel=“manifest”> — Android Chrome と PWA インストーラーが site.webmanifest を読み、その中で purpose: “any maskable” として 192/512 PNG を宣言します。
  • <meta name=“theme-color”> — モバイルのアドレスバーと、インストール済み PWA のタイトルバーの色を制御します。

パッケージの作り方

レンダラーはターゲットサイズごとに新しい canvas を作り、選択した背景と形状マスクを適用し、padding 分だけ内側に素材を中央配置で描画します。続いて canvas.toBlob(‘image/png’) でコンパクトな PNG データを取得します。16/32/48 の 3 つの PNG は PNG 圧縮エントリ形式で 1 つの favicon.ico に統合します — ICONDIR ヘッダと 16 バイトの ICONDIRENTRY 3 件の後ろに 3 つの PNG ペイロードを連結する形です。

ZIP ライターは STORED 方式（DEFLATE しない）です：PNG はすでに圧縮済みで再 DEFLATE のメリットは 1% 未満、コードは 5 KB 増えます。ファイル名は General Purpose Bit Field の bit 11 で UTF-8 を宣言するため、将来名前を変更しても非 ASCII 名が壊れません。

プライバシーとオフライン

  • ファイルはアップロードされません。ブラウザのネットワークパネルで Generate をクリックしてみてください。リクエストは一切発生しません。
  • ページをキャッシュ後はオフラインでも動作します。Canvas API・ZIP・ICO ライターはすべてページバンドル内です。
  • トラッキングピクセルなし。利用統計のため generate と download のイベントを 1 件ずつ記録しますが、ペイロードはツール名のみです。

つまずきやすい点

  • 外部画像参照のある SVG。 SVG が <image href=“https://…”> を含むと、ブラウザは canvas を blob として読み戻すのを拒否します（クロスオリジン汚染）。貼り付け前に外部画像を Data URI にインライン化してください。
  • 企業管理 Linux で絵文字が空枠になる。 一部の IT 管理 Linux ディストロにはカラー絵文字フォントが入っていません。プレビューが空枠になる場合は Text または Image タブに切り替えてください。
  • 16 px で細部が消える。 1.5 px 未満の線は 16×16 で消失します。32 で鮮明だが 16 で消えるなら、デザインを単純化するか、背景色でコントラストを補ってください。

FAQ

パッケージの中身は何ですか？

11 ファイル構成です：favicon.ico（16・32・48 のマルチサイズ、PNG 圧縮）、独立した 6 つの PNG（16・32・48・64・96・128）、180×180 の apple-touch-icon.png、192 と 512 の android-chrome PNG、そして site.webmanifest。サイトルートに置き、HTML スニペットを <head> に貼り付ければ、ブラウザ・iOS・Android・PWA インストールまで全カバーできます。

ファイルはサーバーにアップロードされますか？

されません。すべてブラウザ上で Canvas API を通じて処理されます——画像デコード、複数サイズのリサンプリング、ICO と ZIP のパッケージング、すべて JavaScript がローカルで実行します。DevTools の Network パネルを開いて Generate をクリックしてみてください。アップロードリクエストは一件もありません。

Windows と macOS で絵文字が異なって見えるのはなぜですか？

OS ごとに同梱のカラー絵文字フォントが違うためです（macOS は Apple Color Emoji、Windows は Segoe UI Emoji、Linux/Android は Noto Color Emoji）。ジェネレーターは実行マシンのシステムフォントを使います。プラットフォーム横断でピクセル単位に揃えたい場合は Image または SVG タブで自前のビットマップやベクターを供給してください。

ICO は PNG エントリですか？BMP エントリですか？

PNG 圧縮エントリです。各 ICO フレームは自己完結する PNG で、IE 11 以降の全ブラウザと Windows Vista 以降の Explorer がサポートします。ファイルサイズが小さく、アルファ透過を維持でき、レガシーな DIB/BMP エンコードを避けられます。DIB フレームしか読めない古いシステムは設計上対象外です。

Maskable な PWA アイコンを生成できますか？

はい。192 と 512 の PNG はマニフェストで `purpose: "any maskable"` として登録されるので、標準描画と maskable 描画の両方を一組のファイルでカバーします。Padding スライダーでセーフゾーン内に主体を収めてください。Circle 形状を選ぶ場合は 10% 以上の余白を推奨します（Android の maskable 円形マスクで切り取られる範囲です）。