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

単一ページ Favicon ジェネレーター

プレビュー

text · G
--
16×16
--
32×32
--
180
--
192
--
512
パッケージ内容：favicon.ico · 16/32/180/192/512 png · site.webmanifest

HTML 設置コード

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<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="manifest" href="/site.webmanifest">

ファイルをサイトルートに配置し、コードを <head> に挿入するだけです。

GeekFormatオンラインファビコンジェネレーターは、Photoshopやデザインソフトを開くことなく、モダンブラウザ標準に準拠した完全なウェブサイトアイコンパックを素早く作成するのに役立ちます。3つの生成モード：①テキストモード：1-2文字のアルファベット/漢字を入力、8種類のフォントから選択、フォントサイズスライダーで調整、文字色+背景色をカスタマイズ；②画像モード：PNG/JPG/WebP画像をアップロードすると自動的に中央を正方形にトリミング；③絵文字モード：絵文字を入力または選択して素早く生成。角丸四角形/円形の3形状に対応、透明背景を選択可能、5サイズ（16×16/32×32/180×180/192×192/512×512）をリアルタイムプレビュー、160msデバウンスでリアルタイム再生成、ワンクリックでZIPにパックしてダウンロード。ZIPにはfavicon.ico（旧IE互換）、favicon-16x16.png、favicon-32x32.png、apple-touch-icon.png（iOSブックマークアイコン）、android-chrome-192x192.png、android-chrome-512x512.png（PWAアイコン）、site.webmanifest（PWA設定）が含まれ、標準HTMLヘッダーlinkコードも提供しワンクリックでコピー可能。Canvasで完全ローカル生成、画像はサーバーにアップロードされません。

ファビコン（ウェブサイトアイコン）について

ファビコン（Favorites Iconの略称、ウェブサイトアイコン、ブックマークアイコンとも）は、ブラウザのタブ、ブックマークバー、履歴、アドレスバーに表示される小さなアイコンで、ウェブサイトのブランド認知における最も基本的な要素の1つです。ファビコンのないウェブサイトは多数のタブの中で空白のドキュメントアイコンとして表示され、プロフェッショナルではない印象を与えます；うまくデザインされたファビコンはユーザーがタブの山からあなたのウェブサイトを素早く見つけるのに役立ち、ウェブサイト公開前に必須の基本リソースです。

モダンなウェブサイトに必要なのはfavicon.icoだけではありません。モバイルデバイスの普及とPWA（プログレッシブウェブアプリ）の発展に伴い、完全なウェブサイトアイコンパックには複数のサイズと形式が必要です：伝統的なfavicon.icoは古いブラウザと互換性があり、16/32 PNGは通常のブラウザタブとブックマークに使用され、180×180 apple-touch-iconはiPhone/iPadユーザーの「ホーム画面に追加」用、192/512 PNGはAndroidデスクトップとPWA起動画面用、そしてsite.webmanifestはブラウザにこれらのアイコンの場所とテーマカラーを伝えます。デザインのバックグラウンドがない開発者にとって、これらすべてのサイズを手動で作成し、正しいHTML参照コードを書くのは面倒な作業です。

テキストファビコンは最も速い方法です：ほとんどの個人ブログ、オープンソースプロジェクト、社内システムでは実は複雑なロゴデザインは必要なく、ブランドのイニシャル（GoogleのG、FacebookのFなど）とブランドカラーでシンプルなテキストアイコンを作るだけで十分良い効果が得られます。ツールは8種類の一般的なシステムフォント、フォントサイズ調整、色のカスタマイズを提供し、Photoshop/Figmaを開くことなく1分でプロフェッショナルなファビコンを作成できます。

絵文字ファビコンは近年人気のシンプルな方法です：絵文字自体がデザイナーによって描かれた小さなアイコンであり、色鮮やかで認識度が高いです。個人プロジェクト、プロトタイプ、ドキュメントサイトで関連する絵文字（ロケット🚀は速さ、電球💡はアイデア、炎🔥は人気など）をファビコンとして使うと面白くて手間がかからず、空白のアイコンよりはるかに良いです。しかも（システム間でレンダリングに多少の差異はありますが）クロスプラットフォームで一貫性があります。

画像モードは既存のロゴがあるシーンに適しています：既にブランドロゴ画像がある場合、アップロードするとツールが自動的に中央を正方形にトリミングし、必要なすべてのサイズを生成します。小さいサイズではアイコンの幅がわずか16ピクセルになるため、複雑なロゴは縮小するとぼやけて塊になってしまうことに注意してください。そのためファビコンは通常完全なロゴではなく、ロゴのシンボル/マーク部分——Nikeのスウッシュ、Appleのりんご、マクドナルドのM——であり、シンプルな形状は小さいサイズでもはっきりと認識できます。

なぜローカルで生成しサーバーにアップロードしないのでしょうか？1つ目はプライバシー：未公開のブランドロゴ、クライアントのデザインデータは機密資産であり、第三者のツールのサーバーにアップロードすると漏洩のリスクがあります；2つ目はスピード：ローカルCanvas描画は瞬時に完了し、アップロード・ダウンロードを待つ必要がない；3つ目は信頼性：ネットワークが不要で社内環境でも使える。すべての画像処理はブラウザネイティブのCanvas APIを使用し、ZIPパッキングは純JavaScriptのJSZipライブラリを使用しており、バックエンドサービスは必要ありません。

3つの形状（四角形、角丸、円形）は異なるプラットフォームスタイルに適応するためです：Windowsは伝統的に四角形アイコンを使用し、iOS/iPadOSは角丸四角形（Squircle）を使用し、Androidと一部のウェブサイトは円形アイコンを使用します。ツールの22%角丸は比較的汎用的な角丸の大きさで、モダンUIスタイルに近いです。ブラウザが実際にファビコンを表示するときは（一部のブラウザを除き）通常アイコンを円形にトリミングしないことに注意してください。円形は主にスマホのデスクトップに追加した後の外観に影響します。

注意点：①ファビコンの効果はデザインのシンプルさに大きく依存します。複雑な模様は16×16では必ずぼやけるため、シンプルなテキスト/図形/絵文字の使用を推奨；②絵文字のレンダリング効果はオペレーティングシステムのフォントに依存するため、システムによって見える絵文字が多少異なる場合があります；③ICOファイルは32×32 PNGを埋め込んで生成されており、ほとんどの互換ニーズを満たします；④透明背景は一部の古いブラウザでは黒または白の背景として表示される場合があるため、メインサイトでは背景色ありの方が無難です。

ユースケース

  • 個人ブログ、会社サイト、独立サイトの新規作成時に、デザインソフトを開くことなく素早くファビコンを作成
  • フロントエンド開発でプロジェクトのデモ/プロトタイプ/ランディングページ作成時に仮のアイコンとして素早く生成
  • ブランドのイニシャルを使ってテキストアイコンを素早く生成し、社内システム、管理画面に使用
  • 絵文字を使って個人プロジェクト、オープンソースプロジェクトのドキュメントサイトのファビコンを作成、面白くて手間いらず
  • クライアントのウェブサイト公開前に完全なアイコンパックを生成、デスクトップ、iOS、Android、PWAのすべてのサイズを一度に準備
  • イベントページ、マーケティングランディングページの専用ファビコンを素早く作成し、メインビジュアルと色を一致させる
  • PWAプロジェクトのパッケージ前に必須のアイコン一式とwebmanifest設定ファイルを生成
  • GitHub Pages、Vercel、Netlifyにデプロイするプロジェクトに素早くファビコンを追加
  • 開発デバッグ時に一時的にファビコンを置き換えて効果を確認、何度も切り抜きする必要なし
  • 個人ポートフォリオ/履歴書サイトでイニシャルやシンプルな絵文字を使って個性的なファビコンを作成
  • ウェブサイト開発を学ぶときに、ファビコンの各種サイズとHTMLでの参照方法を理解
  • 古いウェブサイトのファビコンを置き換え、モダンな標準に準拠した完全なアイコンパックをワンクリックで生成してアップグレード

使い方

  1. 生成モードを選択：「テキスト」でアルファベット/漢字を入力、「画像」でロゴをアップロード、「絵文字」で表情を選択
  2. スタイルを調整：フォントを選択（テキストモード）、フォントサイズを調整、文字色と背景色を選択、形状（四角/角丸/円）を選択、透明背景にするか選択
  3. 右側の5サイズのリアルタイムプレビューを確認し、16×16の小さいアイコンがはっきり読めることを確認
  4. 「ZIPパックをダウンロード」ボタンをクリックしてアイコンパックをローカルに保存。HTMLコードスニペットをコピーし、解凍後ファイルをウェブサイトのルートディレクトリに配置してコードを&lt;head&gt;に貼り付け

特徴

  • 3つのアイコンソース：テキスト（1-2文字、8フォント）、画像アップロード（PNG/JPG/WebP自動中央トリミング）、絵文字（12のクイック絵文字+カスタム入力）
  • 3つの形状スタイル：直角四角形、22%角丸四角形、円形切り抜き。伝統的なウェブサイトからモダンなAppアイコンまでスタイルをカバー
  • 透明背景オプション：透明/有色背景をワンクリックで切り替え。ダークモードやさまざまなブラウザタブの背景に適応
  • テキスト完全カスタマイズ：文字色+背景色カラーピッカー、8種類のシステムフォント（Arial/Verdana/Georgia/Times New Roman/Courier New/Impact/Tahoma/Trebuchet MS）、フォントサイズ0.48-0.82の比率で細かく調整
  • 8種類のシステムフォント：サンセリフ（Arial/Verdana/Tahoma/Trebuchet MS）、セリフ（Georgia/Times New Roman）から等幅（Courier New）、太字タイトル（Impact）まで、さまざまなブランドスタイルに対応
  • 5サイズリアルタイムプレビュー：16×16（ブラウザタブ）、32×32（タスクバー）、180×180（アップルtouchアイコン）、192×192/512×512（Android/PWA）。調整しながらリアルタイムで効果を確認
  • 完全な標準アイコンパック：favicon.ico + 5つのPNG + site.webmanifest 計7ファイルを含むZIPをワンクリックダウンロード。デスクトップ、モバイル、PWAのすべてのシーンをカバー
  • favicon.icoは旧ブラウザ互換：標準ICO形式ファイルを自動生成、IEなどの古いブラウザと互換性があり、PNGだけでなくICOも生成
  • apple-touch-icon：iOS Safariのホーム画面追加用に180×180アイコンを生成
  • PWA対応：192/512のAndroid Chromeアイコンとsite.webmanifest設定ファイルを含み、プログレッシブウェブアプリの要件を満たす
  • HTMLコードワンクリックコピー：標準linkタグコードスニペットを提供、ウェブサイトの&lt;head&gt;内に直接コピー&ペーストするだけ
  • 160msデバウンスリアルタイムプレビュー：色/フォント/フォントサイズ/形状を調整すると自動的に再生成、生成ボタンをクリックしなくても調整しながら効果を確認可能
  • 画像自動中央トリミング：アップロードした画像は自動的に正方形の中央部分をトリミング、事前に1:1比率にトリミングする必要なし
  • Canvasで完全ローカル処理：すべてのアイコンはブラウザのCanvas APIでローカルに描画しZIPにパック。画像はサーバーにアップロードされず、機密性の高いロゴも安全に漏洩なし

よくある質問

生成されるZIPパックにはどのようなファイルが含まれていますか？

7つの標準ファイルが含まれています：favicon.ico（32×32を埋め込んだICO形式、旧ブラウザ互換）、favicon-16x16.png（ブラウザタブの小さいアイコン）、favicon-32x32.png（ブラウザタスクバー/ブックマーク）、apple-touch-icon.png（iOS Safariのホーム画面追加用180×180）、android-chrome-192x192.pngとandroid-chrome-512x512.png（Android/PWAアイコン）、site.webmanifest（PWA設定ファイルでアイコンとテーマカラーを定義）。

テキストモードでは何文字入力できますか？

1-2文字（アルファベット、数字、漢字）の入力を推奨します。ブランドのイニシャル「G」、2文字の「GF」、または一文字の「極」など。ファビコンはサイズが非常に小さく（16×16ピクセルは幅16ピクセルしかありません）、文字数が多すぎると読めなくなります。ツールは最大2文字まで自動的に切り詰めます。

どのような形式の画像をアップロードできますか？

PNG、JPG/JPEG、WebPの3つの一般的な画像形式に対応しています。アップロード後、ツールは自動的に画像を正方形に中央トリミング（中央の正方形領域を取得）しますので、事前に1:1比率にトリミングする必要はありません。背景がシンプルで明確な正方形のロゴ画像を使用すると最も良い結果が得られます。

生成されたHTMLコードはどのように使いますか？

ZIPをダウンロードして解凍したら、中のすべてのファイルをウェブサイトのルートディレクトリに配置し、ツールが提供するHTMLコード（4行のlinkタグ）をコピーしてウェブページの&lt;head&gt;タグ内に貼り付けるだけです。コードにはfavicon、apple-touch-icon、manifestを含む必要なアイコン参照がすべて含まれています。

円形/角丸/四角形の違いは何ですか？

四角形は伝統的なファビコンスタイルで直角矩形；角丸四角形はモダンなウェブサイトやAppで一般的なスタイル（22%角丸）；円形はソーシャルメディアスタイルやブランドが円形アイコンを要求するシーンに適しています。注意：ファビコンの実際の表示時にはブラウザが独自に角丸やマスクを適用することが多く、3つの形状は主にPWAをデスクトップに追加したときのアイコンの外観に影響します。

透明背景は何に使いますか？

デフォルトは背景色ありのアイコンです；透明背景をオンにすると背景レイヤーは描画されず、テキスト/絵文字/画像自体のみが不透明になります。透明ファビコンはブラウザタブの背景と融合させたい場合や、ロゴ自体が透明背景PNGの場合に適しています。注意：テキスト/絵文字モードで透明背景を使用する場合は、淡い/濃い背景の両方で文字色が明確に見えることを確認してください。

絵文字モードでは任意の絵文字を使えますか？

はい、使えます。任意の絵文字（最大2つ）を直接入力するか、ツールが提供する12のよく使う絵文字（🔥🚀✨🎯💡✅🌈🧠💎📦🪄❤️）からクイック選択できます。絵文字のレンダリングはシステムフォントに依存するため、デバイスによって見た目が多少異なる場合があります。

なぜ複数のサイズのアイコンが必要ですか？

シーンごとに異なるサイズが使用されます：ブラウザタブには16×16、ブックマークバー/タスクバーには32×32、iOSのホーム画面追加には180×180、AndroidデスクトップとPWAには192/512が使われます。favicon.icoだけを配置すると高DPIスクリーンやモバイルではぼやけて見えます。マルチサイズPNGによりどのデバイスでもくっきり鮮明に表示されます。

PWAアイコンの生成に使えますか？

はい、使えます。ZIPパック内のandroid-chrome-192x192.png、android-chrome-512x512.png、site.webmanifestはPWA（プログレッシブウェブアプリ）用に用意されています。webmanifestファイルにはアイコンパスとテーマカラー設定が含まれており、ウェブサイトのルートディレクトリに配置するだけでPWAアイコンの要件を満たします。

アップロードしたロゴ画像はサーバーにアップロードされますか？

いいえ。アイコンの描画、スケーリング、ICO生成、ZIPパッキングはすべてブラウザのローカルでCanvas APIとJSZipライブラリを使用して行われます。画像データはあなたのコンピュータから外に出ることはなく、社内環境や未公開のロゴも安心して使用できます。

作成した16×16の小さいアイコンがぼやけて見えるのはなぜですか？

16×16ピクセルは合計256ピクセルしかなく非常に小さいため、デザインが複雑すぎる（小さい文字が多い、細部が多すぎるなど）と縮小時にどうしてもぼやけてしまいます。ファビコンのデザインはできるだけシンプルにすることを推奨します：1文字、シンプルな図形、または単一の絵文字が最も効果的です。そのためファビコンは通常ブランドロゴの簡略版になります。

ブラウザでファビコンを更新するにはどうすればいいですか？

ブラウザはファビコンをキャッシュします。更新後も古いアイコンが表示される場合は：①ページを強制リフレッシュ（Ctrl+F5/Cmd+Shift+R）；②ブラウザキャッシュをクリア；③faviconのパスにバージョン番号パラメータを追加（favicon.ico?v=2など）することで更新できます。

favicon.icoとPNGアイコンの両方が必要ですか？

モダンブラウザはPNG faviconをサポートしていますが、favicon.icoは古いブラウザ（主にIEシリーズ）と互換性のある伝統的な形式です。最高の互換性のためにツールは両方を生成します。モダンブラウザのみのサポートで十分な場合はPNGだけでも構いませんが、両方配置しておく方が無難です。

SVG faviconには対応していますか？

現在は標準PNG+ICOアイコンパックを生成しています。SVG faviconはモダンブラウザでサポートされていますが、互換性はまだ統一されていません。ツールのZIPはほとんどのシーンをカバーしています。SVGが必要な場合は追加でSVGファイルをHTMLヘッダーに追加してください。

スマートフォンでも使えますか？

はい、使えます。ツールはレスポンシブレイアウトに対応しており、スマホでもパラメータ調整、プレビュー、ダウンロードが可能です。ただしICO生成とZIPパッキングにはスマホブラウザの性能が多少要求されるため、パソコンでの操作がより快適です。

トラブルシューティング

ZIPダウンロード後にブラウザが安全でないと警告しますか？

ZIPファイルはブラウザのローカルでJSZipにより生成されており、サーバーを経由していないため完全に安全です。一部のブラウザがローカル生成ダウンロードについて警告を表示する場合がありますが、「保持」を選択してください。ファイルの内容はすべて画像とJSONテキストで、実行可能コードは含まれていません。

アップロードした画像のプレビューがトリミングされているように見えるのはなぜですか？

ツールはアップロードされた画像を自動的に1:1正方形に中央トリミングします。長方形の画像をアップロードした場合、端が切り取られます。できれば正方形のロゴをアップロードするか、事前にロゴを正方形キャンバスの中央に配置してからアップロードすることを推奨します。

16×16プレビューがぼやけて見えますか？

16×16は確かに非常に小さいサイズです。模様が複雑すぎると必ずぼやけますが、これはツールの問題ではなくサイズ自体の制限です。デザインをシンプルにすることを推奨します：文字を少なく、細部を減らし、コントラストの高い色を使用してください。シンプルな図形は16pxでもはっきり見えます。

ファビコンを置き換えてもブラウザが古いものを表示しますか？

ブラウザはファビコンを強力にキャッシュします。解決方法：①Ctrl+F5/Cmd+Shift+Rで強制リフレッシュ；②新しいタブを開いてアクセス；③ブラウザキャッシュと画像をクリア；④faviconパスにクエリパラメータ ?v=2 を追加して強制更新；⑤プライベートウィンドウで開いて新しいアイコンか確認。

用語集

ファビコン
ウェブサイトアイコン（Favorites Icon）。ブラウザのタブ、ブックマークバー、アドレスバーに表示される小さなアイコンで、ウェブサイトのブランド認知の基本要素。ファイル名は通常favicon.ico。
favicon.ico
伝統的なWindowsアイコン形式ファイル。複数のサイズのアイコンを埋め込むことができ、IEなどの古いブラウザと互換性を持たせるためのもの。モダンブラウザはPNGファビコンもサポートしていますが、icoファイルが最も互換性が高い。
apple-touch-icon
iOS Safariブラウザで「ホーム画面に追加」するときに使用されるアイコン。サイズは180×180ピクセルで、Appleデバイス専用のウェブサイトアイコン。
site.webmanifest
PWA（プログレッシブウェブアプリ）のJSON形式設定ファイル。アプリ名、アイコン、テーマカラー、起動方法などの情報を定義し、モダンなウェブサイトがアプリのような体験を提供するために必須のファイル。
PWA（プログレッシブウェブアプリ）
Progressive Web App。ネイティブAppのようにスマホのデスクトップにインストールできるウェブサイト。大きなサイズのアイコンとmanifest設定ファイルを提供する必要がある。
Canvas API
ブラウザネイティブの2D描画API。本ツールではローカルで各種サイズのアイコンを描画するために使用し、サーバーで画像を処理する必要がない。
JSZip
純JavaScript実装のZIP圧縮ライブラリ。ブラウザのローカルでZIPファイルを作成およびダウンロードでき、本ツールではすべてのアイコンファイルをパックするために使用。
160msデバウンス
パラメータ調整後160ミリ秒待ってからアイコンを再生成すること。スライダーをドラッグするたびにミリ秒単位で再描画してカクつくのを防ぎ、よりスムーズな体験を提供。
中央トリミング
画像アップロード後に自動的に中央の正方形領域を1:1比率でトリミングすること。ユーザーが事前に手動で画像をトリミングする必要がない。
DPI/高解像度スクリーン
高DPIスクリーン（Retinaなど）はCSSピクセルあたり複数の物理ピクセルを持つ。大きいサイズのPNG（32/180/512）を提供することで、高解像度スクリーンでもアイコンがぼやけず鮮明に表示される。
透明背景
アイコンの背景レイヤーを描画せず、前景のテキスト/画像のみを表示。ブラウザタブの背景と融合させることができ、特殊なデザインニーズのあるシーンに適している。
ブラウザキャッシュ
ブラウザはリクエストを減らすためにfaviconファイルをキャッシュする。アイコン更新後に新しいアイコンを表示するには、強制リフレッシュするかバージョン番号パラメータを追加する必要がある。

アイコンサイズ用途対照表

ZIPパック内の各ファイルの用途：

ファイル名サイズ使用シーン
favicon.icoマルチサイズ埋め込み伝統的互換、アドレスバー、IEブラウザ
favicon-16x16.png16×16ブラウザタブの小さいアイコン
favicon-32x32.png32×32タスクバー、ブックマークバー、ショートカット
apple-touch-icon.png180×180iPhone/iPadのホーム画面追加
android-chrome-192x192.png192×192Androidデスクトップアイコン、PWA小アイコン
android-chrome-512x512.png512×512PWA起動画面、インストールポップアップ
site.webmanifestJSONテキストPWA設定ファイル、アイコンとテーマカラーを定義

3つの形状スタイル説明

異なる形状に適したシーン：

形状スタイルの特徴最適なシーン
四角形直角矩形、伝統的クラシック伝統的ウェブサイト、Windowsデスクトップ、管理システム
角丸22%角丸、モダンで丸みのあるモダンなウェブサイト、SaaS製品、モバイルスタイル
円形完全な円形、ソーシャルメディアスタイルソーシャル系製品、パーソナルブランド、Appアイコン

使用可能フォント一覧

テキストモードでサポートされる8種類のシステムフォント：

フォント名種類スタイルの説明
Arialサンセリフ汎用的、モダン、中性、最も安全な選択
Verdanaサンセリフ字幅が広く読みやすい、スクリーン向けに設計
Trebuchet MSサンセリフヒューマニスト、親しみやすく丸みのある
Tahomaサンセリフコンパクト、クリア、Windowsでよく使われる
Georgiaセリフクラシックでエレガント、伝統/リーディング系に適している
Times New Romanセリフクラシックフォーマル、学術/ニュースの伝統的スタイル
Courier New等幅プログラマー/技術的な雰囲気、コードスタイル
Impact太字タイトル太く力強く目立つ、タイトル感が強い

Privacy & Security

本ファビコンジェネレーターのすべてのアイコン描画、形式変換、ICO生成、ZIPパッキングは完全にあなたのブラウザのローカルでCanvas APIとJSZipを使用して行われます。アップロードした画像、入力したテキスト/絵文字、選択した色パラメータがいかなるサーバーにもアップロードされることはなく、記録または保存されることもありません。すべてのファイル生成はローカルメモリ内で行われ、ページを閉じるとすべての一時データは自動的に消去されるため、未公開ロゴ、ブランドデザインデータなどの機密コンテンツも安心して使用できます。

Authoritative References