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

favicon.ico（16・32・48px）、16・32・96px の PNG、iPhone 用 180px の apple-touch-icon、Android 用 192・512px とそれを指定する site.webmanifest を作ります。

どの形式をアップロードすればいいですか？

正方形に近い PNG か SVG が最適で、短い辺が 512px 以上あれば最大のアイコンも鮮明です。長方形の画像はドラッグして使う部分を選べます。

ファイルをサイトのルートフォルダにアップロードし、表示された HTML コードをページの head 内に貼り付けてください。

画像を1枚入れると、favicon.ico と各サイズのPNG、Webアプリ用の設定ファイル、HTMLに貼るコードまでまとめて作ります。作業はブラウザの中だけで行われます。

ファビコンはブラウザのタブに出る小さな画像ですが、必要なファイルは1つではありません。タブ用の16pxと32px、検索結果用の96px、iPhoneのホーム画面用の180px、Androidとアプリ用の192pxと512px。それぞれ用途が違います。

このツールは正方形に切り抜いたうえで、これらを一度に書き出します。旧来の favicon.ico には16・32・48pxを1つのファイルにまとめて入れます。

ファビコンが実際に表示されるのは、多くの場合16pxの正方形です。指の爪より小さい面積に、ロゴの細部は入りません。社名を全部入れた画像を縮めると、ただの灰色の四角になります。

うまくいくのは、頭文字1文字、記号1つ、単純な図形です。線は太く、色の差は大きく。背景と図の明暗をはっきり分けると、小さくしても形が残ります。

書き出したあとは、実際にタブに並べて確認してください。他のタブと見分けがつかなければ、ファビコンとしての役目を果たしていません。

PNGは透過のまま書き出します。タブの背景色が明るくても暗くても、図だけが乗ります。

ただしiPhone用の apple-touch-icon だけは透過を使いません。透明な部分がある画像をホーム画面に置くと黒く塗られてしまうため、背景色で塗りつぶした状態で書き出します。

Webアプリとしてホーム画面に追加されたときの名前とテーマ色を指定すると、設定ファイル（site.webmanifest）も一緒に作ります。HTMLに貼るコードも表示されるので、そのまま head の中に入れてください。

どんな画像を用意すればよいですか？

正方形に近く、512px以上あると余裕があります。細かい線や小さな文字は16pxで消えるので、単純な図柄を選んでください。

favicon.ico は今も必要ですか？

PNGだけでもほとんどのブラウザは表示しますが、ico をルートに置いておくと古い環境や一部のサービスでも確実に読まれます。

変更したのに古いアイコンが出ます。

ブラウザのキャッシュです。強制再読み込みか、シークレットウィンドウで確認してください。

画像はアップロードされますか？

されません。すべてブラウザの中で処理されます。