Favicons & web app manifest

 

Do not replace Resources/Private/Partials/Page/Favicons.html with static HTML from RealFaviconGenerator. The partial is a Fluid template that reads site configuration (or falls back to bundled files under Resources/Public/Favicons/).

 

Architecture

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

Runtime behaviour (Favicons.html)

Included via page.headerData.2039 (see Page.Favicon.typoscript and pageFaviconsFile in Site Settings).

Favicon links

If any of these site configuration keys is set, the site-specific branch is used:

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

If none of those keys are set, defaults from the extension are used:

All href values go through f:uri.image (site files) or f:uri.page (manifest).

Extra <meta> tags (same partial)

When page data is available:

Site record (backend)

Site Management → Sites → [site] → Configuration — tab Favicons (sites.php):

Set file links in the UI or in config/sites/[site]/config.yaml, for example:

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

Labels and hints: Resources/Private/Language/locallang_db.xlf (site.configuration.*).

Dynamic web manifest (pageType 8412)

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

• URL: same page with typeNum=8412 (via f:uri.page(pageType: 8412) in Favicons.html)
• Template: Resources/Private/Partials/Page/Manifest.html
• Content-Type: application/manifest+json, cacheable 24h

Manifest.html builds JSON with:

• name / short_name from site.configuration.pwaName / pwaShortName, else site title / identifier
• Icons: web-app-manifest-192x192.png and web-app-manifest-512x512.png under Resources/Public/Favicons/
• Default theme_color / background_color: #333333

Optional PWA keys (pwaName, pwaShortName) can be added in config.yaml even though they are not registered in sites.php TCA yet.

Generating / updating icon files

Use RealFaviconGenerator when you need a full icon set (ICO, PNG sizes, Apple touch, manifest icons).

Option A — Website (quick)

1. Upload master image (512×512 PNG or SVG recommended).
2. Download the ZIP.
3. Extract into Build/Assets/Static/Favicons/ (not into Resources/Public/ directly).
4. From Build/: npm run build or npm run watch (copies static assets to Resources/Public/Favicons/).

Option B — CLI (CI-friendly)

Example using the checked-in Build/favicon-settings.json (adjust path, names, and colours for your project):

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

Generated artefacts:

Update path in favicon-settings.json to match your deployed asset path if you serve icons from a fixed URL prefix.

Expected filenames (defaults)

After a full generation, these should exist under 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 if you use dynamic manifest only)

Site Settings

Override in Site Settings or settings.yaml only if you provide a custom Fluid partial.

Validation

• RealFaviconGenerator favicon checker
• In the browser: inspect <head> links and request ?type=8412 for manifest JSON
• CLI update check (if you keep favicon-output.json): npx real-favicon check-for-update favicon-output.json

Related documentation

• Configuration — site config.yaml fields
• Frontend — Vite publicDir and static assets
• Backend — site configuration UI