ヘルプ

ファビコンの推奨サイズと一括生成ツール

画像1枚をドラッグ＆ドロップするだけで、各種ブラウザやGoogle検索、スマホのホーム画面に必要なファビコンサイズのセットをブラウザ上で一括生成します。ファビコン生成ツールは、外部サーバーに画像を一切送信せず、Canvas APIを利用して完全ローカルで処理を行うため、ロゴや画像を安全かつ無料で変換できます。favicon.ico、PNG、apple-touch-icon.png、site.webmanifest、HTMLスニペットを含むZIPパッケージを瞬時に作成します。

ファビコンの推奨サイズとパッケージ内容

Webサイトには端末や表示場所に応じた複数のファビコンサイズが必要です。本ツールでは、主要なプラットフォームに必要なサイズを一括で出力します。

ファビコン作成と変換の手順

ファビコン生成ツールの使い方はシンプルです。登録不要ですぐに利用できます。

  1. ロゴや画像ファイルを指定領域にドラッグ＆ドロップするか、タップして選択します（256x256ピクセル以上の正方形画像が最適です）。
  2. プレビューで表示を確認し、必要に応じて調整を開き、パディング（余白）や背景色を設定します。
  3. ダウンロードボタンを押すと、すべての画像ファイルとsite.webmanifest、favicon-tags.htmlがまとまったZIP形式で保存されます。

PNGやSVG画像からのファビコン作成

本ツールは多様な入力フォーマットに対応しています。PNG（透過維持）をはじめ、SVG（ベクター描画）、JPG、WebP、GIF（1フレーム目を使用）からの変換が可能です。

正方形でない画像を入力した場合は中央に配置されます。端に寄りすぎないよう、調整機能でパディングを追加することも可能です。

ファビコンの設定方法とHTML記述

ダウンロードしたZIPファイルを解凍し、Webサイトのルートディレクトリ（ルートフォルダ）にすべてのファイルを配置します。次にfavicon-tags.htmlを開き、中に記述されている<link>タグを<head>内に貼り付けます。

設定後に表示が更新されない場合は、ブラウザの強力なキャッシュが原因である可能性があります。スーパーリロード（Ctrl+Shift+RまたはCmd+Shift+R）やシークレットモードでの確認をお試しください。

iOSホーム画面用アイコンの表示仕様

iOSのホーム画面用（apple-touch-icon.png）は透明背景に対応していません。そのため、本ツールでは調整パネルで指定した背景色（未指定の場合は白色）で自動的に背景を塗りつぶして出力します。

これにより、透過PNGを素材とした場合でも透過部分が黒く塗りつぶされることなく、意図した通りのアイコンが生成されます。

よくある質問

PNG画像からファビコンを作成・変換できますか？

はい、PNG画像からファビコンパッケージを一括作成できます。PNGは透明度を維持できるためファビコンの素材として最適です。鮮明なアイコンを生成するために、256x256ピクセル以上の正方形のPNG画像を使用することをおすすめします。

ファビコンの最適なサイズ（推奨サイズ）は何ピクセルですか？

単一のサイズではなく、用途に応じた複数のサイズが必要です。ブラウザタブ用の16x16や32x32、Google検索結果用の48x48、iOSホーム画面用の180x180（apple-touch-icon）、Android用の192x192や512x512などが使われます。本ツールではこれらを一括生成します。

無料でWebサイト用のファビコンを作るにはどうすればいいですか？

本ツールに画像ファイルをドラッグ＆ドロップし、必要に応じて余白や背景色を調整してZIPファイルをダウンロードするだけで作成できます。アカウント登録やサーバーへの画像アップロードは不要で、すべての処理が無料かつお使いのブラウザ上で完結します。

favicon.ico ファイルとは何ですか？PNG形式と何が違いますか？

favicon.ico は複数の解像度を1つのファイルに格納できる従来のアイコン形式です。PNG形式はサイズごとに個別ファイルとなり、鮮明な表示に対応します。互換性を確保するために両方を設置することが推奨されており、本ツールではその両方を出力します。

SVG形式の画像をファビコンとして使えますか？

はい、SVG形式のベクター画像を元画像として読み込ませることができます。本ツールで各出力サイズに合わせて高精度にラスタライズされるため、元画像がSVGであってもすべてのブラウザで互換性のあるICOおよびPNGファイルとして出力されます。

iPhoneやiPad（iOS）のホーム画面用アイコンにも対応していますか？

はい、180x180ピクセルのapple-touch-icon.pngがパッケージに含まれています。iOSの仕様上、ホーム画面用アイコンは背景の透過をサポートしないため、調整パネルで指定した背景色または白色で自動的に背景が補完されます。

site.webmanifest とは何ですか？なぜ必要ですか？

site.webmanifest は、Webサイトをスマートフォンのホーム画面に追加した際のアプリ挙動やアイコン（192x192、512x512）を定義するJSONファイルです。AndroidのChromeなどでPWAとして正しく認識・表示させるために使用されます。

ファビコンを設定・変更したのにブラウザで反映されないのはなぜですか？

ブラウザが旧アイコンを強力にキャッシュしていることが主な原因です。スーパーリロード（Ctrl+Shift+R / Cmd+Shift+R）を実行するか、シークレットモードでページを開くことで最新の表示を確認できます。

おすすめ

無料でツールを続ける支えになります。✨

画像はイメージです。 Amazonのアソシエイトとして、Capsule Toolsは適格販売により収入を得ています。

関連ツール

アプリスクリーンショット作成器

App Store・Playストア用の枠付き画像を生成

Web用画像変換

RAW、HEIC、DNGをWeb用JPGに変換

画像圧縮

JPG、PNG、WebPを圧縮・変換

画像カラーピッカー

写真からHEX、RGB、色名を取得

CSSボタンジェネレーター

ボタンをデザインしHTML/CSS/Tailwindコードをコピー