English 日本語
⚡ 100% クライアント処理 • 統合マルチ解像度ICO • スマホ用アイコン対応

ファビコン 作成 — favicon.ico&PNG一括生成

ロゴや画像からWebサイト用のファビコンパッケージを瞬時に無料生成。16・32・48pxを内包した正規Windows .icoコンテナ、iPhone用アプリアイコン、Android用PWAアイコン、コピペ用HTMLコードを完備。

ここにロゴや画像をドラッグ&ドロップしてファビコン生成
またはクリックして端末からファイルを選択
対応形式: PNG, JPG, WebP, SVG, AVIF, BMP • 1ファイル最大50MB • 完全ブラウザ完結

生成されたファビコン一覧

プレビュー背景:
HTML実装コード(<head>用)

生成したファビコンファイルをWebサイトのルート階層に配置し、以下のタグをHTMLの <head> 内に貼り付けてください:

オンラインでファビコン(favicon)を生成する3つの手順

マルチサイズ対応の.icoファイル、PNGアイコン、Apple Touch Iconをブラウザ上で一括生成します。

1

ロゴ・画像をアップロード

高解像度のPNG、SVG、JPG、WebP形式のロゴ画像をワークベンチにドラッグ&ドロップまたは貼り付け(Ctrl+V)します。

2

各サイズのプレビュー確認

ブラウザタブ(16x16、32x32)、iOSホーム画面(180x180)、Android PWA(192x192)での表示品質を確認します。

3

ファビコン一式をダウンロード

マルチサイズfavicon.ico、各種PNG、site.webmanifest、コピペ用HTMLが揃ったZIPを一括保存します。

最新ファビコン(Favicon)の工学的設計:バイナリ.ICO構造・PWAマニフェスト・マルチデバイス最適化

ファビコン(Favicon / Favorite Icon)は、Webサイトのアイデンティティを象徴する極小グラフィックシンボルです。1999年にMicrosoftのInternet Explorer 5がWebサーバーのルート直下に置かれた $16 \times 16$ ピクセルの favicon.ico を読み込んだことから始まりましたが、現在ではスマートフォンや高精細ディスプレイの普及に伴い、極めて複雑かつ多面的なデバイスエコシステムへと発展しています。

現代のWeb環境において、ファビコンはPCブラウザのタブ、Retinaディスプレイのブックマークバー、Windowsのタスクバーピン留め、iOS Safariのホーム画面ショートカット(Apple Touch Icon)、AndroidのPWAアプリアイコン、そしてGoogle検索結果(SERP)のサイトスニペット横など、実に多様な解像度と文脈で表示されます。単一の低解像度アイコンしか設置していない場合、高精細画面でぼやけたり、検索結果に地球儀のデフォルトアイコンが表示されてクリック率を落とす原因になります。

Windows .ICO形式のバイナリ構造:複数解像度を内包するコンテナ技術

Windowsアイコン形式(.ico、MIMEタイプ: image/x-icon)は、JPEGやPNGのような単一の画像圧縮規格ではありません。1つのバイナリファイルの中に、異なる解像度や色深度の複数画像を同時にパッケージ化できるリソースコンテナ形式です。

正常なマルチサイズ .ico ファイルは、以下の3つのバイナリ層で構成されています:

  1. ICONDIR ヘッダー(6バイト): ファイル形式を識別します:
    予約領域: 0x0000(2バイト、固定値0)
    リソース種別: 0x0001(2バイト、1=ICO、2=CUR)
    格納画像数: 0x0003(2バイト、例: 16px・32px・48pxの3個格納)
  2. ICONDIRENTRY ディレクトリ配列(各画像あたり16バイト): 幅・高さ、色数、色プレーン数、ビット深度(32bit RGBA)、データサイズ、ファイル先頭からのオフセット位置を記述した目次データです。
  3. 画像ペイロード実データ: 各解像度のビットマップデータ(DIB形式または透過アルファ情報付きPNGストリーム)が格納されます。

ブラウザが /favicon.ico を要求すると、OSや画面のスケーリング設定(等倍画面なら16x16、Retinaなら32x32、タスクバーなら48x48)に最も適合する解像度レイヤーをコンテナ内から自動抽出するため、再サンプリングによるボケを生じさせずに常に極めて鮮明な表示が実現します。

現代のWeb標準ファビコンパッケージ仕様一覧

あらゆるOS、ブラウザ、モバイル端末、検索エンジンに完全対応するため、当ツールのファビコンジェネレーターは以下の標準アセット一式を自動生成します:

ファイル名 解像度 フォーマット 用途・対象プラットフォーム
favicon.ico 16×16, 32×32, 48×48 マルチサイズ .ICO 全PCブラウザのタブ・ブックマーク、サーバールートの必須フォールバック
favicon-16x16.png 16 × 16 px 32bit 透過PNG 標準ディスプレイ(等倍環境)のモダンブラウザタブ表示
favicon-32x32.png 32 × 32 px 32bit 透過PNG Mac Retinaディスプレイ、高DPI WindowsノートPCのブラウザタブ
apple-touch-icon.png 180 × 180 px 32bit PNG(背景付) iPhone / iPadのSafariで「ホーム画面に追加」した時のアプリアイコン
android-chrome-192x192.png 192 × 192 px 32bit 透過PNG Android PWAホーム画面アイコンおよびGoogle検索結果表示
android-chrome-512x512.png 512 × 512 px 32bit 透過PNG PWA起動時のスプラッシュスクリーン画面および高精細ストア用

Google検索(SERP)のファビコン表示要件

Googleの検索結果一覧において、WebサイトのURL横に表示されるファビコンは、検索エンジンのクローラー(Googlebot-Image)によってインデックスされます。Googleは以下の技術仕様を公式に定めています:

  • 48ピクセルの倍数であること: $48 \times 48$、$96 \times 96$、$144 \times 144$、$192 \times 192$ ピクセルなどの正方形画像が推奨されます。
  • HTML内のタグ明記: <link rel="icon" ...> または <link rel="shortcut icon" ...> で指定され、URLが固定されていること。
  • クローラーへの公開: robots.txtでアイコンファイルのアクセスをブロックしていないこと。

当ツールの生成パッケージには48pxおよび192pxのサイズが完全に含まれており、Google検索結果へのファビコン反映要件を確実に満たしています。

Webサイトへの組み込みHTMLコード

生成されたZIPファイルを解凍し、サーバーのルートディレクトリに配置した上で、HTMLの <head> 内に以下のタグを貼り付けてください:

<!-- ルート直下のフォールバック(旧ブラウザ・サーバー直アクセス用) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<!-- モダンブラウザのタブ用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">

<!-- iOS Safari ホーム画面アイコン -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android PWA マニフェストファイル -->
<link rel="manifest" href="/site.webmanifest">

安心の完全クライアントサイド実行:プライバシー保護

企業のCIロゴ、ブランドマーク、未発表サービスのアイコン画像などを外部のクラウドサーバーへ送信してファビコン変換することには、機密漏洩の懸念が伴います。当サイトのファビコンジェネレーターは、HTML5 CanvasとJavaScriptの高速なインメモリ演算を活用し、100%お使いのブラウザ内部でアイコンのリサイズ、.ICOバイナリ構築、ZIP圧縮を実行しています。画像データが外部サーバーへ送信・記録されることは一切ありませんので、安心して安全にご利用いただけます。

よくある質問(FAQ)

ファビコンの形式、Google検索での表示要件、Webサイトへの設置方法について解説します。

favicon.ico と PNGファビコンの違いは何ですか?
favicon.icoは1つのファイル内に複数の解像度(16x16、32x32、48x48等)を同時にパッケージ化できるWindows発祥のコンテナ形式です。PNGファビコンは単一解像度の軽量画像で、モダンブラウザやHTML5環境で標準的に使用されます。両方を用意することが推奨されます。
1つのfavicon.icoに複数のサイズ(16x16、32x32、48x48)を含めるべき理由は?
ディスプレイの解像度(DPI)に応じて最適なサイズをOSやブラウザが自動選択するためです。標準画面では16x16が使われ、MacのRetinaディスプレイでは32x32、デスクトップのタスクバーでは48x48が選ばれるため、ボケやジャギーのない鮮明な表示が維持されます。
Apple Touch Icon や Android PWA アイコンの規定サイズは何ですか?
Apple iOS Safari用のホーム画面アイコン(apple-touch-icon.png)は180 × 180ピクセルです。AndroidのChromeやPWAアプリ用には、android-chrome-192x192.png(ホーム画面用)および512x512.png(スプラッシュ起動画面用)が必要です。
Googleの検索結果一覧(SERP)にファビコンを表示させるための条件は?
Googlebotがクロール可能な状態で、48の倍数(48x48、96x96、192x192など)の正方形アイコンがHTMLの<head>内で指定されている必要があります。当ツールの生成パッケージには48pxおよび192pxが含まれており、要件を完全に満たしています。
生成されたファビコン一式をWebサイト(WordPressや静的HTML)に設置する方法は?
ダウンロードしたZIPファイルを解凍し、サーバーのWebルート(公開フォルダ直下)へ全ファイルをアップロードします。その後、案内されているHTMLコードをWebサイトの<head>タグ内に貼り付けて保存すれば完了です。
16x16ピクセルに縮小した際にロゴが潰れて文字が読めなくなるのを防ぐには?
16x16は全体でわずか256ピクセルしかありません。社名などの細かい文字列や複雑なグラデーションは潰れてしまうため、ファビコン用にはシンボルマークのみ、またはイニシャルの1文字など、コントラストの高いシンプルな幾何学デザインを使用することが鉄則です。
Apple Touch Iconの四隅をあらかじめ丸く切り抜いておく必要はありますか?
いいえ、事前に角丸にする必要はありません。iOSはホーム画面に追加されたアイコンに対して自動的に角丸マスク(スーパー楕円)と光沢エフェクトを適用します。正方形いっぱいに背景色を敷いた画像を用意するのがベストです。
アップロードした企業ロゴやイラストが外部サーバーへ送信される心配はありますか?
一切ありません。すべての画像リサイズ演算、マルチサイズ.icoバイナリ構築、ZIPファイルの生成処理は、お客様のブラウザ内部のJavaScriptでローカルに完結します。データが外部へ送信されることはなく、著作権とプライバシーは完全に保護されます。