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

基準

183

25/12/30

6 分。

定義

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

構造とセマンティクス

ファビコンは、さまざまなプラットフォームやデバイス（iOS、Android、デスクトップブラウザ）に対応し、ライトテーマとダークテーマの両方で正しく表示され、正しいMIMEタイプで素早く読み込まれる必要があります。

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

プラットフォーム / 用途	ファイル	サイズ	形式	配色
サイトのルート	favicon.ico	48×48px	`.ico`	⬛ 黒
PWA / マニフェスト	manifest.webmanifest	–	`.webmanifest`	🟨 黄色
SVGアイコン（スケーラブル）	icon.svg	任意のサイズ	`.svg`	🟧 オレンジ
iOS / Safari	apple-touch-icon.png	180×180px	`.png`	⬜ グレー
Android Chrome	android-chrome-192x192.png	192×192px	`.png`	🟩 緑
Android Chrome	android-chrome-512x512.png	512×512px	`.png`	🟩 緑

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

manifest.webmanifest

{
  "background_color": "#000000",
  "description": "サイトの説明",
  "display": "standalone",
  "name": "サイト名",
  "start_url": "/",
  "short_name": "略称",
  "theme_color": "#ffffff",
  "lang": "ja",
  "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 };

ファイル構造の図

flowchart TD
    A[/public/] --> B(favicon.ico)
    A --> C(manifest.webmanifest)
    A --> D[/favicons/]
    D --> E[icon.svg]
    D --> F[apple-touch-icon.png]
    D --> G[android-chrome-192x192.png]
    D --> H[android-chrome-512x512.png]

    classDef root fill:#000,stroke:#333,stroke-width:1px,color:#fff;
    classDef ios fill:#eee,stroke:#333,stroke-width:1px,color:#000;
    classDef android fill:#0f0,stroke:#333,stroke-width:1px,color:#000;
    classDef svg fill:#f80,stroke:#333,stroke-width:1px,color:#000;
    classDef manifest fill:#ff9,stroke:#333,stroke-width:1px,color:#000;

    class A root;
    class B root;
    class C manifest;
    class D root;
    class E svg;
    class F ios;
    class G android;
    class H android;

色の意味:

黒 - ルートファイル;

黄色 - 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>

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

ァビコンは、ピクセル密度の異なるデバイスでも正しく表示されるようスケーラブルである必要があり、サイトを独立したアプリとして表示するためのPWA設定（スプラッシュスクリーンやUI要素の色テーマを含む）に対応している必要があります。

類似カテゴリ:

アドバイス
Reactコンポーネントの構造
各Reactコンポーネントがどのような外観であるべきか、私の考え
421
26/04/19
13 分。
基準
SST - タブに関する統一規格
SST規格は、タブのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています
62
26/02/17
11 分。
基準
SSF-U - フルスクリーン表示の統一規格
SSF-U規格は、フルスクリーン表示のセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています
248
26/02/03
3 分。
基準
SSA - アコーディオンの統一標準
SSA規格は、アコーディオンのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定めています
258
26/01/19
4 分。
アドバイス
ウェブサイトにおける悪い慣行
ウェブデザインにおける致命的なミスの分析。スライダー、自動再生、重いページがコンバージョン率やGoogleでの検索順位を低下させる理由
232
25/12/30
2 分。
基準
SSP - ページネーションの統一規格
SSP規格は、ページネーションのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています
240
25/12/30
3 分。
すべての記事