SSF-A - Single Standard for Favicons

183

12/30/25

3 min.

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

Platform / Purpose	File	Size	Format	Color Scheme
Site Root	favicon.ico	48×48px	`.ico`	⬛ Black
PWA / Manifest	manifest.webmanifest	–	`.webmanifest`	🟨 Yellow
SVG icon (scalable)	icon.svg	arbitrary	`.svg`	🟧 Orange
iOS / Safari	apple-touch-icon.png	180×180px	`.png`	⬜ Gray
Android Chrome	android-chrome-192x192.png	192×192px	`.png`	🟩 Green
Android Chrome	android-chrome-512x512.png	512×512px	`.png`	🟩 Green

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

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;

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.

Similar categories: