仕組み

ソースを選択

画像をアップロード、カスタムフォントでテキストから作成、数百の絵文字から選択、またはピクセルアートを描画します。任意の URL を分析して既存の Favicon を抽出します。

カスタマイズ & プレビュー

背景、グラデーション、丸み、効果を調整します。ブラウザタブ、iOS ホーム画面、Android、Windows モックアップで Favicon をリアルタイムでプレビューします。

生成 & ダウンロード

ワンクリックですべてのサイズを生成します。35 以上のフレームワーク用のすぐに使えるコードスニペットを含む完全なパッケージをダウンロードします。

Favicon を作成する 4 つの方法

画像をアップロード

PNG、JPG、SVG、WebP などの任意の画像から開始します。背景を追加し、パディング、明るさ、コントラストを調整し、角丸を適用します。ロゴや既存のブランド資産に最適です。

テキストから Favicon

1500 以上の Google Fonts でテキストベースの Favicon を作成します。フォントの太さ、色を選択し、ソリッドまたはグラデーションの背景を追加します。シンプルな文字ベースのブランドアイコンに最適です。

絵文字 Favicon

すべての国旗を含む 12 カテゴリの数百の絵文字から選択します。プリセットまたはカスタムグラデーションを使用して色付きの背景を追加し、洗練された外観にします。

ピクセルアートキャンバス

カスタマイズ可能なグリッド上でピクセルごとに独自の Favicon を描画します。元に戻す/やり直しのサポート付きで、ペン、消しゴム、塗りつぶしツールを使用します。ピクセルアート作品を即座にエクスポートします。

強力な機能

100% プライベート

すべての処理はブラウザ内でローカルに行われます。画像がデバイスを離れることはありません。アップロード、クラウドストレージ、データ収集はありません。

全プラットフォーム対応

ブラウザ、iOS ホーム画面、Android Chrome、Windows タイル、Safari ピン留めタブ、Progressive Web Apps 用に 15 以上の Favicon サイズを生成します。

ライブプレビュー

生成する前に、ブラウザタブ、iOS ホーム画面、Android ランチャー、Windows タイルで Favicon がどのように見えるかを正確に確認します。

35+ フレームワーク用スニペット

HTML、React、Vue、Next.js、Nuxt、Angular、Astro、Svelte、WordPress、Shopify、Laravel、Django、および 25 以上のプラットフォーム用のすぐに使えるコードを取得します。

URL アナライザー

任意のウェブサイトを分析して既存の Favicon を抽出します。どのサイズが存在し、何が欠落しているかを確認し、ワンクリックで完全なセットを再生成します。

生成履歴

最近の Favicon 生成にアクセスします。以前の作品を復元し、バージョンを比較し、中断したところから編集を続けます。

クイックテンプレート

ソリッドカラー、グラデーション、パターンを備えたプロがデザインしたテンプレートから始めます。ブランドに合わせて適用およびカスタマイズします。

マルチサイズ ICO

最大のブラウザ互換性のために 16x16、32x32、48x48 サイズを埋め込んだマルチ解像度 ICO ファイルを自動的に作成します。

完全な出力パッケージ

標準 Favicon

ブラウザタブとブックマーク用の favicon.ico（マルチサイズ）、16x16、32x32、48x48 PNG。

Apple Touch アイコン

iOS ホーム画面用の 180x180 Apple Touch アイコン、およびカスタマイズ可能なテーマカラー付きの Safari ピン留めタブ SVG。

Android & PWA アイコン

Android Chrome および Progressive Web Apps 用の 192x192 および 512x512 アイコン（Maskable アイコンサポートを含む）。

Windows タイル

Windows スタートメニューとタスクバー統合用の browserconfig.xml 付き 270x270 Microsoft タイル。

ウェブマニフェスト

アイコン参照、テーマカラー、PWA 表示設定を含む完全な site.webmanifest ファイル。

よくある質問

どの Favicon サイズが必要ですか？

最小限：favicon.ico、32x32 PNG、180x180 Apple Touch アイコン、および Android/PWA 用 192x192/512x512。当社の「必須」プリセットには、必要なすべてのサイズが自動的に含まれています。

なぜ ICO ファイルが必要なのですか？

ICO 形式は 1 つのファイルに複数のサイズを含み、古いバージョンを含むすべてのブラウザでサポートされています。これは最大の互換性を保証する従来の Favicon 形式です。

Favicon の背景は透明にすべきですか？

ブラウザタブの場合、透明性がうまく機能します。iOS および Android ホーム画面の場合、アイコンはさまざまな壁紙上に表示されるため、ソリッドまたはグラデーションの背景を検討してください。

ソース画像は正方形である必要がありますか？

はい、Favicon は常に正方形です。画像が正方形でない場合は、パディングとスケールコントロールを使用して完全にフィットさせてください。最良の結果を得るには、正方形の画像から始めてください。

私の画像は安全でプライベートですか？

100% プライベートです。すべての処理はブラウザネイティブの Canvas および Blob API を使用します。画像がデバイスを離れることはありません。データをアップロード、保存、送信することはありません。

どのフレームワークがサポートされていますか？

React、Vue、Angular、Next.js、Nuxt、Astro、Svelte、WordPress、Shopify、Laravel、Django、Ruby on Rails など、35 以上のプラットフォーム用のコードスニペットを提供しています。

Progressive Web Apps についてはどうですか？

当社のジェネレーターは、Maskable バリアントを含む必要なすべての PWA アイコンと、正しいアイコン宣言とテーマカラーを含む完全な site.webmanifest ファイルを作成します。

Favicon について

Favicon は、ブラウザ、ブックマーク、ホーム画面、アプリランチャーでウェブサイトを表す小さなアイコンです。完全な Favicon セットにより、ユーザーがサイトに出会うすべての場所でブランドがプロフェッショナルで認識しやすくなります。

ICO 形式

ICO 形式は、複数のサイズ（16x16、32x32、48x48）を 1 つのファイルにパッケージ化します。最新のブラウザは PNG Favicon をサポートしていますが、ICO は古いブラウザや特定のデスクトップアプリケーションとの最大限の互換性のために依然として不可欠です。

PNG アイコン

最新のブラウザは、鮮明な品質と透明度のサポートのために PNG Favicon を好みます。各サイズには目的があります：ブラウザタブ用に 16px と 32px、iOS 用に 180px、Android と PWA 用に 192px/512px。

ウェブアプリマニフェスト

site.webmanifest ファイルは、サイトが PWA としてインストールされたときの外観を定義します。ブラウザがアプリのような体験を作成するために使用するアイコン、テーマカラー、表示モード、その他のメタデータを指定します。

SVG Favicon

Safari のピン留めタブ機能は、モノクロ SVG アイコンを使用します。最新のブラウザも SVG Favicon を直接サポートし始めており、無限のスケーラビリティとより小さなファイルサイズを提供しています。