多くのデバイス、ブラウザ、プラットフォームが存在するため、faviconのサイズは混乱を招くことがあります。6種類のファイルが必要なのでしょうか？それとも1つだけで済ませられるのでしょうか？このガイドがその疑問を解消します。

完全なFaviconサイズ表

サイズファイル使用場所必須？
16×16favicon-16x16.pngブラウザタブ（標準画面）推奨
32×32favicon-32x32.pngブラウザタブ（Retina/HiDPI）、タスクバーはい
48×48favicon.ico (マルチサイズ)Windowsデスクトップショートカット任意
180×180apple-touch-icon.pngiOSホーム画面（iPhone/iPad）はい
192×192android-chrome-192x192.pngAndroidホーム画面、PWAアイコン推奨
512×512android-chrome-512x512.pngPWAスプラッシュスクリーン、アプリストア推奨

最小限のセットアップ（3ファイル）

シンプルに済ませたい場合は、以下の3つのファイルで現実世界のシナリオの99%をカバーできます。

  1. favicon.ico (32×32) — ユニバーサルなフォールバックです。すべてのブラウザがサポートしています。
  2. apple-touch-icon.png (180×180) — iOSデバイスや一部のAndroidランチャー用です。
  3. site.webmanifest — PWAサポートのために、192×192および512×512のアイコンを指し示します。
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

ヒント: 現代のブラウザは実際にはICOよりもPNGを好みます。ICOと一緒に32×32のPNGを含めると、現代のブラウザはより鮮明なレンダリングのためにPNGを使用します。

完全なセットアップ（6ファイル）

すべてのプラットフォームで最高の体験を提供するには：

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

なぜ1つの大きな画像だけを使用しないのか？

よくある間違いは、512×512のアイコンだけを提供し、ブラウザがそれを縮小してくれると期待することです。それが問題である理由は次のとおりです。

1つの画像からすべてのサイズを生成する

良いニュースです。各サイズを手動で作成する必要はありません。Mzu favicondlのImage to Faviconツールを使用して、1つの高解像度画像をアップロードするだけで、上記にリストされているすべてのサイズが自動的に生成され、すぐに使えるZIPファイルとしてパッケージ化されます。

クイックリファレンスチートシート

プラットフォーム必要なサイズ形式
Chrome/Firefox/Edgeタブ32×32PNGまたはICO
Safariタブ32×32PNGまたはICO
Google検索結果≥48×48 (48の倍数)任意
iPhone/iPadホーム画面180×180PNG
Androidホーム画面192×192PNG
Windowsタスクバー32×32ICO
macOS Dock (PWA)512×512PNG