ブラウザのまま多サイズ ICO ファビコンを作る

favicon ICO に含めるべきもの

従来の favicon.ico には複数解像度が入り、Retina タブ・ブックマーク・デスクトップショートカットでもくっきり見えます。16×16 だけを拡大表示すると、ぼやけて古臭く見えがちです。

WebP.Best では Favicon（16/32/48）、Standard（64 追加）、Full（最大 256）などのパックがあり、各サイズを手作業で書き出さなくても一般的なブラウザや Windows の要件に合わせられます。

• ブラウザタブ → Favicon パックの小さいサイズ
• ショートカット / 一部 OS 表示 → Standard または Full
• 元画像 → できるだけ輪郭のはっきりした正方形ロゴやマーク

元画像の準備

正方形またはほぼ正方形で、端がきれいなマスターから始めましょう。透過 PNG や WebP が向いています。情報量の多い写真は 16px アイコンに向きません。先にシンプル化するか、マーク部分に切り抜いてください。

横長のワードマークだけの場合、正方形にすると余白や切り抜きが出ます。変換前に、シンボルにするか頭文字マークにするか決めておきましょう。

WebP.Best での手順

トップのコンバーターを開き、ロゴファイルを追加します（透過 PNG または WebP が最適）。出力形式は ICO。

サイズパックを選びます：Favicon（16/32/48 px）はタブ向け、Standard は 64 px を追加してショートカット向け、Full は最大 256 px で Windows アイコンをよりシャープに。各サイズを個別に書き出す必要はなく、パックが 1 つの .ico にまとめます。

正方形の埋め方を選びます：Fit inside（内側に収める）はロゴ全体を余白付きで表示、Fill and crop（塗りつぶして切り抜く）は拡大して正方形を埋め、端が切れることがあります。シンプルなシンボル向きで、小さな文字には不向きです。

変換して .ico をダウンロードし、最小サイズをタブで確認してください。処理はすべて端末内で完結します。

Fit inside と fill and crop：どちらを選ぶか

アイコンを正方形の枠と考えてください。Fit inside はロゴを縮小して枠内に全体を収めます。切れませんが、横長・縦長ロゴでは上下または左右に余白が出ます。

Fill and crop は枠いっぱいに拡大し、はみ出した部分を切り取ります。円や単一文字には向きますが、長いワードマークは 16 px で文字が欠けることがあります。

ICO の前に厳密な正方形マスターが必要な場合は、詳細オプションを開き、正確な幅×高さ（例：512×512）を選び、Fill and crop または Fit inside で一度 PNG に変換してから、その正方形で ICO を実行します。デフォルトパックで十分なら省略できます。

• 横長ワードマークのみ → Fit inside、または先に正方形シンボルを用意
• アプリ風の丸アイコン → Fill and crop の方がすっきり見えることが多い
• 迷ったら → まず Fit inside、余白が気になるときだけ Fill and crop

サイトへの ICO の設置

favicon.ico をサイトルートに置くか、HTML の head で適切な type を指定してリンクします。多くの静的ホストは PNG ファビコンも受け付けますが、ICO は古いブックマークや一部デスクトップ用途に依然有用です。

公開後は強制再読み込みやシークレットウィンドウで確認してください。ブラウザはファビコンを強くキャッシュします。アップロード後に「古いアイコンのまま」なのは、多くの場合キャッシュです。

できないこと

この方法は静的アイコン向けです。ブランドデザイン、自動背景除去、SVG 生成は行いません。極細の線は 16 px で消えることがあるので、最小サイズを必ず確認してください。

パック処理は端末内で行われます。スマホの「ホーム画面に追加」用アイコンが必要な場合は別途 PNG が要ることもあり、ICO だけでは足りない場合があります。