Favicons & Web-App-Manifest

 

Ersetzen Sie Resources/Private/Partials/Page/Favicons.html durch statisches HTML aus RealFaviconGenerator. Das Partial ist eine Fluid-Vorlage, die die Website-Konfiguration ausliest (oder auf gebündelte Dateien unter Resources/Public/Favicons/).

 

Architektur

flowchart LR
  subgraph assets [Static assets]
    BuildStatic["Build/Assets/Static/Favicons/"]
    Public["Resources/Public/Favicons/"]
    BuildStatic -->|Vite publicDir| Public
  end
  subgraph site [Site configuration]
    SiteCfg["config/sites/*/config.yaml\n(site.configuration.*)"]
  end
  subgraph output [Frontend head]
    Partial["Favicons.html\nheaderData 2039"]
    Manifest["Manifest.html\npageType 8412"]
    Partial --> SiteCfg
    Partial --> Public
    Manifest --> Public
  end

Laufzeitverhalten (Favicons.html)

Eingebunden über page.headerData.2039 (siehe Page.Favicon.typoscript und pageFaviconsFile in den Website-Einstellungen).

Favicon-Links

Wenn einer dieser Konfigurationsschlüssel für die Website gesetzt ist, wird der websitespezifische Zweig verwendet:

• favicon-96x96-png
• faviconIco
• faviconSvg
• apple-touch-icon
• webmanifest

Wenn keiner dieser Schlüssel gesetzt ist, werden die Standardwerte aus der Erweiterung verwendet:

Alle href Werte durchlaufen f:uri.image (Website-Dateien) oder f:uri.page (Manifest).

Zusätzliche <meta> Tags (dasselbe Partial)

Wenn Seitendaten verfügbar sind:

Site-Eintrag (Backend)

Site-Verwaltung → Sites → [Site] → Konfiguration — Registerkarte „Favicons“ (sites.php):

Dateiverknüpfungen in der Benutzeroberfläche oder in config/sites/[site]/config.yaml, zum Beispiel:

faviconSvg: 't3://file?uid=123'
favicon-96x96-png: 't3://file?uid=124'

Bezeichnungen und Hinweise: Resources/Private/Language/locallang_db.xlf (site.configuration.*).

Dynamisches Web-Manifest (pageType 8412)

Definiert in Configuration/TypoScript/Setup/40.Page.Scripts.typoscript:

• URL: auf derselben Seite wie typeNum=8412 (via f:uri.page(pageType: 8412) in Favicons.html)
• Vorlage: Resources/Private/Partials/Page/Manifest.html
• Content-Type: application/manifest+json, 24 Stunden zwischenspeicherbar

Manifest.html erstellt JSON mit:

• name / short_name aus site.configuration.pwaName / pwaShortName, sonst Seitentitel / Kennung
• Symbole: web-app-manifest-192x192.png und web-app-manifest-512x512.png unter Resources/Public/Favicons/
• Standard theme_color / background_color: #333333

Optionale PWA-Schlüssel (pwaName, pwaShortName) können in config.yaml , obwohl sie noch nicht in sites.php TCA registriert sind.

Erstellen/Aktualisieren von Icon-Dateien

Verwenden Sie RealFaviconGenerator, wenn Sie einen vollständigen Icon-Satz benötigen (ICO, PNG-Größen, Apple Touch, Manifest-Icons).

Option A – Website (schnell)

1. Laden Sie das Master-Bild hoch (512×512 PNG oder SVG empfohlen).
2. Laden Sie die ZIP-Datei herunter.
3. Entpacken Sie es in „Build/Assets/Static/Favicons/“ (nicht direkt in Resources/Public/ direkt).
4. Von Build/: npm run build oder npm run watch (kopiert statische Assets nach Resources/Public/Favicons/).

Option B – CLI (CI-freundlich)

Beispiel unter Verwendung der eingecheckten Build/favicon-settings.json (passen Sie path, Namen und Farben für Ihr Projekt an):

cd Build
npx realfavicon generate ./Assets/Images/favicon.png favicon-settings.json favicon-output.json ./Assets/Static/Favicons
npx realfavicon inject favicon-output.json ./Assets/Static/Favicons ./Assets/Static/Favicons/output.html
npm run build

Generierte Artefakte:

Aktualisieren path in favicon-settings.json , um sie an Ihren bereitgestellten Asset-Pfad anzupassen, falls Sie Icons über ein festes URL-Präfix bereitstellen.

Erwartete Dateinamen (Standardwerte)

Nach einer vollständigen Generierung sollten diese unter Resources/Public/Favicons/:

• favicon.svg, favicon.ico, favicon-96x96.png
• apple-touch-icon.png
• web-app-manifest-192x192.png, web-app-manifest-512x512.png
• site.webmanifest (optional, wenn Sie nur ein dynamisches Manifest verwenden)

Website-Einstellungen

Überschreiben in den Website-Einstellungen oder settings.yaml nur, wenn Sie ein benutzerdefiniertes Fluid-Partial bereitstellen.

Validierung

• RealFaviconGenerator-Favicon-Prüfung
• Im Browser: <head> Links und fordere ?type=8412 nach Manifest-JSON
• CLI-Update-Prüfung (falls vorhanden favicon-output.json): npx real-favicon check-for-update favicon-output.json

Zugehörige Dokumentation

• Konfiguration — Site config.yaml Felder
• Frontend — Vite publicDir und statische Assets
• Backend – Benutzeroberfläche zur Website-Konfiguration