SSF-A - Single Standard for Favicons

Definitions

The SSF-A standard defines requirements for the semantics, accessibility, and behavior of favicons.

Structure and Semantics

The favicon must be compatible with various platforms and devices (iOS, Android, desktop browsers), display correctly in light and dark themes, and load quickly with the correct MIME type.

Main Favicon Files

The color coding corresponds to the file structure diagram.

manifest.webmanifest

{
  "background_color": "#000000",
  "description": "Site description",
  "display": "standalone",
  "name": "Site name",
  "start_url": "/",
  "short_name": "Short name",
  "theme_color": "#ffffff",
  "lang": "en",
  "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 with 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 };

File Structure Diagram

Color coding:

• Black - root files;
• Yellow - manifest;
• Orange - SVG icon;
• Gray - iOS;
• Green - Android.

Accessibility

The favicon should be recognizable and support color themes:

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

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

Interactivity and Visual Feedback

The favicon must be scalable to display correctly on devices with different pixel densities and must have a PWA configuration to display the site as a standalone app, including a splash screen and a color theme for UI elements.