ファビコンジェネレーター

新着トレンド 🔥

1枚の画像からすべてのファビコンサイズを生成

画像ツール

ファビコンジェネレーター の使い方

  1. 1正方形の画像をアップロード（PNG推奨）
  2. 2ツールがすべての標準faviconサイズを自動生成
  3. 3個別サイズまたは全ファイルのZIPをダウンロード
  4. 4Copy the HTML snippet to add favicons to your website

ファビコンジェネレーター について

Upload a single image and generate all standard favicon sizes (16x16, 32x32, 48x48, 180x180, 192x192, 512x512) plus an ICO file, ready for use in any website.

ファビコンジェネレーターの主な機能

  • 6つの標準サイズを生成：16x16、32x32、48x48、96x96、180x180、512x512
  • iOS ホーム画面ブックマーク用の180x180 Apple Touch Iconを含む
  • 各サイズの個別ダウンロードボタン
  • 生成された各サイズのすぐ使えるHTMLリンクタグスニペット
  • ソース画像から透明度を保持したPNG出力
  • 即時ブラウザ生成 — アップロード不要
  • 512x512以上の正方形ソース画像で最も効果的
  • HTMLスニペットブロック全体のワンクリックコピー

対応フォーマット

入力フォーマット

PNGJPGWEBPSVGGIFBMP

出力フォーマット

PNG (all sizes)

A square source image at 512x512 pixels or larger is strongly recommended for sharp results at all sizes.

使用例

新しいウェブサイトにファビコンを追加

ロゴをアップロード、「ファビコン生成」をクリック、全サイズをダウンロードし、HTMLスニペットをドキュメントheadに貼り付けます。

入力

512x512 square logo PNG

出力

Six PNG files (16 to 512px) plus HTML snippet

PWA用Apple Touch Iconを生成

プログレッシブウェブアプリマニフェストのApple Touch Iconリンクタグのために180x180サイズだけをダウンロードします。

入力

New brand logo PNG

出力

Fresh set of all standard favicon sizes

Generate Apple Touch Icon for PWA

Download just the 180x180 size for the Apple Touch Icon link tag in your Progressive Web App manifest.

入力

App icon PNG

出力

180x180 Apple Touch Icon PNG

主な使用ケース

  • 新しいウェブサイトプロジェクトに完全なファビコンセットを追加
  • 更新されたブランドロゴで古いファビコンを更新
  • iOSホーム画面ブックマーク用のApple Touch Iconを生成
  • プログレッシブウェブアプリマニフェストに必要なアイコンサイズを作成
  • より良いブラウザとOS互換性のために複数のファビコンサイズを提供
  • すべてのブラウザで一致するファビコンでブランドの一貫性を確保

トラブルシューティング

ファビコンが小さいサイズ（16x16、32x32）でぼやけて表示される

解決策

少なくとも512x512ピクセルのソース画像から始めてください。縮小アルゴリズムは鮮明な小アイコンを生成するのに十分な詳細が必要です。

ファビコンがブラウザタブに表示されない

解決策

ブラウザキャッシュをクリアしてハードリロードしてください。ブラウザはファビコンを積極的にキャッシュします — HTML更新後も古いアイコンが数分間表示される場合があります。

正方形でないソース画像が出力で歪んで見える

解決策

まずCrop Imageツールでソース画像を正方形にトリミングしてから、正方形バージョンからファビコンを生成してください。

よくある質問

どのサイズの画像をアップロードすればよいですか？

最良の結果のために少なくとも512×512ピクセルを推奨します。

どのフォーマットが生成されますか？

すべてのサイズのPNGファイルとマルチサイズICOファイル。

.icoファイルを生成できますか？

現在、ツールは全サイズのPNGファイルを生成します。最新のほとんどのブラウザはPNGファビコンを受け付けます。.ico形式の場合は、画像変換ツールで16x16または32x32のPNGを変換してください。

ReactまたはNext.jsアプリで生成したファビコンを使うにはどうすればいいですか？

PNGファイルをpublicフォルダに配置し、HTMLリンクタグをドキュメントheadまたはアプリレイアウトに追加します。Next.jsにはファビコンパスを直接受け付ける組み込みメタデータAPIがあります。

How do I add the favicons to my website?

Download the generated PNG files and place them in your website root or an assets folder. Then paste the provided HTML link tag snippet into the head section of your HTML file.

Why is my favicon not showing after adding the HTML snippet?

Browsers cache favicons aggressively. After updating your site, perform a hard reload (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear the browser cache to see the new favicon.

Can I generate a .ico file?

Currently the tool generates PNG files for all sizes. Most modern browsers accept PNG favicons. For .ico format, convert the 16x16 or 32x32 PNG using the Image Converter tool.

How do I use the generated favicons in a React or Next.js app?

Place the PNG files in your public folder and add the HTML link tags to your document head or app layout. Next.js has a built-in metadata API that accepts favicon paths directly.