SSF-A - ファビコンの統一規格

定義

SSF-A 標準は、ファビコンのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています。

主な要件は以下の通りです：

• さまざまなプラットフォームおよびデバイス（iOS、Android、デスクトップブラウザ）への対応；
• ライトテーマおよびダークテーマでの正しい表示；
• 高速な読み込みと正しいファイルのMIMEタイプ。

構造とセマンティクス

ファビコンの主要ファイル

色のマークは ファイル構造の図 に対応しています。

manifest.webmanifest

{
  "background_color": "#000000",
  "description": "サイトの説明",
  "display": "standalone",
  "name": "サイト名",
  "start_url": "/",
  "short_name": "略称",
  "theme_color": "#ffffff",
  "lang": "ru",
  "dir": "ltr",
  "icons": [
    {
      "src": "/favicons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Next.js との統合

import type { Metadata } from 'next';

const metadata: Metadata = {
  icons: {
    icon: [
      {
        url: '/favicon.ico',
        sizes: '48x48',
        type: 'image/x-icon',
      },
      {
        url: '/favicons/icon.svg',
        sizes: 'any',
        type: 'image/svg+xml',
      },
    ],
    apple: [
      {
        url: '/favicons/apple-touch-icon.png',
        sizes: '180x180',
        type: 'image/png',
      },
    ],
  },
  manifest: '/manifest.webmanifest',
};

export { metadata };

ファイル構造の図

色の意味:

• 黒 - ルートファイル;
• 黄色 - manifest;
• オレンジ - SVGアイコン;
• 灰色 - iOS;
• 緑 - Android.

アクセシビリティ

ファビコンは一目でそれとわかるものであり、カラーテーマに対応している必要があります。

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    .logo { fill: #000; } /* ライトテーマ */
    @media (prefers-color-scheme: dark) {
      .logo { fill: #fff; } /* ダークテーマ */
    }
  </style>
  <path class="logo" d="..."/>
</svg>

インタラクティブ性と視覚的フィードバック

ファビコンは、ユーザーにとっての視覚的なインジケーターとしての役割を果たします：

• SVGのスケーラビリティにより、ピクセル密度の異なるデバイスでもアイコンを正しく表示できます；
• PWA設定により、スプラッシュスクリーンやUI要素のカラーテーマを含め、サイトを独立したアプリとして表示できます。