ファビコンのサイズ：2025年に実際に必要なもの

「ファビコン サイズ」で検索すると、矛盾した数字の羅列が出てきます：16x16、32x32、48x48、64、180、192、256、512。これらのリストのほとんどは10年前に書かれたまま更新されていません。実際には、現代のサイトに必要なファイルはおよそ4つで、ファビコン生成ツールで一度にすべて作成できます。このツールはブラウザ内で完全に動作するため、ロゴはあなたのマシンから外に出ることはありません。

各サイズが実際に何に使われるのか、そして安全にスキップできるものをここに説明します。

重要性が残されているサイズ

16x16と32x32 — ブラウザタブとブックマーク

これは従来のファビコンです。16x16はタブストリップが混雑しているときに表示され、32x32は高DPI画面、ブックマークバー、およびアドレスバーのUIの一部で使用されます。両方は従来、複数の解像度を一度に保持できる単一のfavicon.icoファイルにバンドルされます。Windowsは同じ.icoから48x48をデスクトップショートカット用に取得するため、これを含めてもほぼコストがかかりません。

180x180 — Appleのタッチアイコン

iPhoneやiPadで「ホーム画面に追加」をタップすると、Safariは180x180のapple-touch-icon.pngを探します。それがない場合、iOSはページをスクリーンショットして代わりに使用します。これは見栄えが悪くなります。この1つのPNGがすべての現在のiOSデバイスに対応しています。システムが必要に応じてダウンスケールするためです。

192x192と512x512 — AndroidとPWA

Android Chromeとインストール可能なWebアプリは、site.webmanifestからアイコンを読み込みます。192はホーム画面アイコン、512はスプラッシュスクリーンとアプリリストに使用されます。サイトをインストール可能にしたい場合は、両方が必要です。

SVG — オプションですが便利です

FirefoxとChrome両方がSVGファビコンをサポートしており、任意のサイズでシャープなままで、ファイル内のメディアクエリでダークモードに対応できます。これは置き換えではなく、ボーナスです。Safariと古いブラウザは依然ラスター版を必要とします。

スキップできるもの

64x64、96x96、128x128、Windowsタイル画像全体、そしてapple-touch-icon-76x76スタイルの十数個のレガシーファイル。これらはほぼ消滅したデバイスのために必要でした。20個のアイコンファイルを配布するとリポジトリが膨らむだけで、測定可能な利益は得られません。

HTML

ファイルをサイトルートに配置して、<head>に以下を追加します：

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

マニフェスト内に以下を追加します：

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

16ピクセルでのデザイン

難しい部分はエクスポートではなく、完全なロゴが16x16でグチャグチャになることです。役に立つことをいくつか紹介します：

• ロゴ全体ではなくフラグメントを使用する。 1文字、1グリフ、1つの形。単語マークはタブサイズでは読み取れません。
• 正方形から始める。 ソースが幅広いロゴの場合、最初にそれを正方形にトリミングして、生成ツールが空白でレターボックス化しないようにします。
• コントラストを高く保つ。 細い輪郭は消えます。ソリッド形状は生き残ります。
• 背景を決定する。 透明PNGは明るく、暗いブラウザクロームに適応します。マークが暗い場合は、代わりにそれに単色タイルを指定することを検討してください。ロゴスクリーンショットからフラットJPGだけを持っている場合、数秒で背景を削除できます。
• セーフエリアに注意する。 Androidはアイコンを円と四角に変形させるため、512アートワークの端の周りに大体10%の余白を残してください。

ファビコンの背景をサイトのブランドカラーに合わせている場合、画像カラーピッカーは既存のスクリーンショットから正確な16進コードを抽出します。theme-colorメタタグにも便利です。

セット全体を一度に生成する

何もアップロードしません。正方形のPNGまたはSVGを無料のブラウザベースのファビコン生成ツールにドロップすると、.ico、Appleタッチアイコン、192/512 PNGがローカルで、あなたのタブで生成されます。サーバーに送信されるものはなく、サインアップはなく、未発表のロゴのコピーが他の誰かのストレージバケットに留まることはありません。

ブラウザをズームアウトして、タブを見て、唯一重要な質問をしてください：それが何であるか分かりますか？