SSF-A - Einheitlicher Standard für Favicons

Definitionen

Der SSF-A-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionsweise von Favicons fest.

Struktur und Semantik

Das Favicon muss verschiedene Plattformen und Geräte (iOS, Android, Desktop-Browser) unterstützen, in hellen und dunklen Designs korrekt angezeigt werden und mit dem richtigen MIME-Typ schnell geladen werden.

Wichtige Favicon-Dateien

Die Farbcodierung entspricht dem grafischen Schema.

manifest.webmanifest

{
  "background_color": "#000000",
  "description": "Beschreibung der Website",
  "display": "standalone",
  "name": "Name der Website",
  "start_url": "/",
  "short_name": "Kurzname",
  "theme_color": "#ffffff",
  "lang": "de",
  "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"
    }
  ]
}

Integration mit 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 };

Grafische Darstellung der Dateistruktur

Farbcodierung:

• Schwarz – Stammdateien;
• Gelb – Manifest;
• Orange – SVG-Symbol;
• Grau – iOS;
• Grün – Android.

Barrierefreiheit

Das Favicon sollte wiedererkennbar sein und die Farbschemata unterstützen:

<svg xmlns="http://www.w3.org/2000/svg">
  <style>
    .logo { fill: #000; } /* Helles Farbschema */

    @media (prefers-color-scheme: dark) {
      .logo { fill: #fff; } /* Dunkles Design */
    }
  </style>
  <path class="logo" d="..."/>
</svg>

Interaktivität und Visuelle Rückmeldung

Das Favicon muss skalierbar sein, um auf Geräten mit unterschiedlicher Pixeldichte korrekt angezeigt zu werden, und über eine PWA-Konfiguration verfügen, damit die Website als eigenständige App dargestellt wird, einschließlich eines Splash-Screens und eines Farbthemas für die UI-Elemente.