{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "favicon-teilbild-system",
 "name": "Favicon-Satz und Teilbild je Seite",
 "name_en": "Adaptive favicon set and per-page Open Graph image",
 "kurz": "Aus einer Marke entstehen favicon.ico, icon.svg mit Dunkelmodus, apple-touch-icon, 192, 512, ein maskierbares Icon und das Manifest, dazu je Seite ein Teilbild 1200 × 630 aus Rubrik und Titel, im Browser gerendert und für den Bau im Starter-Generator beschrieben.",
 "kategorie": "Zugang & Robustheit",
 "kategorie_slug": "zugang",
 "kategorie_nr": 17,
 "bau_chat": "E",
 "prioritaet": "E",
 "trendstatus": "etabliert",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "editorial",
  "präzise"
 ],
 "stimmung_roh": [
  "präzise",
  "sachlich",
  "editorial"
 ],
 "technik": [
  "svg",
  "canvas",
  "vanilla-js",
  "manifest",
  "open-graph",
  "playwright"
 ],
 "technik_gruppen": [
  "js",
  "canvas",
  "andere"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "Aus einer Marke entsteht der ganze Satz an Symbolen: favicon.ico mit 32 px, icon.svg mit eigener Farbe im Dunkelmodus, apple-touch-icon mit 180 px und Rand, Icons mit 192 und 512 px, ein maskierbares Icon mit Schutzzone und das Manifest. Dazu bekommt jede Seite ein eigenes Teilbild (og:image, 1200 × 630) aus Seitentitel, Rubrik und Marke. Die Vorlage ist HTML bzw. Canvas und wird beim Bauen gerendert. Die Demo zeigt die Symbole im Browser-Tab hell und dunkel, auf dem Startbildschirm und in den Masken von Android, die Teilbilder in einer neutralen Link-Vorschau, und wie der Satz in den Starter-Generator passt.",
  "warum_es_wirkt": "Das Favicon ist das kleinste und meistgesehene Markenzeichen: im Tab, in Lesezeichen, auf dem Startbildschirm. Ein schwarzes Zeichen verschwindet im dunklen Tab. Geteilte Links sind die Visitenkarte im Messenger; ohne og:image zeigt die Vorschau ein zufälliges Bild oder nichts. Ein Teilbild je Seite mit lesbarem Titel sagt vor dem Klick, worum es geht.",
  "wann_einsetzen": "Jede Kundenseite als Grundausstattung. Besonders, wenn Seiten oft geteilt werden: Veranstaltungen, Artikel, Stellen, Objekte, Angebote. Für Betriebe, deren Kundschaft die Seite auf den Startbildschirm legt (Praxis, Apotheke, Verein, Fitness).",
  "wann_nicht": "Kein Manifest mit display: standalone, wenn die Seite keine App sein soll; für den Startbildschirm reichen Icons und Name. Keine Fotos von Personen automatisch ins Teilbild ohne Freigabe. Kein Teilbild mit Text unter 40 px Höhe, das wird in kleinen Vorschauen unlesbar. Fremde Logos oder Siegel nur mit Recht zur Nutzung, vom Kunden prüfen lassen.",
  "varianten": [
   "Favicon-Satz: ico, SVG mit Dunkelmodus, apple-touch, 192, 512, maskierbar, Manifest",
   "Teilbild je Seite: Vorlage aus Titel, Rubrik und Marke, automatisch gesetzt, mit og:image:alt",
   "Einbau: Kopfzeilen je Seite und Bau-Schritt im Starter-Generator (Marke aus firma.json)"
  ],
  "umsetzung": "Quelle ist eine Marke als SVG mit quadratischer viewBox und Farben aus tokens.css. icon.svg bekommt einen <style> mit @media (prefers-color-scheme: dark), der Grund und Zeichen tauscht. Die PNGs entstehen aus derselben SVG über Canvas (Browser) oder Playwright (Bau): 32 für favicon.ico (ICO-Datei mit eingebettetem PNG), 180 mit 20 px Rand und vollem Grund für apple-touch-icon, 192 und 512 transparent, 512 maskierbar mit dem Zeichen im Kreis von 40 % Radius und vollflächigem Grund. manifest.webmanifest mit name, short_name, icons, theme_color und background_color aus tokens.css. Kopf: <link rel=\"icon\" href=\"/favicon.ico\" sizes=\"32x32\">, <link rel=\"icon\" href=\"/icon.svg\" type=\"image/svg+xml\">, <link rel=\"apple-touch-icon\" href=\"/apple-touch-icon.png\">, <link rel=\"manifest\" href=\"/manifest.webmanifest\">. Teilbild: eine Vorlage (HTML oder Canvas 1200 × 630) mit Rubrik, Titel, Marke und Domain; der Titel wird gemessen und in 2 bis 3 Zeilen gesetzt, die Schriftgröße sinkt bis zu einer Untergrenze, lange Wörter werden getrennt. Beim Bauen rendert ein Skript für jede Seite aus <title> bzw. og:title ein PNG nach og/<seite>.png und setzt og:image, og:image:width, og:image:height, og:image:alt und twitter:card. Schriften vorher laden (document.fonts.load), sonst rendert die Ersatzschrift.",
  "mobil": "Die Vorschauen stehen untereinander: Tab, Startbildschirm, Masken, Link-Vorschau. Downloads als Liste mit großen Zeilen.",
  "reduzierte_bewegung": "Wechsel zwischen hell und dunkel und zwischen den Masken ohne Übergang.",
  "barrierefreiheit": "Jedes Teilbild bekommt og:image:alt mit dem Titel. Der Titel im Teilbild hat mindestens 4,5 : 1 Kontrast. Die Vorschauen sind Bilder mit Textalternative, Umschalter echte Knöpfe mit aria-pressed. Im Kontrastmodus bleibt das SVG-Favicon sichtbar, weil Grund und Zeichen eigene Farben haben."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.16, 1, 0.3, 1)",
  "dauer_ms": "150 Hover, 300 Panel und Wechsel hell zu dunkel, 200 schließen",
  "stagger_ms": "",
  "distanz": "",
  "sonstiges": "Größen: 32, 180 (Zeichen 140), 192, 512, maskierbar 512 mit Schutzkreis Radius 40 % (Zeichen höchstens 409), Teilbild 1200 × 630.",
  "herkunft": "eigene Festlegung",
  "quelle": "Größen aus Evil Martians 2026 und web.dev; Kurve aus Rezept laden-vor-ort-sortiment"
 },
 "kurve": {
  "bezier": [
   0.16,
   1.0,
   0.3,
   1.0
  ],
  "css": "cubic-bezier(0.16, 1, 0.3, 1)",
  "name": "expo.out",
  "dauer_ms": 150
 },
 "gesehen_bei": [
  {
   "seite": "Evil Martians: How to Favicon in 2026",
   "url": "https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs.md",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 05.11.2026 (Stand 21.01.2026): favicon.ico 32 × 32, icon.svg mit Dunkelmodus per @media (prefers-color-scheme: dark), apple-touch-icon 180 × 180 mit Zeichen etwa 140 × 140, icon-192 und icon-512, icon-mask.png 512 mit Zeichen 409 × 409, manifest.webmanifest nur für PWA. Vier link-Zeilen im Kopf.",
   "art": "artikel"
  },
  {
   "seite": "web.dev: Building an adaptive favicon",
   "url": "https://web.dev/articles/building/an-adaptive-favicon",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 05.11.2026 (Adam Argyle, Stand 09.02.2022): SVG-Favicon mit eingebettetem CSS und Media Query für den Dunkelmodus, .ico zuerst als Rückfall. Laut Artikel in Firefox und Chromium; Safari nicht bestätigt.",
   "art": "artikel"
  },
  {
   "seite": "web.dev: Adaptive icon support in PWAs with maskable icons",
   "url": "https://web.dev/maskable-icon",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 05.11.2026 (Steiner, Oakes, Stand 19.12.2019): Schutzzone ist ein Kreis mit Radius 40 % der Breite, purpose \"maskable\", eigenes Icon für any und maskable statt eines für beide.",
   "art": "artikel"
  },
  {
   "seite": "GitHub Blog: A framework for building Open Graph images",
   "url": "https://github.blog/2021-06-22-framework-building-open-graph-images/",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 05.11.2026 (22.06.2021): HTML-Vorlage je Seite, Screenshot mit Puppeteer, 1200 × 630 PNG, im Schnitt 280 ms je Bild, 40 % aus dem Zwischenspeicher. Wartezeit von networkidle0 auf domcontentloaded plus Bild-Check senkte die Zeit von etwa 2,25 s auf 600 ms.",
   "art": "artikel"
  },
  {
   "seite": "Front-End Checklist: og:image size",
   "url": "https://frontendchecklist.io/rules/seo/og-image-size",
   "auszeichnung": "",
   "beobachtung": "Abgerufen 05.11.2026: 1200 × 630 (1,91 : 1), mindestens 600 × 315, höchstens 5 MB, besser unter 1 MB; og:image:width, og:image:height, og:image:alt im Beispiel.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "MDN: Web app manifest icons",
   "url": "https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/icons"
  },
  {
   "titel": "The Open Graph protocol",
   "url": "https://ogp.me/"
  }
 ],
 "kombinierbar_mit": [
  "firmendaten-strukturiert",
  "artikel-seite",
  "vt-cross-document-mpa",
  "fehlerseite-leerzustand",
  "kontrastmodus-forced-colors",
  "kopieren-feedback"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/",
  "meta": "https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/demo"
 },
 "herkunft": {
  "quelldateien": [
   "Recherche Runde 4, 04.11.2026",
   "Techniken-Recherche 03.11.2026 (Nebenbefund 8)"
  ],
  "pruefnotizen": [
   "Nebenbefund 8 der Techniken-Recherche 03.11.2026 empfahl das adaptive SVG-Favicon für die Grundausstattung. Starter haben bisher nur favicon.svg ohne Dunkelmodus [intern, 05.11.2026: 8 Starter mit favicon.svg, keiner mit Manifest oder apple-touch-icon].",
   "Belege sind Fachquellen (Evil Martians, web.dev, GitHub Blog). Keine Award-Seite geprüft.",
   "Ob Safari die Media Query im SVG-Favicon auswertet, ist ungeprüft (web.dev bestätigt es nicht). Deshalb Grund und Zeichen so wählen, dass beide Fassungen auf hell und dunkel lesbar sind.",
   "Der Einbau in den Starter-Generator ist ein Vorschlag (marke-Block in firma.json, Bau-Schritt mit Playwright); oneshot.py erzeugt die Dateien noch nicht."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Aus einer Marke entstehen favicon.ico, icon.svg mit Dunkelmodus, apple-touch-icon, 192, 512, ein maskierbares Icon und das Manifest, dazu je Seite ein Teilbild 1200 × 630 aus Rubrik und Titel, im Browser gerendert und für den Bau im Starter-Generator beschrieben.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.16, 1, 0.3, 1) (Rezept laden-vor-ort-sortiment)",
   "dauer_ms": {
    "hover": 150,
    "panel_schalter_reiter": 300,
    "schliessen": 200
   },
   "distanz": "Panel 6 px von unten mit Einblenden; Reiter-Markierung gleitet per translateX und width",
   "marke": "SVG viewBox 0 0 64 64: Kachel mit Radius 14 und gefalzter Ecke (45 0 bis 64 19), F aus Flächen, Klassen g, z, e; hell und dunkel per @media (prefers-color-scheme: dark) in einem <style> im SVG",
   "farben": "Schaufenster: Grund #2E5B45, Zeichen #F5F1E8, Ecke #E2D3B8; dunkel Grund #E2D3B8, Zeichen #2C2A26, Ecke #2E5B45 (Tinte und Karton entsprechend)",
   "satz": "favicon.ico 32 (PNG in ICO, Kopf 22 Byte), icon.svg, apple-touch-icon 180 mit Rand 20 px und vollem Grund, icon-192 und icon-512 mit transparenter Ecke, icon-mask 512 mit Zeichen 409 und Grund bis zum Rand; Schutzzone Kreis inset 10 %",
   "manifest": "name, short_name, lang de, start_url /, display browser, theme_color = Grundfarbe, background_color #F5F1E8, Icons 192, 512, 512 maskable",
   "kopf": "link icon ico sizes 32x32, link icon svg, apple-touch-icon, manifest, meta theme-color",
   "teilbild": "Canvas 1200 × 630, Grund #F5F1E8, Kartonstreifen rechts 260 px mit Falz, Marke 72 px, Rubrik Geist Mono 22 px, Titel Libre Caslon Display 96 bis 52 px in Schritten von 4, höchstens 3 Zeilen und 280 px Höhe, Zeilenhöhe 1,08, zu lange Wörter mit Trennstrich, sonst Auslassung; Termin als Kreis 96 px; Domain und Pfad unten; Schriften vorher mit document.fonts.load",
   "meta": "og:title, og:url, og:image, og:image:width 1200, og:image:height 630, og:image:alt, twitter:card summary_large_image",
   "vorfuehrung": "alle 1800 ms: Grundfarbe wechselt und Schutzzone an/aus (satz), nächste Seite (teilbild)"
  },
  "ausloeser": "klick",
  "touch": "Eine Spalte: Marke, Tab-Vorschau, Startbildschirm, Masken, Dateien; Tab-Leiste zeigt unter 480 px nur den aktiven Tab. Downloads als Zeilen mit 44 px Trefferfläche.",
  "reduziert": "Panels, Reiter-Markierung und Schutzzone wechseln ohne Weg und Überblendung.",
  "korrekturen": {},
  "geprueft": "05.11.2026",
  "notiz": "Welt: Rezept laden-vor-ort-sortiment, erfundene Buchhandlung Falzbein in Kaufbeuren (Libre Caslon Display, Familjen Grotesk, Geist Mono für Code). Marke eigenes SVG. Alle Dateien werden im Browser aus derselben SVG gerendert und sind ladbar; der Bau-Schritt favicon-satz.js und der marke-Block in firma.json sind Vorschläge, oneshot.py kann das noch nicht. Link-Vorschauen (Messenger, Netzwerk) sind neutral gezeichnet, keine echte Plattform. Bekannte Fehlalarme in pruef-zugang: Auslassungspunkte im nachgebildeten Browser-Tab, waagerecht scrollender Code-Block, Fokus kurz unter dem Rahmen-Knopf. Selbsturteil 4.",
  "varianten": [
   {
    "id": "satz",
    "name": "Favicon-Satz",
    "wann": "Grundausstattung jeder Kundenseite: Symbole für Tab, Lesezeichen, Startbildschirm und Android aus einer Marke.",
    "werte": {
     "aufbau": "Marke mit Farbwahl links, rechts Tabs hell und dunkel, Startbildschirm, drei Masken mit Schutzzone, Dateiliste mit Größe und Download"
    }
   },
   {
    "id": "teilbild",
    "name": "Teilbild je Seite",
    "wann": "Seiten, die geteilt werden: Veranstaltung, Artikel, Stelle, Objekt, Angebot.",
    "werte": {
     "aufbau": "Seitenliste und Testfeld links, Teilbild 1200 × 630 mit Download, Vorschau im Messenger und im Netzwerk, Meta-Angaben zum Kopieren",
     "neu_setzen_ms": 120
    }
   }
  ]
 }
}