Faviconチェッカー
Favicon画像をアップロードして、すべての標準サイズ、ブラウザタブ、ブックマーク、PWA画面での表示をプレビューします。
このツールについて
Faviconチェッカーは、画像をアップロードするだけで、すべての標準Faviconサイズでの表示を即座にプレビューできる無料のブラウザベースツールです。Faviconはブラウザタブ、ブックマークバー、モバイルホーム画面、プログレッシブWebアプリのスプラッシュスクリーンに表示される小さなアイコンです。すべてのプラットフォームで正しく表示されることは、洗練されたユーザー体験に不可欠です。
このツールは、アップロードされた画像を6つの標準サイズにリサイズします：16x16（従来のブラウザタブ）、32x32（Retinaブラウザタブ）、48x48（Windowsタスクバー）、180x180（Apple Touch Icon）、192x192（Android Chrome）、512x512（PWAスプラッシュスクリーン）。HTML Canvas APIを使用した高品質なダウンスケーリングにより、本番環境でアイコンがどのように表示されるかを正確に確認できます。
単純なリサイズに加えて、3つのリアルなモックアッププレビューが含まれています。ブラウザタブモックアップはChromeやFirefoxのタブバーを再現し、アクティブなタブと非アクティブなタブの横にFaviconを表示します。ブックマークバーモックアップはブックマークされたサイトの横にアイコンを表示します。PWA / モバイルホーム画面モックアップはスマートフォンのホーム画面でアイコンがどのように表示されるかをシミュレートします。
すべての処理はブラウザ内で完全に実行されます。サーバーへのデータアップロード、アカウント作成、画像の記録は一切ありません。Faviconをゼロから作成する必要がある場合は、Faviconジェネレーターをお試しください。サイトがソーシャルメディアでどのように表示されるかを確認するには、Open Graphプレビューツールをご覧ください。
使い方
- アップロードエリアをクリックするか、画像ファイル（PNG、SVG、ICO、JPEG、WebP）をドラッグ＆ドロップします。
- ツールが即座に6つの標準Faviconサイズにリサイズし、グリッドで表示します。
- 各サイズのプレビューを確認し、小さいサイズでのぼやけ、クリッピング、ディテールの損失をチェックします。
- 下にスクロールしてブラウザタブプレビューでリアルなタブバーモックアップでのFaviconを確認します。
- ブックマークバープレビューで他のブックマークサイトの横での表示を確認します。
- PWA / モバイルホーム画面プレビューでスマートフォンでのアイコン表示を確認します。
- HTMLをコピーをクリックして、すべてのサイズの
<link>タグをクリップボードにコピーします。 - 個別サイズのダウンロードまたはAll PNGsをクリックして、リサイズされた全バージョンをダウンロードします。
- キーボードショートカット Ctrl+Shift+C でHTMLタグを素早くコピーできます。
人気のFavicon例
よくある質問
データは安全ですか？
はい。すべての画像処理はHTML Canvas APIを使用してブラウザ内で完全に実行されます。画像がサーバーにアップロードされたり、保存・記録されることはありません。非公開プロジェクトやリリース前のプロジェクトのFaviconも安全にチェックできます。
どの画像形式をアップロードできますか？
PNG、SVG、ICO、JPEG、WebP、およびその他のブラウザがサポートする画像形式をアップロードできます。Faviconには透明度をサポートするPNGが推奨されます。SVGも解像度に依存しないため優れた選択肢です。
16x16でFaviconがぼやけて見えるのはなぜですか？
16x16ピクセルでは利用可能なディテールが非常に少なくなります。複雑なロゴや細かい文字を含む画像はぼやけて表示されます。小さいサイズで最良の結果を得るには、コントラストの高いシンプルで太い デザインを使用してください。
実際にどのサイズが必要ですか？
最低限、デスクトップブラウザ用に16x16と32x32、Appleデバイス用に180x180、Android用に192x192が必要です。サイトがプログレッシブWebアプリの場合は512x512の追加が推奨されます。48x48はWindowsのタスクバーとショートカットアイコンに使用されます。
Faviconは正方形にすべきですか？
はい。Faviconは常に正方形にすべきです。正方形でない画像をアップロードすると、各正方形サイズに合わせて引き伸ばされ、表示が歪む可能性があります。最良の結果を得るには、アップロード前に画像を1:1のアスペクト比にトリミングしてください。
favicon.icoとPNG Faviconの違いは何ですか？
ICO形式は単一ファイルに複数のサイズを含めることができるレガシー標準です。モダンブラウザは<link>タグを介したPNG Faviconをサポートしており、より良い圧縮と透明度を提供します。現在ほとんどの開発者は各サイズにPNGファイルを使用し、古いブラウザの互換性のためにオプションでICOファイルを含めています。
HTMLにFaviconタグを追加するにはどうすればよいですか？
HTMLをコピーボタンをクリックして、すべてのサイズの完全な<link>タグセットを取得します。HTMLドキュメントの<head>セクションに貼り付けてください。Next.jsやその他のフレームワークでは、Faviconファイルをpublicディレクトリに配置し、レイアウトコンポーネントにタグを追加します。
関連ツール
ファビコン生成
テキストや絵文字からカスタム背景色付きでファビコンを生成します。Web用の複数サイズをエクスポート。
メタタグ生成ツール
HTMLメタタグ、Open Graph、Twitter Cardタグをライブプレビュー付きで生成します。
OGプレビュー
URLがソーシャルメディアでどのように表示されるかをプレビューします。Open GraphとTwitter Cardメタタグを取得・表示。
画像リサイズツール
ブラウザ内でカスタムサイズで画像をリサイズ。アスペクト比維持、出力形式選択、バッチ処理対応。
画像圧縮ツール
ブラウザ内で品質やリサイズ設定付きで画像を圧縮します。前後のファイルサイズを比較できます。