本文へスキップ
にゃんこツール
EN

favicon（ファビコン）一括生成

画像を1枚選択するだけで、favicon.ico（16px・32px・48pxを1ファイルに格納）と、favicon-16x16.png・favicon-32x32.png・favicon-48x48.png・apple-touch-icon.png（180px）・android-chrome-192x192.png・android-chrome-512x512.pngをまとめて生成します。長方形の画像は中央を基準に正方形へ自動的に切り抜かれますが、プレビュー上の枠をドラッグして切り抜く位置を調整することもできます。生成したファイルをHTMLで読み込むための<link>タグも合わせて出力します。フォーマット変換のみでよい場合は画像フォーマット変換もご利用ください。

🔒 ブラウザ内で完結・入力データはサーバーに送信されません

ここに画像ファイルをドラッグ＆ドロップすることもできます（正方形の画像推奨、512×512px以上を推奨）

使い方

  1. 元になる画像を選択します（正方形で512×512px以上を推奨します）。
  2. プレビュー上の枠をドラッグして、切り抜く範囲を調整します。
  3. 生成されたfavicon.icoや各サイズのPNGを、必要なものだけダウンロードします。
  4. 「HTML貼り付け用コード」をコピーして、サイトのheadに貼り付けます。

注意点

  • 長方形の画像を選択した場合、初期状態では中央を基準にした正方形の範囲が使われますが、プレビュー上の枠をドラッグして切り抜く位置を調整できます。枠の大きさ（一辺の長さ）自体は変更できないため、ロゴ全体を確実に含めたい場合は、あらかじめ正方形にトリミングした画像を用意してください。
  • 透過（アルファチャンネル）情報がある画像はそのまま透過を維持して書き出されます。背景色を敷きたい場合は、事前に背景色を合成した画像を用意してください。
  • favicon.icoは16px・32px・48pxの3サイズを1ファイルに格納した、Windows Vista以降が対応するPNG格納形式のICOファイルです。非常に古いブラウザ・OS（Windows XP時代のIEなど）では表示できない場合があります。
  • android-chrome-192x192.png・android-chrome-512x512.pngは、PWA（ホーム画面への追加）用のWeb App Manifest（manifest.json）から参照する想定のサイズです。本ツールは画像ファイルのみ生成し、manifest.json自体は生成しません。
  • すべての処理はブラウザ内で完結し、選択した画像がサーバーに送信されることはありません。

用語解説

favicon（ファビコン）

ブラウザのタブやブックマーク一覧、履歴などに表示される、サイトを表す小さなアイコン画像のこと。"favorite icon"の略。

ICO形式

Windowsのアイコンで使われるファイル形式。1つのファイルに複数サイズ・複数解像度の画像を格納でき、表示先に応じて適したサイズが自動的に選ばれます。

Apple Touch Icon

iOS/iPadOSでWebページをホーム画面に追加した際に使われるアイコン画像。180×180pxが現在の推奨サイズです。

Web App Manifest

PWA（Progressive Web App）の名前・アイコン・テーマカラーなどを定義するJSONファイル（manifest.json）。ホーム画面追加時のアイコンや起動時の見た目に使われます。

よくある質問

どのサイズのファイルが生成されますか？

favicon.ico（16・32・48pxを1ファイルに格納）、各サイズのPNG、apple-touch-icon.png（180px）、android-chrome-192x192.pngと512x512.pngをまとめて生成します。

どのくらいの大きさの元画像を用意すればよいですか？

正方形で、できれば512px以上の画像がおすすめです。長方形の画像を選ぶと、中央を基準にした正方形の範囲が使われ、枠をドラッグして切り抜き位置を調整できます。

manifest.jsonも作られますか？

いいえ。このツールが生成するのは画像ファイルのみで、manifest.json自体は作成しません。android-chromeの画像は、ご自身で用意したmanifest.jsonから参照してください。

このページをシェア

XfLINEThreadsBlueskyRedditB!

↑↓ 選択　Enter 開く　Esc 閉じる