[Favicons in Neos CMS] Render Favicons with Neos CMS #neos #fusion

AbtractPage.fusion

prototype(Joekolade.SbfwSite:Document.AbstractPage) < prototype(Neos.Neos:Page) {
    head {
        favicons = Joekolade.SbfwSite:Component.Favicon
        
        headTags = Neos.Fusion:Component {
            renderer = afx`
                <meta http-equiv="x-ua-compatible" content="ie=edge" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            `
        }
    }
    body = Joekolade.SbfwSite:Component.DefaultLayout {
        content = ''
        @process.normalize = CodeQ.UnicodeNormalizer:Normalizer
    }
}

Favicons.fusion

prototype(Joekolade.SbfwSite:Component.Favicon) < prototype(Neos.Fusion:Component) {

    thirtytwo = Joekolade.SbfwSite:Component.ImageUri {
        asset = ${ q(site).property('favIcon') }
        width = '32'
        height = '32'
        maximumWidth = '32'
        maximumHeight = '32'
        allowCropping = TRUE
    }
    fiftyseven = Joekolade.SbfwSite:Component.ImageUri {
        asset = ${ q(site).property('favIcon') }
        width = '57'
        height = '57'
        maximumWidth = '57'
        maximumHeight = '57'
        allowCropping = TRUE
    }
    seventysix = Joekolade.SbfwSite:Component.ImageUri {
        asset = ${ q(site).property('favIcon') }
        width = '76'
        height = '76'
        maximumWidth = '76'
        maximumHeight = '76'
        allowCropping = TRUE
    }
    ninetysix = Joekolade.SbfwSite:Component.ImageUri {
        asset = ${ q(site).property('favIcon') }
        width = '96'
        height = '96'
        maximumWidth = '96'
        maximumHeight = '96'
        allowCropping = TRUE
    }
    onetwenty = Joekolade.SbfwSite:Component.ImageUri {
        asset = ${ q(site).property('favIcon') }
        width = '120'
        height = '120'
        maximumWidth = '120'
        maximumHeight = '120'
        allowCropping = TRUE
    }
    onetwentyeight = Joekolade.SbfwSite:Component.ImageUri {
        asset = ${ q(site).property('favIcon') }
        width = '128'
        height = '128'
        maximumWidth = '128'
        maximumHeight = '128'
        allowCropping = TRUE
    }
    onefortyfour = Joekolade.SbfwSite:Component.ImageUri {
        asset = ${ q(site).property('favIcon') }
        width = '144'
        height = '144'
        maximumWidth = '144'
        maximumHeight = '144'
        allowCropping = TRUE
    }
    onefiftytwo = Joekolade.SbfwSite:Component.ImageUri {
        asset = ${ q(site).property('favIcon') }
        width = '152'
        height = '152'
        maximumWidth = '152'
        maximumHeight = '152'
        allowCropping = TRUE
    }
    oneeighty = Joekolade.SbfwSite:Component.ImageUri {
        asset = ${ q(site).property('favIcon') }
        width = '180'
        height = '180'
        maximumWidth = '180'
        maximumHeight = '180'
        allowCropping = TRUE
    }
    oneninetytwo = Joekolade.SbfwSite:Component.ImageUri {
        asset = ${ q(site).property('favIcon') }
        width = '192'
        height = '192'
        maximumWidth = '192'
        maximumHeight = '192'
        allowCropping = TRUE
    }
    oneninetysix = Joekolade.SbfwSite:Component.ImageUri {
        asset = ${ q(site).property('favIcon') }
        width = '196'
        height = '196'
        maximumWidth = '196'
        maximumHeight = '196'
        allowCropping = TRUE
    }
    twotwoeight = Joekolade.SbfwSite:Component.ImageUri {
        asset = ${ q(site).property('favIcon') }
        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

'Joekolade.SbfwSite:Document.HomePage':
  superTypes:
    'Joekolade.SbfwSite:Document.AbstractPage': true
    'Joekolade.SbfwSite:Constraint.Document.Restricted': true
    'Joekolade.SbfwSite:Mixin.InspectorGeneral': true
  ui:
    label: i18n
    icon: icon-globe
  properties:
    favIcon:
      type: 'Neos\Media\Domain\Model\ImageInterface'
      ui:
        label: 'favIcon Image (PNG, square)'
        reloadIfChanged: TRUE
        inspector:
          group: general
          position: 93