ファイル

ファビコン生成ツール

1 枚の画像から、favicon.ico・各サイズの PNG アイコン・Apple Touch アイコン・Android Chrome アイコン・Web App マニフェストまで、完全なファビコン一式をブラウザー内で生成します。背景・余白・角丸を調整し、そのまま貼り付けられる HTML もコピーできます。

  • favicon.ico と 16・32・48・180・192・512 ピクセルの PNG アイコンを一括生成
  • PNG・JPG・WebP・SVG・GIF に対応し、実際のファビコンサイズでプレビュー
  • 背景色・余白・角丸を設定し、リアルタイムでプレビュー
  • アプリ名・短縮名・テーマカラーを含む site.webmanifest を生成
  • HTML の <link> をコピー、または全ファイルを ZIP で一括ダウンロード
ツール/ファビコン生成ツール

画像をここにドロップ、またはクリックして選択

512×512 以上の正方形画像を使うと、もっとも鮮明なアイコンになります。

PNG・JPG・WebP・SVG・GIF に対応しています。

0%
0%

これらは site.webmanifest に書き込まれるだけで、サイトをアプリ（PWA）としてインストールしたときに使われます。アイコン画像自体は変わりません。

0 個のファイル
画像をアップロードするとアイコン一式を生成します。プレビューとファイルがここに表示されます。
コマンド

概要

1 枚の元画像から、モダンなサイトに求められるすべてのアイコンと、それらをつなぐマークアップまで。

  1. 01

    ブラウザーが求める全サイズ

    16 ピクセル（タブとブックマーク）、32 ピクセル（高 DPI タブと Windows タスクバー）、48 ピクセル（Windows サイトアイコン）、180 ピクセル（iOS ホーム画面）、192 / 512 ピクセル（Android と PWA インストール）を生成します。

  2. 02

    マルチフレーム favicon.ico

    ブラウザーは既定で /favicon.ico を要求します。生成される .ico は 16・32・48 ピクセルの 3 フレームを内包し、1 枚のビットマップを拡大せず最適なフレームを選ばせます。

  3. 03

    背景・余白・角丸

    透明のまま、あるいは単色で塗りつぶし、Android / iOS のマスク内で図形に余白を持たせ、角を丸められます。変更はすべてのサイズに即座に反映されます。

  4. 04

    インストール可能なマニフェスト

    name・short_name・theme_color と、Chrome や Android が「ホーム画面に追加」のインストール表示やスプラッシュで使う 192 / 512 ピクセルのアイコン項目を含む、正しい site.webmanifest を出力します。

  5. 05

    ファイル名に一致するタグ

    生成済みの <link rel="icon">・apple-touch-icon・manifest タグを出力。ファイル名は揃っているので貼るだけです。

  6. 06

    完全ローカル、アップロードなし

    デコード・リサイズ・.ico の組み立ては Canvas API でブラウザー内完結。ロゴやブランド素材がサーバーに渡ることはありません。

使い方

生のロゴから、つなぎ込み済みのアイコンまで 5 ステップ。

  1. 01

    正方形の元画像をアップロードします。512×512 以上のロゴやマークなら小サイズも鮮明に保てます。

  2. 02

    透明か単色背景を選びます。iOS は透明部分を黒で塗るため、Apple のホーム画面が対象なら単色を選びます。

  3. 03

    少し余白を加え（適応マスクに切られないように）、固定の形状が欲しければ角丸を設定します。

  4. 04

    名称・短縮名・テーマカラーを設定します。右側の site.webmanifest プレビューが入力に応じて更新されます。

  5. 05

    ZIP をダウンロードし、サイトのルートに置き、各ページの <head> に HTML スニペットを貼り付けます。

詳細

各プラットフォームが実際にアイコンを読み込む方法に合わせた、完全なひとそろい。

  • タブ・ブックマーク・Windows タスクバー向けに 16 / 32 / 48 ピクセルのフレームを内包した favicon.ico
  • モダンな <link rel="icon"> 宣言向けの 16・32・48 ピクセル単体 PNG
  • iOS / iPadOS ホーム画面向けの 180 ピクセル apple-touch-icon.png
  • インストールとスプラッシュ向けにマニフェストが参照する 192・512 ピクセルの android-chrome アイコン
  • name・short_name・theme_color・background_color・アイコン項目を含む site.webmanifest
  • 透明または単色背景、余白と角丸を調整し、すべてのサイズに適用
  • PNG・JPG・WebP・SVG・GIF の入力に対応——SVG は各サイズで鮮明にラスタライズ
  • ワンクリック ZIP に加え、コピーしてすぐ使える HTML とリアルタイムのマニフェストプレビュー

活用シーン

タブバーやホーム画面で「仕上がって見える」必要があるあらゆる場面に。

  1. 新サイトの公開

    ビルドツールが残した 16 ピクセル 1 枚を、Retina タブやピン留めタイルでも鮮明な完全セットに置き換えます。

  2. サイトをインストール可能に

    PWA に必要な 192 / 512 ピクセルのアイコンとマニフェストを用意し、Chrome のインストール表示や Android の正しいホーム画面アイコンとスプラッシュを実現します。

  3. 一括リブランド

    新しいロゴを入れて全アイコンを数秒で再生成。サイズごとに手作業で探し回る必要はありません。

  4. 社内ツール・ダッシュボード

    管理画面や個人プロジェクトに識別しやすいタブアイコンを付け、20 個並んだタブの中で埋もれないようにします。

  5. フレームワーク案件

    public/（Astro・Vite・SvelteKit）や app/（Next.js）に、既定アイコンではなく完全セットを入れます。

  6. 開発者への引き渡し

    ZIP 1 つと正確な <head> マークアップを渡せば、ファイル名やサイズを推測せず誰でも組み込めます。

関連情報

元画像の形式をそろえたい場合は、まず 画像コンバーター で整った PNG に変換します。大きすぎるロゴをアイコン生成前に縮小したいときは 画像圧縮 を使えば、小サイズが頼る細部を損なわずに元画像を軽くできます。

使い方のヒント

16 ピクセルでは隠れる余地がありません。次の習慣でどこでも読めるアイコンに。

  • 正方形の高解像度の元画像（512×512 以上）から始めます。ツールは細部を縮小できても、生み出すことはできません。
  • マークを簡素に。タグラインや髪の毛のような細線は 32 ピクセル未満でつぶれます。
  • Apple のホーム画面には単色背景を。iOS は透明を黒に置き換え、角丸も自動ではしません。
  • 約 10〜15% の余白を残し、Android の適応マスク（円・squircle・角丸四角）がロゴを切らないようにします。
  • theme_color をブランドに、background_color をアイコンに合わせると、PWA のスプラッシュが意図的な仕上がりになります。
  • 実際のタブ、ピン留めタブ、スマホの「ホーム画面に追加」で確認してから完了とします。

制限事項

リサイズとパッケージ化はツールが担います。残りは元画像とプラットフォーム次第です。

  • 小さな元画像の拡大はピクセルを増やすだけで細部は増えず、小アイコンはぼやけたままです。
  • アニメーション GIF は最初の静止フレームに統合されます。
  • SVG はサイズごとにラスタライズされ、フィルターや外部フォントなどの効果はエディターと異なって見える場合があります。
  • 角丸は PNG に焼き込まれるため、独自マスクを適用するプラットフォームでは二重に丸まります。OS が形を整える場合は角丸を 0 にしてください。
  • マニフェストは日常的な項目をカバーします。maskable アイコン・スクリーンショット・ショートカットなど高度な PWA 設定は手動で追加します。
  • ブラウザーはファビコンを強くキャッシュします。更新を見るにはハードリフレッシュやバージョンクエリが必要なことがあります。

よくある質問

形式・サイズ・マニフェスト・設置、そして定番のキャッシュの落とし穴について。

どんなファイルが生成されますか？

favicon.ico（16/32/48 ピクセルのフレーム）、16・32・48・180・192・512 ピクセルの PNG アイコン、site.webmanifest です。コピーしてすぐ使える HTML スニペットとリアルタイムのマニフェストプレビューも付きます。

元画像はどのくらいのサイズが必要ですか？

最低 512×512 の正方形です。大きい正方形ならすべてのサイズへきれいに縮小できます。512 未満だと、Android や PWA が大きなアイコンを要求した時点でぼやけます。

SVG は使えますか？

はい——SVG・PNG・JPG・WebP・GIF に対応。SVG は各サイズで鮮明な PNG にラスタライズされ、無損失で拡大できるためアイコン元として最適です。

背景は透明と単色どちらがよいですか？

ブラウザータブなら透明で問題ありません。ただし iOS はホーム画面で透明を黒に塗るため、apple-touch-icon が対象なら単色背景を選びます。

画像はどこかにアップロードされますか？

いいえ。デコード・リサイズ・.ico の組み立てはすべて Canvas API でブラウザー内完結し、画像が端末から出ることはありません。

ファイルはどこに置けばよいですか？

サイトのルート——index.html と同じ階層（多くのフレームワークでは public/）です。その後 HTML スニペットを各ページの <head> に貼り付けます。

favicon.ico はまだ必要ですか？

必要です。ブラウザーは /favicon.ico を自動要求し、Windows もタスクバーやピン留めタイルで依存します。スニペットでは PNG アイコンと併せて参照し、網羅します。

アイコンを更新したのに古いものが表示されます？

ファビコンは強くキャッシュされます。ハードリフレッシュ（Ctrl/Cmd+Shift+R）、タブの開き直し、または favicon.ico?v=2 のようなバージョンクエリで新しいファイルを取得させてください。

関連ツール

画像変換・圧縮と組み合わせて、アイコン用のきれいな元素材を準備しましょう。