Favicons & web app manifesto

This is how favicons work in mpc/mp-core: Asset files, Fluid Partial, website configuration and the optional RealFaviconGenerator tool.

Replace Resources/Private/Partials/Page/Favicons.html with static HTML from RealFaviconGenerator. The partial is a Fluid template that reads the website configuration (or bundled files located at 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

Piece	Location	Role
Favicon files	`Build/Assets/Static/Favicons/` → `Resources/Public/Favicons/`	Copied from Vite (`publicDir`); default fallbacks
Head partial	`Resources/Private/Partials/Page/Favicons.html`	Provides `<link rel="icon">`, manifest link, optional page meta
TypoScript	`Configuration/TypoScript/Setup/Page/Page.Favicon.typoscript`	`page.headerData.2039` = FLUIDTEMPLATE
Override of site setting	`pageFaviconsFile`	Alternative subpath (`95.SitePresentationOverrides.typoscript`)
Dynamic manifest	`Configuration/TypoScript/Setup/40.Page.Scripts.typoscript`	`typeNum = 8412` → `Manifest.html` (JSON)
Site fields (backend)	`Configuration/SiteConfiguration/Overrides/sites.php`	File link fields in the website record

Runtime behaviour (`Favicons.html`)

Integrated via page.headerData.2039 (see Page.Favicon.typoscript and pageFaviconsFile in the website settings).

Favicon links

If any of these configuration keys are set for the website, the website-specific branch is used:

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

Site field	Output
`favicon-96x96-png`	`<link rel="icon" sizes="96x96" type="image/png">`
`faviconIco`	`<link rel="shortcut icon">`
`faviconSvg`	`<link rel="icon" type="image/svg+xml">`
`apple-touch-icon`	`<link rel="apple-touch-icon" sizes="180x180">`
`webmanifest`	`<link rel="manifest">` → linked FAL file
(no ‘`webmanifest`’ file)	`<link rel="manifest" href="{f:uri.page(pageType: 8412)}">` → dynamic JSON

If none of these keys are set, the default values from the extension are used:

File	Path
PNG 96×96	`EXT:mp_core/Resources/Public/Favicons/favicon-96x96.png`
ICO	`EXT:mp_core/Resources/Public/Favicons/favicon.ico`
SVG	`EXT:mp_core/Resources/Public/Favicons/favicon.svg`
Apple Touch	`EXT:mp_core/Resources/Public/Favicons/apple-touch-icon.png`
Manifest	`f:uri.page(pageType: 8412)` (dynamic)

All href Values are iterated through f:uri.image (website files) or f:uri.page (manifest).

Additional `<meta>` tags (same partial)

If page data is available:

Condition	Meta tag
`{data.keywords}`	`keywords`
`{data.lastUpdated}`	`last-modified`
`{data.author}`	`author`
`{data.author_email}`	`email`

Site entry (backend)

Site management → Sites → [Site] → Configuration — ‘Favicons’ tab (sites.php):

Field	Purpose
`favicon-96x96-png`	Primary PNG favicon
`faviconIco`	`favicon.ico`
`faviconSvg`	SVG favicon
`apple-touch-icon`	iOS Home Screen
`webmanifest`	Static `site.webmanifest` file (optional; otherwise dynamic manifest)
`web-app-manifest-192x192`	PWA icon 192×192 (for static manifest packages)
`web-app-manifest-512x512`	PWA icon 512×512

File shortcuts in the user interface or in config/sites/[site]/config.yaml, for example:

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

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

Dynamic Web Manifest (`pageType` 8412)

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

URL: on the same page as typeNum=8412 (via f:uri.page(pageType: 8412) in Favicons.html)
Template: Resources/Private/Partials/Page/Manifest.html
Content-Type: application/manifest+json, can be cached for 24 hours

Manifest.html creates JSON with:

name / short_name from site.configuration.pwaName / pwaShortName, otherwise page title / ID
Symbols: 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 used in config.yaml , even though they are not yet sites.php TCA.

Creating/updating icon files

Use RealFaviconGenerator if you need a complete set of icons (ICO, PNG sizes, Apple Touch, manifest icons).

Option A – Website (quick)

Upload the master image (512×512 PNG or SVG recommended).
Download the ZIP file.
Unzip it into ‘Build/Assets/Static/Favicons/’ (not directly into Resources/Public/ directly).
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 (adapt path, names and colours to suit 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:

File	Use
`favicon-output.json`	Generator metadata (optional in VCS)
`output.html`	For reference only – static example tags `<head>` Tags; not included in `Favicons.html`
icon files + `site.webmanifest`	Delivered via Vite to `Resources/Public/Favicons/`

Refresh path in favicon-settings.json to adapt them to your deployed asset path if you serve icons via a fixed URL prefix.

Expected filenames (default values)

After a full generation, these should be found 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 are only using a dynamic manifest)

Website settings

Key	Default
`pageFaviconsFile`	`EXT:mp_core/Resources/Private/Partials/Page/Favicons.html`

Override in the website settings or settings.yaml only if you deploy a custom Fluid partial.

Validation

RealFaviconGenerator favicon check
In the browser: <head> Click and request ?type=8412 for Manifest JSON
CLI update check (if available) favicon-output.json): npx real-favicon check-for-update favicon-output.json