Render Favicons with Neos CMS

Favicons.fusion

prototype(Abte.Site:Component.Favicon) < prototype(Neos.Fusion:Component) {

    thirtytwo = Carbon.Image:ImageUri {
        asset = ${ q(site).property('logo') }
        width = '32'
        height = '32'
        maximumWidth = '32'
        maximumHeight = '32'
        allowCropping = TRUE
    }
    fiftyseven = Carbon.Image:ImageUri {
        asset = ${ q(site).property('logo') }
        width = '57'
        height = '57'
        maximumWidth = '57'
        maximumHeight = '57'
        allowCropping = TRUE
    }
    seventysix = Carbon.Image:ImageUri {
        asset = ${ q(site).property('logo') }
        width = '76'
        height = '76'
        maximumWidth = '76'
        maximumHeight = '76'
        allowCropping = TRUE
    }
    ninetysix = Carbon.Image:ImageUri {
        asset = ${ q(site).property('logo') }
        width = '96'
        height = '96'
        maximumWidth = '96'
        maximumHeight = '96'
        allowCropping = TRUE
    }
    onetwenty = Carbon.Image:ImageUri {
        asset = ${ q(site).property('logo') }
        width = '120'
        height = '120'
        maximumWidth = '120'
        maximumHeight = '120'
        allowCropping = TRUE
    }
    onetwentyeight = Carbon.Image:ImageUri {
        asset = ${ q(site).property('logo') }
        width = '128'
        height = '128'
        maximumWidth = '128'
        maximumHeight = '128'
        allowCropping = TRUE
    }
    onefortyfour = Carbon.Image:ImageUri {
        asset = ${ q(site).property('logo') }
        width = '144'
        height = '144'
        maximumWidth = '144'
        maximumHeight = '144'
        allowCropping = TRUE
    }
    onefiftytwo = Carbon.Image:ImageUri {
        asset = ${ q(site).property('logo') }
        width = '152'
        height = '152'
        maximumWidth = '152'
        maximumHeight = '152'
        allowCropping = TRUE
    }
    oneeighty = Carbon.Image:ImageUri {
        asset = ${ q(site).property('logo') }
        width = '180'
        height = '180'
        maximumWidth = '180'
        maximumHeight = '180'
        allowCropping = TRUE
    }
    oneninetytwo = Carbon.Image:ImageUri {
        asset = ${ q(site).property('logo') }
        width = '192'
        height = '192'
        maximumWidth = '192'
        maximumHeight = '192'
        allowCropping = TRUE
    }
    oneninetysix = Carbon.Image:ImageUri {
        asset = ${ q(site).property('logo') }
        width = '196'
        height = '196'
        maximumWidth = '196'
        maximumHeight = '196'
        allowCropping = TRUE
    }
    twotwoeight = Carbon.Image:ImageUri {
        asset = ${ q(site).property('logo') }
        width = '228'
        height = '228'
        maximumWidth = '228'
        maximumHeight = '228'
        allowCropping = TRUE
    }



	renderer = afx`
        <link rel="icon" href={props.thirtytwo} sizes="32x32" />
        <link rel="icon" href={props.fiftyseven} sizes="57x57" />
        <link rel="icon" href={props.seventysix} sizes="76x76" />
        <link rel="icon" href={props.ninetysix} sizes="96x96" />
        <link rel="icon" href={props.onetwentyeight} sizes="128x128" />
        <link rel="icon" href={props.oneninetytwo} sizes="192x192" />
        <link rel="icon" href={props.twotwoeight} sizes="228x228" />

        <link rel="shortcut icon" href={props.oneninetysix} sizes="196x196" />

        <link rel="apple-touch-icon" href={props.onetwenty} sizes="120x120" />
        <link rel="apple-touch-icon" href={props.onefiftytwo} sizes="152x152" />
        <link rel="apple-touch-icon" href={props.oneeighty} sizes="180x180" />

        <meta name="msapplication-TileColor" content="#FFFFFF" />
        <meta name="msapplication-TileImage" content={props.onefortyfour} />
	`
}

NodeTypes.Document.yaml

'abteilung.Theme:Home':
  ui:
    label: Home
    icon: 'icon-globe'
  superTypes:
    'Neos.NodeTypes:Page': TRUE
  childNodes:
    header:
      type: 'Neos.Neos:ContentCollection'
      position: 'before main'
    main:
      type: 'Neos.Neos:ContentCollection'
  properties:
    'favIcon':
      type: 'Neos\Media\Domain\Model\ImageInterface'
      ui:
        label: 'favIcon Image (PNG, square)'
        reloadIfChanged: TRUE
        inspector:
          group: 'image'
          position: 93