Favicon Generator：ICO・PNG作成
無料、登録不要。任意の画像から9種類の標準ファビコンサイズを生成：16×16〜512×512、Apple Touch、Android Chrome。プレビューとダウンロード。
Favicon Generator とは？
Favicon Generator は、任意の画像を現代のブラウザ、オペレーティングシステム、モバイルプラットフォームが必要とする9種類の標準ファビコンサイズに変換する無料のブラウザベースツールです。新しいウェブサイトにファビコンを設定するには、正確なピクセル寸法で特定のPNGファイルセットを生成する必要があります — ブラウザタブ用の16×16、Apple Touchアイコン用の180×180、Android Chrome用の192×192と512×512 — さらに複数の中間サイズも必要です。手動で行うには画像編集ソフトで9回リサイズが必要です。このツールは1クリックで9種類すべてを作成し、各サイズのラベル付きプレビューを表示し、個別またはまとめてダウンロードできます。すべての処理はCanvas APIを使用してブラウザ内で実行されます — 画像はデバイスから外に出ません。
主な機能
- 複数のファビコンサイズを生成 — FAVICON_SIZESの配列で定義された9サイズをすべて生成します：16、32、48、64、96、128、180、192、512ピクセル正方形。各サイズはターゲット寸法のcanvasに元の画像を描画することでレンダリングされます。
- ICO、PNG、WebP形式の作成 — 生成されるファビコンはすべてPNGです（
canvas.toDataURL('image/png')経由）。個別のファイル名はウェブ標準に従います：favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png、android-chrome-192x192.pngなど。 - Apple Touch Iconのサポート — 180×180pxの出力は
apple-touch-icon.pngという名前になります。これはユーザーがサイトをホーム画面に追加する際にiOS Safariが探すファイル名です。 - Android Chrome Iconのサポート — 192×192pxの出力は
android-chrome-192x192.png、512×512pxの出力はandroid-chrome-512x512.pngと名付けられ、標準のmanifest.jsonWeb App Manifestで指定された名前と一致します。 - 生成されたすべてのサイズのプレビュー — 生成後、グリッドに各サイズが透過グリッドの背景上にラベル付きプレビュー画像、ファイル名、正確なピクセル寸法、用途の説明（例：「ブラウザタブアイコン」「Apple Touch Icon」「Chrome Web Storeアイコン」）とともに表示されます。
- 個別またはZIPでダウンロード — 各サイズに独自のダウンロードボタンがあります。「すべてダウンロード」ボタンは生成されたすべてのファイル — 9つのPNGファビコン、
favicon.ico（16、32、48pxサイズを含む）、site.webmanifest— を単一のfavicons.zipアーカイブにまとめます。 - favicon.icoの自動生成 — PNG-in-ICO技術を使用して16、32、48pxのPNGを埋め込んだ適切なICOコンテナファイルを作成します。
<link rel="icon" type="image/x-icon" href="/favicon.ico">ですぐに使用できます。 - site.webmanifestの生成 — 192と512pxのAndroid Chromeアイコンを参照するすぐに使えるWeb App Manifestファイルが、ダウンロードZIPアーカイブに含まれています。
- 100%クライアントサイド処理 — canvasのリサイズ処理はすべてブラウザ内で実行されます。ソース画像は
FileReaderで読み込まれ、サーバーに送信されることはありません。 - あらゆる画像形式に対応 — ファイル入力は
image/*を受け付け、<img>要素がファイルをデコードします。JPEG、PNG、SVG、WebP、GIF、AVIFがすべてソース画像として機能します。
Favicon Generatorの使い方
ステップ1：ソース画像をアップロードする
アップロードのドロップゾーンをクリックするか、画像をドラッグします。最良の結果を得るには正方形の画像を使用してください — ツールはctx.drawImage(originalImage, 0, 0, size, size)を使用して各ファビコンcanvasを埋めるように画像を拡大縮小するため、正方形でない入力は引き伸ばされます。512×512px以上の透明な背景を持つ正方形のPNGが理想的なソースです。画像が読み込まれると、元の寸法（例：512 x 512px）を示すプレビューが表示されます。
ステップ2：すべてのサイズを生成する
「ファビコンを生成」をクリックします。ツールは9サイズを順番に処理します：各サイズについて、非表示のcanvasをその寸法に設定し、クリアし、canvasを埋めるようにスケールした画像を描画し、得られたデータURLを保存します。ループが完了すると、成功のトーストがすべてのサイズが生成されたことを確認します。
ステップ3：結果をプレビューする
9つの生成されたファビコンが並んだグリッドが表示されます。各アイテムには以下が表示されます：
- 透過グリッドの背景にレンダリングされたプレビュー画像（512×512のような大きな出力でもプレビューは64×64pxに制限されます）
- ファイル名（例：
android-chrome-512x512.png） - 正確なピクセル寸法（例：
512x512px） - 使用場所の説明（例：
Android Chrome スプラッシュ）
ダウンロード前に16×16のような小さなサイズでアイコンが正しく表示されることを目視で確認できます。
ステップ4：個別またはZIPでダウンロードする
個別のファビコンの横にあるダウンロードボタンをクリックして、その特定のファイルを保存します。favicon.icoを別途ダウンロードすることもできます — 単一のICOコンテナに16、32、48pxのサイズが含まれています。すべてを一度にダウンロードするには、生成されたファビコンカードのヘッダーにある「すべてダウンロード」をクリックします。これにより、9つのPNGファイル、favicon.ico、site.webmanifestが含まれたfavicons.zipアーカイブが作成されます。
ステップ5：ウェブサイトにファビコンを追加する
ダウンロードしたPNGファイルをプロジェクトのpublicルートディレクトリに配置します。HTMLの<head>に以下のタグを追加します：
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Android Chrome PWAサポートのために、manifest.jsonに192×192と512×512のファイルを参照します：
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
]
}実践的な例
新しいウェブサイトのセットアップ
シナリオ： Next.jsで構築した個人ポートフォリオサイトを立ち上げ、ロゴSVGから標準的なファビコンサイズすべてが必要です。
入力： ロゴの512×512px正方形PNG（透明背景）。
ツールが生成するもの： 9つのPNGファイル：favicon-16x16.pngからandroid-chrome-512x512.pngまで、ブラウザとモバイルプラットフォームが期待する名前とサイズですべて命名・調整されています。
なぜ便利か： ファビコンを手動でセットアップするには9つの別々のエクスポート操作が必要です。ここでのワンクリックがそのステップ全体を置き換えます。
Chrome Web Storeアイコン
シナリオ： Chrome拡張機能を申請するにあたり、Chrome Web Storeリスティングガイドラインの要件に従って128×128pxのアイコンが必要です。
入力： 任意のサイズの拡張機能のアイコンアートワーク。
ツールが生成するもの： 「Chrome Web Storeアイコン」とラベルされたfavicon-128x128.png — Chrome Web Storeが要求するまさにそのファイルです。
なぜ便利か： 128×128pxサイズは多くのファビコンジェネレーターが省略する特定の要件です。このツールは正しい標準ファイル名とともにそれを含みます。
ウェブアプリのPWAセットアップ
シナリオ： ReactアプリにProgressive Web App (PWA)サポートを追加し、manifestアイコンが必要です。
入力： 512×512pxのアプリアイコンPNG。
ツールが生成するもの： android-chrome-192x192.png（192×192px）とandroid-chrome-512x512.png（512×512px） — Android Chrome向けWeb App Manifest仕様で指定された2つのサイズ。
なぜ便利か： Android Chromeはホーム画面アイコンの表示とスプラッシュスクリーンに両方のサイズが必要です。標準ファイル名で事前に命名されていることで設定エラーを防げます。
ヒントとベストプラクティス
512×512px以上の正方形画像から始める。 ツールはctx.drawImageを使用して入力を各ターゲットサイズにスケールダウンします。より大きな正方形画像から始めると、各スケールで利用できる詳細が増え、16×16のような小さなサイズでのアーティファクトが減少します。
形状ロゴのアイコンには透明PNGを使用する。 ロゴが非矩形（円、盾、カスタムアウトライン）の場合は、透明背景のPNGを用意します。透明な領域は各ファビコンに引き継がれ、ブラウザタブとiOSホーム画面で正しく表示されます。
ダウンロード前に16×16でプレビューを確認する。 グリッドは各サイズを表示スケールで表示します。16×16プレビューが最も重要な場合が多いです — ロゴのテキストが16pxで判読できない場合は、最小サイズ用にシンプルなマークのみのバージョンを検討してください。
「すべてダウンロード」はZIPアーカイブを作成する。 生成されたすべてのファイル — 9つのPNGファビコン、favicon.ico、site.webmanifest — が単一のfavicons.zipファイルにまとめられます。これによりブラウザのダウンロード制限を回避し、すべてのファイルを1つのアーカイブに整理できます。
JPEG入力は機能するが透明な領域は黒くなる。 ソース画像が透明のないJPEGの場合、出力ファビコンも同じ背景になります。透明背景が必要なアイコンにはPNGソースを使用してください。
ブラウザのダウンロード動作を確認する。 「すべてダウンロード」を実行すると、各ファイルを個別に確認するよう求めるブラウザもあります。9つのダウンロードプロンプトが表示された場合は、それぞれを承認してください。自動ダウンロードが有効なChromeでは、プロンプトなしですべて9つのファイルがダウンロードフォルダに保存されます。
よくある問題とトラブルシューティング
アップロード時に「読み込みエラー」トーストが表示される。 これはブラウザがアップロードされたファイルを画像としてデコードできない場合にimg.onerrorハンドラーから発生します。有効な画像ファイル（JPEG、PNG、WebP、SVGなど）をアップロードしていることを確認してください。破損したファイルや拡張子が誤ったファイルがこのエラーを引き起こします。
生成されたファビコンが16×16でぼやけて見える。 ツールはバイリニア補間（ブラウザのデフォルト）を使用してフルソース画像を16×16ピクセルにスケールダウンして描画します。ソースが詳細なイラストやテキストを含む場合、16×16の結果はぼやけます。これは複雑なアートワークを小さなサイズにスケーリングする際の根本的な制限です — 16×16と32×32のターゲット用にシンプルなマークをデザインしてください。
「すべてダウンロード」が開始しない。 すべてダウンロード機能はJavaScriptを使用してZIPアーカイブを作成します。ダウンロードがトリガーされない場合は、サイトのポップアップとダウンロードが許可されているか確認してください。また、各ダウンロードボタンを使用してファイルを個別にダウンロードすることもできます。
デプロイ後にブラウザでファビコンが更新されない。 ブラウザのファビコンキャッシュは積極的です。新しいファビコンをデプロイした後は、タブを強制更新し（Ctrl+Shift+R、またはMacではCmd+Shift+R）、ブラウザキャッシュをクリアしてください。キャッシュバスターとなるクエリ文字列でファビコンのファイル名を変更する（例：href="/favicon-32x32.png?v=2"）ことでも強制更新できます。
グリッド内の512×512プレビュー画像は64pxに制限されている。 グリッドのプレビューはグリッドをコンパクトに保つために表示をMath.min(size, 64)ピクセルに制限しています。ダウンロードされるファイルは正しい512×512pxのPNGです — 小さい表示サイズはプレビューのみです。
プライバシーとセキュリティ
Favicon Generatorはすべてブラウザ内で実行されます。ソース画像はFileReader.readAsDataURLを使用してJavaScriptのImageオブジェクトに読み込まれ、非表示のcanvas要素に描画されます。画像データは外部サーバーに送信されません。9つの出力ファビコンはすべてcanvas.toDataURL('image/png')からローカルで生成されます。これは独自のロゴ、未公開のブランディング、機密の視覚資産に対して安全です。ページが読み込まれた後はツールはオフラインで完全に動作します。
よくある質問
Favicon Generatorは無料ですか？
はい、完全無料です。アカウントは不要で、出力にウォーターマークは追加されず、ファビコンを生成できる回数に制限もありません。処理に使用するCanvas APIにはサーバーサイドのコストがかかりません。
Favicon Generatorはオフラインで動作しますか？
はい。ページが読み込まれた後は、すべての処理がブラウザネイティブのCanvas APIとFileReaderを使用します。画像の読み込み、ファビコンの生成、ダウンロード中にネットワーク呼び出しは行われません。インターネット接続なしで動作します。
Favicon Generatorで私のデータは安全ですか？
はい。画像はFileReaderを通じてブラウザメモリに読み込まれ、canvas要素に描画されます。画像データはブラウザ外に出ません。未公開のロゴ、機密のブランド資産、独自のアイコノグラフィーに対して安全です。
ツールはどのサイズを生成しますか？
ツールは9サイズを生成します：16×16、32×32、48×48、64×64、96×96、128×128、180×180、192×192、512×512ピクセル。それぞれが用途に応じた標準ファイル名でPNGとして保存されます。
各サイズの標準ファイル名は何ですか？
ファイル名はウェブ標準に従います：favicon-16x16.png、favicon-32x32.png、favicon-48x48.png、favicon-64x64.png、favicon-96x96.png、favicon-128x128.png、apple-touch-icon.png（180×180）、android-chrome-192x192.png、android-chrome-512x512.png。
ツールは.icoファイルを生成しますか？
はい。ツールは自動的にICOコンテナ内にPNGとして16、32、48pxのサイズを埋め込んだfavicon.icoファイルを生成します。<link rel="icon" type="image/x-icon" href="/favicon.ico">でのデプロイにすぐ使用できます。ICOファイルは個別にダウンロードするか、「すべてダウンロード」ZIPアーカイブに含まれています。
96×96サイズは何に使用されますか？
96×96のfavicon-96x96.pngはツールの説明配列で「Google TVアイコン」とラベルされています。歴史的にGoogle TVアプリのアイコンに使用されており、網羅的なファビコンパッケージとして含まれています。
SVGをソース画像として使用できますか？
はい。ファイル入力はimage/*を受け付け、現代のブラウザは<img>要素を使用してSVGをデコードできます。SVGはcanvasに描画される際にブラウザによってラスタライズされます。出力はラスタライズされたPNGになります — ベクターSVGファビコンではありません — これはほとんどのユースケースに適しています。
ソース画像に透明背景を使用すべきですか？
はい、アイコンに形状のあるアウトラインがある場合は。透明な背景はPNG出力に引き継がれます。iOSホーム画面に配置されるアイコン（apple-touch-icon.png）の場合、iOSが自動的に角を丸めるため、透明背景は正しく表示されます。ブラウザタブのファビコンの場合、ブラウザのタブ背景が透明な領域を通して表示されます。
「すべてダウンロード」ボタンは正確に何をしますか？
生成されたすべてのファイルを単一のfavicons.zipアーカイブにパックします：9つのPNGファビコン、favicon.ico（16、32、48pxサイズを含む）、site.webmanifestファイル。ZIPはブラウザで生成され、1つのファイルとしてダウンロードされます。
関連ツール
- 近日公開: SVGからPNG — Favicon Generatorに入力する前にSVGロゴを高解像度PNGに変換します。
- 近日公開: 画像リサイザー — 最もきれいな出力のためにファビコン生成前にソースアートワークを512×512pxの正方形にリサイズします。
- 近日公開: プレースホルダージェネレーター — 最終的なブランド資産の納品を待つ間にプレースホルダー画像を生成します。
- 近日公開: 画像コンバーター — デプロイメントで必要な場合は生成されたPNGファビコンをWebPや他の形式に変換します。
今すぐFavicon Generatorを試す：近日公開: Glyph Widgets Favicon Generator