ESC

ソース画像をアップロード

画像をここにドラッグ&ドロップ

正方形のPNG、JPG、SVGが最適(最大8MB)。

クイックガイドライン

  • クリアな結果を得るには、少なくとも1024×1024pxのソースを使用してください。
  • 重要なアートワークを中央に配置 - 小さなアイコンはより厳しくクロップされます。
  • 透明なPNGはダークブラウザテーマでよりよく見えます。
  • 生成されたスニペットパスをデプロイメントに合わせて更新してください。

HTMLスニペット

これらの行をサイトのタグ内に貼り付けてください。

マニフェストプレビュー


                

ファビコンジェネレーターを使用する理由

完全なパッケージ

PNGサイズ、favicon.ico、マニフェスト、ブラウザ設定を1つのダウンロードで。

スマートスケーリング

すべての解像度でアートワークを自動的に中央揃えおよびスケーリング。

既製スニペット

生成されたHTML 行をコピー。

プライバシー保護

すべてがブラウザで実行 - サーバーへのアップロードなし。

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

1

画像を追加

正方形のPNG、JPG、SVGロゴをアップロード(最大8MB)。

2

サイズとスタイルを選択

ファビコンサイズ、背景スタイル、角の半径を選択。

3

プレビューを生成

すべてのアイコンサイズを確認し、必要に応じてHTMLスニペットをコピー。

4

パッケージをダウンロード

PNG、favicon.ico、マニフェスト、ブラウザ設定ファイルを含むZIPを取得。

よくある質問

1024x1024px以上の正方形で透明なPNGが、すべてのサイズで最も鮮明な結果をもたらします。SVGも使用でき、どの解像度でも完璧にスケールします。JPGも使用できますが透明な背景を持てないため、ツールが単色の背景色を追加します。最高の品質のために:少なくとも512x512pxから始め、デザインを中央に配置し、ファビコンは16x16pxほどの小さいサイズで表示されるため、細かすぎないシンプルなデザインにしてください。

ジェネレーターは以下のサイズのPNGアイコンを生成します:16、24、32、40、48、57、64、72、96、120、128、144、150、180、192、256、384、512ピクセル正方形。「モダン」プリセットは最重要な5サイズをカバーし、「コンプリート」プリセットは18種類すべてを生成します。favicon.icoには16、32、48pxの各バージョンが1ファイルに埋め込まれており、レガシーブラウザをサポートします。

favicon.icoはIE 5以降のすべてのブラウザがサポートするレガシーの複数解像度コンテナ形式です。モダンブラウザ(Chrome、Firefox、Safari、Edge)はPNG faviconを優先します。PNGはより小さいファイルサイズでフルカラー深度と透明度をサポートしているためです。ベストプラクティス:両方を含めてください — レガシー互換性のためのfavicon.icoと、モダンブラウザ向けの適切なサイズのPNGファイルを指定した <link rel="icon" type="image/png"> タグの両方を用意しましょう。

Apple Touchアイコン(180x180px)は、ユーザーがウェブサイトをiPhoneまたはiPadのホーム画面に追加する際に使用されます。これがない場合、iOSはページのスクリーンショットをアイコンとして使用するため、見た目が良くありません。HTMLの <head> に <link rel="apple-touch-icon" href="/apple-touch-icon.png"> を追加してください。このツールは180px PNGを生成し、HTMLスニペットに正しいHTMLの行を含めます。モダンなiOS(10以降)では180pxのみが必要です。

Progressive Web Apps(PWA)はsite.webmanifestファイルに記載された192x192と512x512のアイコンが必要です。192pxアイコンはユーザーがPWAをインストールした際にAndroidのホーム画面に表示されます。512pxアイコンはPWAスプラッシュスクリーンに使用されます。このツールは両方のPNGファイルを生成し、正しいiconsアレイを含むsite.webmanifestを作成します。PWAインストールを有効にするには、HTMLの <head> に <link rel="manifest" href="/site.webmanifest"> を追加してください。

生成されたHTMLスニペットには以下が含まれます:標準faviconのための <link rel="icon"> タグ、iOSホーム画面アイコンのための <link rel="apple-touch-icon">、PWAサポートのためにsite.webmanifestを指定する <link rel="manifest">、そしてWindowsタイル用のbrowserconfig.xmlを指定する <meta name="msapplication-config">。すべての行をHTMLの <head> に貼り付けてください。アイコンをサブフォルダに配置する場合はパスを更新してください。

はい。モダンブラウザ(Chrome 80以降、Firefox 41以降、Safari 15以降)は <link rel="icon" type="image/svg+xml" href="/favicon.svg"> によるSVG faviconをサポートしています。SVG faviconはどの解像度でも完璧にスケールし、CSS の @media (prefers-color-scheme: dark) によるダークモードもサポートします。このツールの「favicon.svgを含める」オプションを有効にすると、パッケージにSVGが追加されます。Safari 14以前や古いブラウザへのフォールバックのため、ICOとPNGファイルも引き続き用意しておいてください。

いいえ。リサイズ、形式変換、パッケージングはすべてJavaScriptによってブラウザ内で完結します。あなたの画像がサーバーに送信されることは一切ありません。何も保存、記録、送信されず、ページ読み込み後はオフラインでも完全にプライベートに動作します。

ファビコンジェネレーターとは?

1枚の画像からサイトに必要なすべてのアイコンサイズを生成するツールです。favicon.ico、Apple touch icon、Androidマニフェストアイコンなど、すべてを一度にまとめて作成できます。

生成される内容

複数解像度のICOファイル、16x16から512x512までの個別PNG、Apple touch icon、HTMLスニペットとsite.webmanifest。すべてそのままプロジェクトに組み込めます。

よくある使い方

新しいサイト立ち上げ時にすべてのアイコンを一括で用意したい場合。リブランディングでファビコンを差し替える場合。PWA開発でマニフェストアイコンを正確なサイズで準備する場合。

きれいに仕上げるコツ

1024x1024ピクセル以上の正方形画像から始めましょう。透明PNGが最も柔軟です。デザインはシンプルに -- ファビコンは小さいので細かいディテールは潰れます。

プライバシー

リサイズとパッケージングはすべてブラウザ内で行われます。画像はサーバーに送信されず、タブを閉じれば何も残りません。

セキュリティとプライバシー

あなたのデータの安全を最優先しています

ローカル処理

すべての処理がブラウザ内で完結します

データ送信なし

データはサーバーに送信されません

保存しません

データは保存も共有もされません

SSL暗号化

安全な通信でご利用いただけます

次のステップ

MoreOnlineToolsでもっと見る