Favicon ジェネレーター
絵文字・テキスト・画像・SVGから完全なファビコンセットを生成。ICO・複数サイズPNG・apple-touch-icon・webmanifest対応。ブラウザ内で処理、アップロード不要。
- ブラウザ内で処理
- データはブラウザ外に出ません
- 無料 · 登録不要
WeChat でスキャンしてシェア
例・詳しい説明・よくある質問 実際の出力つきの例、ほかのツールとの違い、よくある質問。
なぜ今もマルチファイルのファビコンセットが必要か
ファビコンはタブのアイコンだけではありません。検索結果のドメイン横、ブラウザのブックマーク、iOS ユーザーが「ホーム画面に追加」したときのアイコン、Android の PWA インストールカードまで、登場場面ごとに必要なサイズが異なり、フォーマットも微妙に違います。favicon.ico 一枚だけ置いて済ませると、Retina ディスプレイやインストール可能 PWA で目に見える粗が残ります。
このツールはモダンなセットを一括生成します — レガシー互換のための ICO、現代の <link rel=“icon”> スタックに合わせた複数サイズ PNG、iOS 向けの apple-touch-icon、そしてサイト名・start_url・display・192 と 512 のアイコンを書いた webmanifest です。Chrome がサイトのインストールを案内する前に確認する項目です。
HTML スニペットの中身
生成されるスニペットは約 7 行で、現代のあらゆる場面をカバーします：
<link rel=“icon” type=“image/x-icon” href=“/favicon.ico”>— 古いブラウザや favicon.ico を優先するブックマーク向けのフォールバック。<link rel=“icon” type=“image/png” sizes=”…”>16/32/48 — どれを使うかは HTML Standard 上ブラウザ任せです。2026-10-02 の実測では、Retina 画面の Chromium 152 は ICO の link があるとfavicon.icoだけを、PNG の link だけならfavicon-32.pngを取得しました。<link rel=“apple-touch-icon”>180×180 — iOS Safari が「ホーム画面に追加」時に使用。<link rel=“manifest”>— Android Chrome と PWA インストーラーが site.webmanifest を読み、その中には「サイト名」欄の名前、“start_url”: ”/”、“display”: “standalone”と、purpose: “any”の 192/512 PNG が入ります。「サイト名」が空欄のときはnameとshort_nameを書かず、Chrome はインストールを案内しません。<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 ライターはすべてページバンドル内です。
- 記録するのは利用回数のみ。他のツールページと同じく、このページは Google Analytics を読み込みます。ツールは 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"` として宣言し、パッケージにマスカブルアイコンは含まれません。web.dev は 1 つのファイルを `"any maskable"` と宣言することを勧めていないためです（マスク用の余白を取ったアイコンはそのまま表示すると小さく見えます）。マスカブルアイコンが必要なら、Padding スライダーでロゴを中央の円（半径は幅の 40%）に収めた 512 px の PNG をもう 1 枚作り、`purpose: "maskable"` でマニフェストに追加してください。