favicon-checker.com
サイトをチェック
日本語
EnglishenEspañolesPortuguêsptFrançaisfrDeutschdeItalianoitPolskiplРусскийruTürkçetrBahasa Indonesiaid日本語ja한국어ko简体中文zh

ファビコンのサイズ: サイトに必要なアイコン

更新日

現在のファビコンのサイズは、5つのファイルに集約できます。32×32のfavicon.ico、SVGアイコン、180×180のApple touch icon、そしてWebアプリマニフェストに指定する192×192と512×512の2つのPNG（うち1つはmaskable）です。57×57のAppleアイコン、Windowsのタイル、そのほかのPNGサイズは旧仕様で、省いて構いません。

サイズ一覧表

ファイルサイズ使われる場所備考
favicon.ico32×32（16と48を含めてもよい）すべてのブラウザー、RSSリーダー、/favicon.icoをリクエストするあらゆるものHTMLで別のアイコンを宣言していても、サイトのルートに置いてください。
favicon.svg任意（viewBoxは正方形）Chrome、Edge、Firefoxのタブどのサイズでも鮮明で、ダークモードで色を切り替えられます。
favicon-96x96.png96×96Google検索Apple touch iconを宣言していれば省略可。Googleは両方を読み取ります。
apple-touch-icon.png180×180iPhoneとiPadのホーム画面、Google検索背景は不透過にします。角丸はiOSが付けます。
マニフェストのアイコン192×192Androidのホーム画面Webアプリマニフェストのiconsに記述します。
マニフェストのアイコン512×512インストールのプロンプト、スプラッシュ画面Chromeのインストール条件では、192と512のアイコンが求められます。
maskableアイコン512×512Androidのアダプティブアイコン"purpose": "maskable"を指定し、ロゴは中央の80%の円の内側に収めます。

ブラウザーのタブ: favicon.icoとSVG

タブにはアイコンが16 CSSピクセルで表示され、高密度の画面では32デバイスピクセルになります。そのため、favicon.icoに含まれる32×32の画像が最も重要です。同じファイルに16と48を加えてもかまいません。ブラウザーは最も近いものを選びます。

SVGアイコン1つで、あらゆるサイズをまかなえます。prefers-color-schemeのメディアクエリも入れられるので、暗い色のロゴをダークテーマのタブで明るくすることもできます。先にsizes="32x32"付きでICOを、その後にSVGを宣言してください。SVGに対応するブラウザーはSVGを使い、それ以外はICOに切り替わります。

Google検索

Googleのファビコンのガイドラインでは、8×8ピクセル以上の正方形のアイコンが必要とされ、48×48より大きいものが推奨されています。対応形式はBMP、GIF、ICO、PNG、JPEG、PPM、TIFFです。SVGはこの一覧になく、SVGだけのサイトではGoogleが使えるアイコンがありません。Googleはrel="icon"とrel="apple-touch-icon"の両方を読み取るため、180×180のApple touch iconを宣言していれば、サイズの推奨はすでに満たしています。専用のファイルを用意するなら、96×96のPNGが使えます。

iPhoneとiPad

iOSは、サイトをホーム画面に追加するときにApple touch iconを使います。現行のiPhoneに合うサイズは180×180です（60ポイントの3倍）。iPadではこれを縮小して使えるので、ファイルは1つで足ります。ホーム画面では透過部分が黒くなるため、アイコンには単色の背景を付けてください。アイコンがない場合、iOSはページのスクリーンショットか、無地のタイルに頭文字を使います。

Androidとインストール可能なWebアプリ

AndroidとChromeは、Webアプリマニフェストからアイコンを読み取ります。192×192のアイコンはホーム画面に、512×512のアイコンはインストールのダイアログとスプラッシュ画面に使われます。

maskableアイコンは、絵柄が正方形全体に広がる512×512の別の画像です。Androidは端末が使う形（円、スクワークル、角丸の正方形）に切り抜きます。ロゴを、画像の80%の直径をもつ中央の円の内側に収めれば、どの形でも欠けません。maskableアイコンがないと、Androidは通常のアイコンを縮小して白い円の上に置きます。

HTML

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

次は、site.webmanifestのicons部分です。

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

マニフェストはapplication/manifest+jsonで、各アイコンは実際の画像タイプで配信してください。/favicon.icoへのリクエストにHTMLページをステータス200で返すサーバーでは、ネットワークタブでは問題なさそうに見えても、アイコンが表示されません。シングルページアプリでよく起こります。

省略できるサイズ

  • 57、60、72、76、114、120、144、152 pxのApple touch icon。iOSは180 pxのものを縮小して使います。
  • mstile-*.png、browserconfig.xml、msapplication-*のタグ。Windows 8と10のスタート画面のタイル用でした。
  • Safariのmask-icon。Safari 12以降は、ピン留めタブにも通常のファビコンを使います。
  • favicon.icoに16×16と32×32の両方が入っている場合の、個別の16×16・32×32のPNGのリンク。

自分のサイトを確認する

Favicon Checkerなら、上記のファイルをすべてサイトから取得し、実際のサイズと形式を計測して、タブ、Google、iOS、Androidでの表示を確認できます。