ファビコンサイズの推奨規格と無料のファビコン作成ツール
ウェブサイトに必要なファビコンサイズの画像を、ブラウザ内で安全に一括生成します。PNGやSVGなどの画像を選択するだけで、PCブラウザ用のfavicon.icoからiOS用のapple-touch-icon、Android用のsite.webmanifestまで自動で作成されます。画像データのサーバー送信やユーザー登録は一切不要で、すべてローカルで処理されます。
画像をドラッグ&ドロップするだけで、各種ブラウザやスマホに必要なファビコンサイズを一括生成します。処理はすべてお使いのブラウザ内で行われ、画像が外部へ送信されることはありません。
ブラウザ内ですぐにファビコンを作成できます。
ファビコン生成ツールを使う →ファビコン作成ツールで画像から一括生成する手順
画像を用意して数ステップ操作するだけで、WEBサイトに必要なファビコン作成セットをZIP形式で取得できます。
- 正方形の画像(256x256px以上を推奨)をツール上にドラッグ&ドロップまたは選択します。
- 必要に応じて余白(パディング)や背景色を調整し、リアルタイムプレビューで表示を確認します。
- ダウンロードボタンを押すと、favicon.icoや各種PNG画像、site.webmanifest、HTMLタグ(favicon-tags.html)がまとめて保存されます。
推奨されるファビコンサイズと出力ファイル
現代のWEB制作では、閲覧環境ごとに異なるファビコンサイズが求められます。本ツールでは以下のファイルを一括で出力します。
- favicon.ico: 16x16、32x32、48x48の画像を1ファイルに内蔵したマルチサイズICOです。旧型ブラウザや確実なフォールバックとして機能します。
- favicon-16x16.png / favicon-32x32.png: デスクトップブラウザのタブ表示用PNG画像です。
- favicon-48x48.png: Google検索結果のアイコン表示で推奨される48pxの倍数サイズです。
- apple-touch-icon.png: 180x180pxのiOSホーム画面用アイコンです。透過部分は自動的に背景色で塗られます。
- icon-192.png / icon-512.png / site.webmanifest: AndroidやPWA環境の「ホーム画面に追加」に対応するアイコンと設定ファイルです。
PNG・SVG画像のfavicon変換と安全なブラウザ内処理
本ツールはPNG、JPG、SVG形式の入力に対応しています。透過背景を保持したPNG画像や、拡大縮小しても劣化しないSVG画像から、鮮明なファビコンを作成できます。
画像の変換処理はすべてブラウザ内のCanvas APIを利用してローカルで生成されるため、画像が外部サーバーへアップロードされることはありません。企業ロゴや未公開プロジェクトの素材でも安心してご利用いただけます。
ファビコン設定方法とルートディレクトリへの配置
ダウンロードしたZIPファイルを解凍し、中身のファイルをすべてWebサイトのルートディレクトリ(公開フォルダ)へ配置します。
次に、同梱されているfavicon-tags.htmlファイルを開き、記載されている<link>タグをWEBページの<head>内に貼り付けます。これで主要なブラウザやスマートフォン環境での表示準備が完了します。
ファビコンが更新されない・反映されない時の対処法
ファビコンを変更・差し替えたにもかかわらず古い画像のまま表示される場合は、ブラウザキャッシュが原因です。
キーボードのCtrl + Shift + R(Macの場合はCmd + Shift + R)を押してスーパーリロード(ハード再読み込み)を実行するか、ブラウザのキャッシュ削除を行って確認してください。
よくある質問
ファビコンの推奨サイズは何ピクセルですか?
現代のウェブサイトでは単一のサイズではなく複数のサイズが必要です。ブラウザタブ用の16x16・32x32px、Google検索結果用の48x48px、iOS用の180x180px、Android用の192x192・512x512pxを設定するのが標準的です。
PNG画像からfavicon.icoに変換・作成するにはどうすればいいですか?
元となるPNG画像を本ツールにドラッグ&ドロップするだけで、自動的にマルチサイズICO形式(16x16、32x32、48x48内蔵)に変換されます。調整機能で背景色や余白を設定した上でZIP一括ダウンロードが可能です。
ファビコンを無料で一括作成できるツールはありますか?
本ツールは完全無料でご利用いただけます。登録不要で、favicon.ico、各種PNG、apple-touch-icon、site.webmanifest、HTMLタグを一括生成できます。
ファビコンを変更したのにブラウザで反映されない・更新されないのはなぜですか?
ブラウザが過去のファビコン画像を強力にキャッシュしていることが主な原因です。キーボードのCtrl+Shift+R(MacはCmd+Shift+R)でスーパーリロードを実行するか、ブラウザの閲覧履歴からキャッシュを削除して再読み込みしてください。
Googleの検索結果にファビコンが表示されない原因と対処法は?
Googleの検索結果には48pxの倍数サイズ(48x48px以上)が要求されます。また、Googleのクローラーがサイトを再巡回してファビコンインデックスを更新するまでに数日から数週間かかる場合があります。
iPhone・iOSのホーム画面用アイコン(apple-touch-icon)のサイズは?
iOS用のapple-touch-iconの推奨サイズは180x180ピクセルです。iOSでは透過背景が黒く表示されてしまうため、背景色を塗りつぶした画像を使用することが推奨されます。
site.webmanifestとは何ですか?なぜ必要ですか?
site.webmanifestは、AndroidやPWA環境でウェブサイトをホーム画面に追加した際の挙動やアイコン(192x192、512x512)を指定するJSONファイルです。適切なアイコン表示やアプリのような動作を実現するために必要となります。
SVG画像をファビコンの元画像として使えますか?
はい、SVG画像を入力として利用できます。ベクターデータのため、小さな16x16pxから大きな512x512pxまで拡大縮小による画質劣化がなく鮮明なファビコン画像が生成されます。
画像をサーバーにアップロードせずに安全にファビコンを作成できますか?
はい、本ツールはすべての画像処理をお使いのブラウザ内(ローカル)で行います。画像ファイルが外部サーバーに送信されたり保存されたりすることは一切ありません。