ファビコンのサイズ一覧：16・32・48・180・192・512 px

Webサイトに必要なファビコンのサイズ一覧

サイズ	ファイル	使われる場所
16 × 16 px	favicon.ico	ブラウザのタブとブックマーク
32 × 32 px	favicon.ico	高精細画面のタブ、Windowsのショートカット
48 × 48 px	favicon.ico	WindowsとGoogle検索の結果
180 × 180 px	apple-touch-icon.png	iPhone・iPadのホーム画面
192 × 192 px	icon-192.png	Androidとインストールされたwebアプリ
512 × 512 px	icon-512.png	webアプリの起動画面とアプリストア

16・32・48 pxを入れたfavicon.icoが1つと、3つのPNGファイルがあれば、ブラウザ、スマートフォン、検索エンジンをカバーできます。当サイトのファビコン作成ツールなら、1枚の画像からすべて作成できます。

Google検索用のfaviconサイズ（ピクセル）

Googleは検索結果の横にファビコンを表示します。ガイドラインでは8×8ピクセル以上の正方形のファビコンが必須とされ、さまざまな場所できれいに見えるよう、48×48ピクセルより大きいものが推奨されています（Google 検索セントラル）。48 pxの画像を含むfavicon.icoか、リンクした192 pxのPNGがあれば、この推奨を満たせます。

ファビコンの形式：ICO・PNG・SVG

ICOは1つのファイルに複数のサイズを入れられる形式で、アイコンが指定されていないとき、ブラウザは/favicon.icoを読みに行きます。互換性のために1つ用意しておきましょう。
PNGは、Apple Touch IconとWebマニフェストに記載するアプリ用アイコンに使います。
SVGは最新のブラウザでファビコンとして使え、どのサイズでもくっきり表示されます。唯一のアイコンにはせず、追加のアイコンとして指定してください。

手元のPNGを、選んだサイズ入りの.icoにしたい場合は、PNG→ICO変換を使ってください。

HTMLでファビコンを設定する方法

ファイルをサイトのルートにアップロードし、<head>の中に次のタグを追加します。

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

192 pxと512 pxのアイコンはマニフェストに記載します。SVG版がない場合は、SVGの行を省いてください。

WordPress・Shopify・Squarespaceのファビコン設定とサイズ

サイト作成サービスでは画像を1枚アップロードするだけで、各サイズは自動で作られます。WordPressでは「サイトアイコン」と呼ばれ、512 × 512ピクセル以上の正方形の画像が求められます。ShopifyとSquarespaceも、ブランドやデザインの設定で正方形の画像を受け付けます。大きめの正方形のPNGをアップロードしてリサイズはサービスに任せ、そのあとブラウザのタブで仕上がりを確認してください。

ファビコンのサイズについてのよくある質問

ファビコンのサイズはいくつがベストですか？

1つに決まったサイズはありません。favicon.icoに16・32・48 pxを入れ、さらに180・192・512 pxのPNGファイルを用意してください。

ファビコンを長方形にできますか？

できません。ブラウザもGoogleも正方形の画像を前提にしています。横長のロゴは、余白をつけて正方形のキャンバスに配置してください。

ファビコンがぼやけるのはなぜですか？

ブラウザが大きな画像を1枚だけ16 pxに縮小しているためです。ロゴを簡略化したものから描いた、本物の16 pxと32 pxの画像をfavicon.icoに入れてください。

ファビコンが更新されない・表示されないのはなぜですか？

ブラウザはファビコンを強くキャッシュします。シークレットウィンドウで確認するか、変更するときにファイル名にバージョンを付けてください。