utilrepo
日本語
❤️ 応援
ホーム画像

ICO / favicon 生成

任意の画像から複数サイズの .ico ファイルを生成（16/32/48/64/128/256 を PNG で埋め込み）。apple/android 用 PNG と manifest スニペットを含む favicon キットも作成可能。

Loading…

すべての処理はブラウザ内で実行されます — ファイルや入力はサーバへ送信されません。

使い方

正方形のソース画像(PNG・JPEG・WebP・ブラウザデコードによる SVG)をドロップします — 理想的には **512×512 以上**。本ツールは各 ICO サイズ(16・32・48・64・128・256 px)にダウンスケールし、各サイズを PNG としてエンコードし、Windows ICONDIR 形式の単一の `.ico` コンテナにパックします。個別サイズを ON/OFF 切り替えできます — ほとんどの現代ブラウザは 16 と 32 のみ(16 px の favicon と 32 px の高 DPI バリアント)をレンダリングするので、16/32 のみの ICO は通常 1〜3 KB、フル 6 サイズパックは 15〜40 KB です。ダウンロードはプロジェクトの `public/` または `static/` ディレクトリにそのまま配置できる単一の `favicon.ico` ファイルです。

完全な favicon セットアップには **favicon キット** オプションを有効にします: `.ico` に加えて、本ツールは `apple-touch-icon`(180 × 180 px)、Android Chrome(192 × 192 px と高 DPI ホームスクリーンバリアントの 512 × 512 px)用の PNG ファイルと、正しい名前・サイズ・MIME タイプが事前入力された `site.webmanifest` スニペットを生成します。すべてサイトルートに配置し、含まれるスニペットの標準的な `<link>` タグを HTML の `<head>` に追加してください — 現代のブラウザ、iOS Safari、Android Chrome のホームスクリーンインストールはすべて正しいアイコンを取得します。すべてブラウザ内で完結します。ソース画像はネットワークエンドポイントに到達しないので、未公開のブランドアセットでも安全に使えます。

例

最小限の現代的セットアップ — 16/32 のみ

入力
source:       logo-512.png (512 × 512, solid background)
sizes:        16 ✓, 32 ✓, 48, 64, 128, 256
favicon kit:  off
出力
favicon.ico — 2.1 KB
  contains: 16×16 PNG + 32×32 PNG
  total ICO entries: 2

HTML to add to <head>:
  <link rel="icon" href="/favicon.ico" sizes="any">

That's it. Modern Chrome / Firefox / Safari will pick this up,
and it'll show in the browser tab and bookmark list.

サイドプロジェクト、ブログ、社内ツールには **16/32 のみで十分** です。現代のブラウザは何年も前に ICO コンテナから大きなサイズを選ぶのをやめました — 48 / 64 / 128 / 256 サイズは Web アプリが自身をネイティブファイルハンドラとして登録していた頃(今日ほぼ使われない機能)の Windows ファイルエクスプローラのアイコンプレビュー用にのみ重要でした。単一の `<link rel="icon" href="/favicon.ico" sizes="any">` タグ + URL ルート(`/favicon.ico`、サブディレクトリ *ではなく*)の `favicon.ico` ファイルが、すべてのブラウザが今も自動検出するものです。`sizes="any"` 属性はブラウザに「この単一ファイルは必要な任意のサイズを持つ、ただ取得して」と伝え、一部のブラウザが発する稀な「favicon サイズ不一致」警告を抑制します。

フル favicon キット — iOS + Android + manifest

入力
source:        brand-logo-1024.png (1024 × 1024, transparent bg)
sizes:         16, 32 (in .ico)
favicon kit:   on
site name:     "Utilrepo"
出力
Generated files:
  favicon.ico                 (1.8 KB)
  apple-touch-icon.png        (180 × 180, 11 KB)
  android-chrome-192x192.png  (192 × 192, 13 KB)
  android-chrome-512x512.png  (512 × 512, 64 KB)
  site.webmanifest            (250 B)

HTML snippet for <head>:
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
  <link rel="manifest" href="/site.webmanifest">

本格的なプロダクト、マーケティングサイト、PWA には favicon キットが望ましいです。`apple-touch-icon.png` は iOS Safari がユーザーがサイトをホームスクリーンに追加したときに使うもので、これがないと iOS はページの一般的なスクリーンショットにフォールバックし、プロフェッショナルに見えません。192 / 512 の Android Chrome アイコンは `site.webmanifest` から参照され、ユーザーが PWA をインストールしたとき Chrome が読みます。マニフェストはアプリ名、テーマカラー、表示モード(`standalone` はフルスクリーン、`browser` はタブ付き)も宣言します — ダウンロード後に編集して追加メタデータを埋められます。より深い PWA サポートには別の「maskable」アイコン(Android の円形アイコンマスク内で綺麗にレンダリングするためのパディング追加)が望ましい場合がありますが、それは本ツールの範囲外です。

小さなロゴしかないとき — 64×64 ソース

入力
source:    legacy-logo.png (64 × 64, transparent bg, hand-drawn at this resolution)
sizes:     16 ✓, 32 ✓, 48, 64 ✓, 128, 256
warning:   "source is smaller than 256 — upscaling 128 / 256 not recommended"
出力
favicon.ico — 3.4 KB
  contains: 16×16, 32×32, 64×64 (skipped 128 / 256)

The 16 and 32 entries are downscaled — sharp.
The 64 entry is at native resolution — sharpest.
Larger sizes were not generated because upscaling produces blur.

ダウンスケールは良く見え、アップスケールは見えません。64 px ソース画像は 128 / 256 エントリを生成すべきではありません、アップスケールされた出力はくっきりとダウンスケールされた小さなサイズの隣でソフトでピクセル化されて見えるためです — ブラウザがどのサイズを選ぶかでアイコンが「一貫性なく」見えます。本ツールはソース解像度が要求された ICO サイズより低い場合に警告し、それらのエントリを既定でスキップします。修正はロゴをより高い解像度で再描画またはベクター化すること。Inkscape や Adobe Illustrator のようなトレーシングツールは小さなラスターロゴをアイコン用途には十分にベクター化できます。元のアートワークが本当に失われた場合は制限を受け入れて 16/32/64 のみの ICO を出荷します。

よくある質問

ICO ファイル形式とは何ですか、なぜまだ存在しますか？

**ICO** は 1985 年の Windows 1.0 で導入された Microsoft のコンテナ形式です。元の仕様はシステムアイコン(フォルダ、ドライブ、スタートメニュー)用に 16・32・48 px サイズの非圧縮 BMP スタイルビットマップを格納していました。Windows Vista(2007 年)で Microsoft は ≥ 256 px サイズに **PNG エンコードペイロード** を許可するよう形式を拡張し、高解像度アイコンのファイルサイズを劇的に削減しました。この形式は Web 時代も生き残りました、IE 5(1999 年)以来 **Internet Explorer はサイトルートに `/favicon.ico` を要求していた** ためです — Netscape は後に互換性を維持するために慣例を採用しました。それ以降のすべてのブラウザは HTML に `<link rel="icon">` タグがなくても `/favicon.ico` を自動リクエストし続けます、これがほとんどのサイトがフォールバックとして今も同梱する理由です。現代のブラウザは明示的な `<link>` タグ経由で PNG/SVG favicon も受け付けますが、`.ico` は最小公倍数のデフォルトのままです。

ICO 対 PNG 対 SVG favicon — どれを使うべき？

**最大限の互換性** には: フォールバックとして `/favicon.ico` に `.ico` を出荷し、加えて PNG(iOS 用 apple-touch-icon、Android Chrome 192/512)用の明示的な `<link>` タグ、オプションで SVG。**現代専用サイト**(IE / レガシー Edge サポート不要)には: 単一の SVG favicon を `<link rel="icon" type="image/svg+xml" href="/favicon.svg">` で Chrome 80+、Firefox 41+、Safari 12+ で動作し、最小のファイル(多くの場合 < 1 KB)です。SVG favicon は `prefers-color-scheme` もサポートするので、アイコンはダーク/ライトモードに適応できます — どの ICO にも真似できない機能です。トレードオフは SVG の複雑さ: 複雑なマルチレイヤー SVG は 16 px で正しくレンダリングされないかもしれません、小さなディテールが消えるからです。出荷前に Chrome DevTools で 16 × 16 ズームでテストしてください。**推奨**: ICO + apple-touch-icon PNG が 99% のケースをカバー。SVG は現代ユーザー向けのボーナス。

なぜ favicon は `/static/icons/` ではなく `/favicon.ico` にあるのですか？

歴史的デフォルトです。Internet Explorer 5(1999 年)はパス `/favicon.ico` をハードコードし、HTML で言及されているかどうかに関わらず、すべてのページロードで **自動 GET リクエスト** を発行しました。他のブラウザは互換性のためこの動作を真似しました。今でも、Chrome / Firefox / Safari はすべて HTML に `<link rel="icon">` が見つからない場合 `/favicon.ico` を自動リクエストします — つまり favicon を `/static/favicon.ico` に置くには明示的な `<link rel="icon" href="/static/favicon.ico">` でデフォルトのルックアップをオーバーライドする必要があり、暗黙の `/favicon.ico` に対する 404 はページロードごとにサーバーに到達します。実用的アプローチ: 他の静的アセットが他の場所にあっても、`favicon.ico` をルート URL に保ちます。現代の静的サイトジェネレータ(Next.js、Gatsby、Hugo、Astro)は `public/` または `static/` に置かれたファイルを自動的に URL ルートにコピーすることでこれを簡単にします。

ブラウザはどの ICO サイズを表示するかをどう決めますか？

各ブラウザは独自のルールを埋め込みますが、**「表示ターゲット以上の最小サイズ、すべてが小さければ利用可能な最大」** に収束します。表示ターゲットはコンテキストに依存します: ブラウザタブは 16 × 16(高 DPI ディスプレイでは 32 × 32)、ブックマークリストは 16、履歴ドロップダウンは 16、アドレスバーのロックアイコンは 16、OS レベルショートカット(Windows タスクバーピン、macOS ドック)は 32 または 48、上記すべての高 DPI 版は 2× / 3× スケール。Chrome と Firefox は最近一致アルゴリズムを使用、Safari は利用可能なら 32 を優先し 16 にフォールバックします。Edge は ICO の宣言された `bitCount` を尊重し、複数のビット深度が存在する場合に 32 ビット(アルファチャンネル)エントリを優先します。実用的なルール: **常に 16 と 32 の両方を含め**、ブラウザ favicon の大きなサイズは無視(代わりに iOS には PNG `apple-touch-icon` を使用)、単一サイズがどこでも正しく見えると信頼しないこと。

新しい favicon をデプロイしても更新されません — なぜ？

ブラウザは favicon をアグレッシブにキャッシュします — 他のアセットよりはるかに。`/favicon.ico` リクエストはブラウザの favicon プリフェッチャの動作のためキャッシュバスティングクエリ文字列をバイパスすることが多く、一部のブラウザは HTTP `Cache-Control` ヘッダーに関係なく favicon を 24 時間以上キャッシュします。信頼できる修正は **ファイル名を変更** すること(例: `favicon.v2.ico`)、そして `<link>` タグを更新すること — ほとんどの静的サイトジェネレータはコンテンツハッシュ化されたファイル名で自動的にこれを処理します。暗黙のリクエストを壊さずに名前変更できない正規の `/favicon.ico` の場所には、回避策として `<link href>` に `?v=2` を追加し、ユーザーが最終的に更新することを信頼します。企業プロキシ上の企業ユーザーは数日間古いものを見続けるかもしれません。開発中は Chrome DevTools → Application → Storage → Clear site data で即時更新を強制できます。

favicon ソースは正方形であるべき、どのアスペクト比が機能しますか？

**はい、常に正方形**。非正方形のソースはエンコーダによって引き伸ばされるかクロップされます、どちらも見苦しいです。512 × 512 以上で正確に **1:1** のアスペクト比を狙ってください。アイコンの視覚的コンテンツはわずかに小さな「安全領域」内に収め、余裕を持たせるべきです — 歴史的に各辺約 10% のパディング — アイコンは多様なコンテキスト(タブ・ブックマーク・タスクバー・ホームスクリーン)で現れ、タイトなクロップは窮屈に感じるためです。特に iOS は独自の角丸クリップとシャドウを追加するので、絶対的なコーナーにあるコンテンツはクリップされます。maskable-icon 仕様(W3C、2019)は Android のホームスクリーン円形アイコンマスク用の円の安全領域として文書化されたパディングでこれを形式化します — 円形マスク内で完全に安全にレンダリングするには 40% パディング。通常の favicon(maskable でない)には、10〜15% パディングが快適な中間です。

関連する概念

**favicon 慣例** は Web エコシステムで最も長く存続している非公式標準の 1 つです。Internet Explorer 5 がブックマークサイト用に `/favicon.ico` の自動検出を搭載した **1999 年 3 月** に Microsoft が導入し、HTML4 そのものより古く、2026 年もほぼ変わらず生き残っています。名前は「favorites icon」の縮約 — Internet Explorer のブックマークは「favorites」と呼ばれ、自動取得されたアイコンが *favorites icon* でした。数か月以内に Netscape と Opera が同じパスベースの自動検出を採用し、慣例は永続化しました。HTML4 は同年に明示的なオーバーライドを許可する `<link rel="shortcut icon">` を追加。現代 HTML は `<link rel="icon">` を使い(`shortcut` プレフィックスは非推奨だが今も受け入れられる)。Apple は 2008 年に iPhone OS 1.1.3 で **apple-touch-icon** 慣例を導入し、iOS ホームスクリーンアイコンに高解像度ソースを提供しました。Google は 2014 年に初期 PWA プッシュの一環として **Android Chrome アイコン** を追随しました。

**ICO コンテナ形式** 自体は 1985 年時代の Microsoft エンジニアリングの決定を反映しています。ヘッダーはリトルエンディアン(Intel x86 ネイティブ順序)、エントリテーブルは固定 16 バイトレコードを使用し、幅/高さフィールドは単一バイト — つまり 255 px 超のサイズには 0 が 256 を意味する奇妙なエンコードが必要(256 px 超のサイズは表現不能)。Vista で導入された PNG ペイロード拡張がサイズ制限を回避できるのは、PNG ヘッダー自体が真の寸法を含み、Windows と現代のブラウザは ICO ディレクトリエントリではなく埋め込まれた PNG の内部からそれを読むためです。ほとんどの現代のアイコン生成ライブラリ(本ツール含む)は PNG ペイロードのみを排他的に出力します、元の BMP スタイルペイロードより小さいからです — 非圧縮 256 × 256 RGBA は 256 KB、等価な PNG は通常 30 KB 未満です。Microsoft の **.cur**(カーソル)形式は同じコンテナ構造を共有し、ホットスポット座標をエンコードする 2 つの追加バイトを持ちます。

3 つの **アイコンとアセットの隣接概念** が favicon 作業と交差します。**SVG favicon**(2019 年以降主要ブラウザでサポート)は現代的代替: 品質低下なしに任意のサイズにスケールし、SVG に埋め込まれた CSS 経由で `prefers-color-scheme` に応答できる単一ファイル。トレードオフは、SVG favicon が複雑なブランドロゴが時々要求する豊かな色とグラデーションの詳細を表現できないこと、ブラウザタブで漢字や絵文字と並んで 16 × 16 でレンダリングされるためです。**プログレッシブ Web アプリ(PWA)マニフェスト**(W3C 標準、2016 年)は apple-touch-icon が始めたことを形式化します: インストール可能な Web アプリの名前、アイコン、テーマカラー、表示モードを宣言する JSON ファイル(`site.webmanifest` または `manifest.json`)。Chrome DevTools の Lighthouse 監査は有効な favicon と完全なマニフェストの両方をチェックします — これらの修正はしばしば最初の PWA 準備の勝利です。最後に、**maskable アイコン**(W3C、2019 年)は Android の円形アイコンクリップマスクがコンテンツを切り落とさないよう、アイコン内に文書化された安全領域を導入します。マニフェストで `"purpose": "maskable"` を宣言すると、アイコンがこのパディングで設計されていることを Chrome に伝え、Android が他の場合に適用する「白い四角枠付きアイコン」フォールバックを回避します。

関連ツール

画像リサイズ・変換

画像

画像のリサイズ・形式変換（JPEG / PNG / WebP）・圧縮。ファイルはブラウザ外に送信されません。

QR コードジェネレーター

画像

テキスト・URL・Wi-Fi・メールの QR コードを生成。完全ブラウザ内処理、PNG/SVG ダウンロード対応。

SVG オプティマイザ

画像

SVGO で SVG をミニファイ。エディタのメタデータ削除、座標丸め、サイズ削減を行いつつ描画は維持。

EXIF ビューア・除去ツール

画像

JPEG / HEIC / TIFF に埋め込まれた EXIF(カメラ・GPS・撮影日時・レンズ等)を表示し、メタデータを除去したコピーをダウンロード。