iPhoneで「ホーム画面に追加」をタップしたとき、サイトのアイコンがぼやけた読めないスクリーンショットになっていてガッカリした経験はありませんか？それは、モバイル向けFaviconの設定が不完全だからです。モバイルブラウザは、昔ながらのデスクトップ用アイコンには見向きもしません。ウェブサイトをネイティブアプリのように見せるための、特定の高解像度アセットを求めているのです。

GitHubのモバイルウェブ体験を見てみましょう。Safariのタブ一覧で彼らのサイトを見ると、余白が完璧に調整された鮮明なアイコンが表示されます。Androidデバイスに保存すれば、OSが採用しているどんなアイコンの形状にも完璧に適応します。これは偶然ではありません。彼らはモバイルデバイス向けFaviconに対して、的確な戦略をとっているのです。

15種類もの異なるサイズのアイコンを用意するのはやめましょう。2026年現在、99%のモバイルデバイスをカバーするために必要なファイルはごくわずかです。その具体的な設定方法をお見せします。

モバイルアイコンの前提条件

コードを書く前に、適切なソース画像が必要です。32x32ピクセルのファイルは使わないでください。高解像度で正方形のロゴが必要です。512x512ピクセルのPNGか、きれいなSVGから始めることをお勧めします。ロゴに文字が含まれている場合は、削除してください。小さなスマホ画面でも視認性を保つため、シンボルマークのみを使用しましょう。

モバイル向けFaviconのステップバイステップ設定

ステップ1: Apple Touch IconでiOSを攻略する

Appleは頑固です。iOSのSafariは、ホーム画面に保存したりタブ一覧に表示したりする際、標準のFavicon宣言を完全に無視します。代わりに「Apple Touch Icon」と呼ばれる特定のファイルを要求します。

必要なのは、180x180ピクセルのPNGが1つだけです。ここでSVGは使わないでください（iOSは無視します）。さらに、iOSは透明な背景をすべて黒で塗りつぶします。透明な背景に暗い色のロゴを置くと、黒背景に黒ロゴの「見えない四角形」になってしまいます。このファイルには必ず単色の背景色を使用してください。

この詳細については、Apple Touch Iconガイドで解説していますが、実装自体はHTML1行で済みます。

ステップ2: Web App ManifestでAndroidを飼いならす

AndroidのChromeは、アイコンの扱いがまったく異なります。特定のHTMLタグを探すのではなく、「Web App Manifest」と呼ばれるJSONファイルを探します。このファイルは、サイトがインストールされたときやタスクスイッチャーで表示されたときの挙動をAndroidに伝えます。

Android向けには、192x192と512x512の2つのPNGサイズが必要です。これらをルートディレクトリにあるsite.webmanifestファイル内で定義します。

ステップ3: Maskable Icon（マスク可能アイコン）の実装

Androidのメーカーは、さまざまなアイコンの形状を好みます。Samsungは角丸四角形、Pixelは円形、他のブランドはしずく型かもしれません。Maskable Iconを提供しないと、Androidはあなたの正方形のロゴを縮小し、白い円の中に押し込んでしまいます。これは非常に見栄えが悪いです。

マニフェストにpurpose: 'maskable'プロパティを追加することで、システムのネイティブな形状に合わせてアイコンをトリミングする許可をAndroidに与えることができます。ロゴのメイングラフィックが、中央の「セーフゾーン」（画像の内側80%）に収まっていることだけ確認してください。

ステップ4: 最終的なコードの統合

モバイルデバイス向けFaviconをまとめるために必要な正確なコードは以下の通りです。まず、これをHTMLの<head>セクションに追加します：

<!-- iOS Safari -->
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>

<!-- Android / Chrome -->
<link rel='manifest' href='/site.webmanifest'>

<!-- 最新のモバイルブラウザ (SVGフォールバック) -->
<link rel='icon' type='image/svg+xml' href='/icon.svg'>

次に、以下のJSON構造を持つsite.webmanifestファイルを作成します：

{
  'name': 'あなたのアプリ名',
  'short_name': 'App',
  'icons': [
    {
      'src': '/icon-192x192.png',
      'sizes': '192x192',
      'type': 'image/png'
    },
    {
      'src': '/icon-512x512.png',
      'sizes': '512x512',
      'type': 'image/png',
      'purpose': 'any maskable'
    }
  ],
  'theme_color': '#ffffff',
  'background_color': '#ffffff',
  'display': 'standalone'
}

避けるべきよくある落とし穴

Androidの仕様についてさらに深く知りたい場合は、詳細なWeb App Manifest Faviconガイドをご覧ください。

結論

モバイルデバイス向けFaviconを正しく設定することは、ウェブサイトの体感品質を劇的に向上させる小さなディテールです。専用のApple Touch Iconと適切に設定されたWeb App Manifestを提供することで、あなたのブランドはすべてのスマートフォンやタブレットでプロフェッショナルに見えます。

手動で画像をリサイズしたりJSONファイルを手書きしたりする代わりに、Mzu favicondlを使用できます。高解像度のロゴをアップロードするだけで、2026年に必要なモバイル最適化されたPNG、SVG、マニフェストファイルを当社のツールが正確に生成します。