画像からファビコン一式を
無料でかんたん作成
PNG・JPEG・WebP・SVG画像をアップロードすると、favicon.ico、16×16・32×32のPNG、Apple Touch Icon、Android用アイコン、site.webmanifestをまとめて生成します。設置用HTMLもそのままコピーできます。
初心者向け：最低限、どのサイズを作ればよい？
通常のホームページなら、まずは次の3ファイルを用意すれば基本的な表示に対応できます。
Androidのホーム画面やPWAまで対応しない場合、192×192px・512×512px画像とsite.webmanifestは後から追加しても問題ありません。
1．元画像を選択
2．仕上がりを確認
生成されるファイル
16・32・48pxを格納
小さなブラウザ表示向け
現在のブラウザ向け
180×180px／iPhone・iPad向け
Android・PWA向け
高解像度PWA向け
PWA・ホーム画面追加向け
head内へ貼る設置コード
アップロードした画像はブラウザ内で処理され、このツールのサーバーには送信・保存されません。
ファビコンとは？
ファビコン（favicon）は、Webサイトを識別するための小さなアイコンです。ブラウザのタブ、ブックマーク、スマートフォンのホーム画面、検索結果などに表示され、利用者がサイトを見分けやすくする役割があります。
ファビコンを設定しただけで検索順位が直接上がるわけではありません。ただし、サイトのブランドや運営元を視覚的に伝えやすくなり、検索結果やブラウザ上で見つけてもらいやすい状態を整えられます。
ファビコンに必要なサイズとファイル
| 必須度 | ファイル | サイズ | 主な用途 |
|---|---|---|---|
| 必須 | favicon.ico | 16・32・48px | ブラウザのタブ、ブックマーク、古い環境との互換性 |
| 任意 | favicon-16x16.png | 16×16px | 小さなブラウザ表示向け。ICOがあれば省略可能です |
| 必須 | favicon-32x32.png | 32×32px | 現在のブラウザで使いやすい基本PNG画像 |
| 推奨 | apple-touch-icon.png | 180×180px | iPhone・iPadのホーム画面 |
| 任意 | android-chrome-192x192.png | 192×192px | Androidのホーム画面やPWA |
| 任意 | android-chrome-512x512.png | 512×512px | 高解像度のPWA・ホーム画面 |
| 任意 | site.webmanifest | JSONファイル | PWAやAndroidホーム画面向けの設定情報 |
元画像は、文字や細い線を詰め込みすぎず、正方形で512×512px以上を目安にすると、小さく表示されたときも見やすくなります。
通常の会社サイト・店舗サイト・個人サイトなら、favicon.ico、favicon-32x32.png、apple-touch-icon.pngの3つを設置すれば十分です。PWAを使わない場合、Android用画像とsite.webmanifestは必須ではありません。
ファビコンの作り方・設置方法
- ロゴやアイコン画像をアップロード
正方形に近く、余白が十分ある画像を選びます。 - 表示方法・背景・位置を調整
タブや検索結果のプレビューを見ながら整えます。 - ZIPファイルをダウンロード
必要なサイズとsite.webmanifestがまとめて保存されます。 - ファイルをWebサイトへアップロード
通常はサイトのルートディレクトリへ設置します。 - 生成されたlinkタグをhead内へ追加
トップページを含む各ページからアイコンを参照できるようにします。
Google検索結果にファビコンを表示するためのポイント
- 正方形の画像を使用する
- 小さく表示されてもブランドを識別できるデザインにする
- ファビコンのURLを頻繁に変更しない
- トップページのhead内からファビコンを参照する
- ファビコン画像とトップページをGooglebotが取得できる状態にする
設定しても必ずGoogle検索結果へ表示されるとは限りません。変更後はGoogleがトップページと画像を再クロールするまで、反映に時間がかかる場合があります。
よくある質問
favicon.icoだけ作れば十分ですか？
基本的なブラウザ表示には利用できますが、スマートフォンのホーム画面やPWAにも対応するなら、PNGアイコンとsite.webmanifestも用意する方が安心です。
JPG画像でも作れますか？
はい。PNG、JPEG、WebP、SVGから生成できます。透明背景が必要な場合はPNGまたはSVGの元画像が適しています。
ファビコンが変わらない場合は？
ブラウザのキャッシュが残っている可能性があります。スーパーリロード、キャッシュ削除、ファイル名または参照コードの確認を行ってください。Google検索結果への反映にはさらに時間がかかる場合があります。
WordPressでも使えますか？
利用できます。テーマのheadへ直接設置する方法のほか、WordPressのサイトアイコン設定から画像を登録する方法もあります。利用中のテーマや管理方法に合わせて選んでください。