How to use custom favicon in next-appdir

[powderham]

I'm currently looking at implementing dsfr on my app.

Upon following the docs, since including DsfrHead I've had my favicons replaced by the dsfr favicon.

Looking at the source code below, I don't see a way to overwrite this.

export function DsfrHead(props) {
    const { defaultColorScheme, preloadFonts = [] } = props;
    return (React.createElement(React.Fragment, null,
        ...
        React.createElement("link", { rel: "icon", href: getAssetUrl(FaviconSvg), type: "image/svg+xml" }),
        React.createElement("link", { rel: "shortcut icon", href: getAssetUrl(FaviconIco), type: "image/x-icon" }),
        ));
}

Is this intentional, or can I open a PR to pass a prop to toggle these favicons on/off?

[garronej]

Hi @powderham,

It's intentional since all governemental website should have the same favicon but allright, it could be a good idea to at least give an option not to include the favicon.

That being said, are you freelancing for the french public service?
I'm saying that because this design system is only meant to be used for French Governemental website...

[garronej]

I mean do what your whant, it's open source and I'm just the dev but be aware that you could get your website taken down by the french authorities if it looks too much alike a governemental website...

[powderham]

Interesting, I can't see this written anywhere in the guides. Perhaps best to do so, given it's in the public domain.

I'm not freelancing for the french public service, but I think the component library is smart, and with a few tweaks would serve as a nice base for my web app.

I'll look now at opening a PR to disclude the favicons.

Are there any other french public sector assets or similar baked in that i should be aware of before using it?

[garronej]

Yes it's my bad I should have included warning everywhere before promoting this to social media.
I'd say be carefull when using assets.

[garronej]

Hi, I found the GGU of the DS: https://www.systeme-de-design.gouv.fr/cgu/

[rtaieb]

Hi @garronej , Could this issue be reopened ? It would be nice to be able to opt out of the DSFR favicon when using NextJS app dir. (As @powderham , I could'n find a way to do it).

Thanks :)

[garronej]

Hi @rtaieb,
The issue here is that the Marianne Favicon is a requirement from the DSFR team it's not something that you are supposed to customize.
I guess we could argue that you might want to programatically edit the favicon to show notifications for example.
Could you explain your usecase just so I can motivate why I'm enabling the favicon to be customized.

Thanks

[rtaieb]

Well I'm working for the ADEME, which is associated to the Ministère de la Transition Ecologique. From what we've been told by the ADEME lead desinger, the ADEME can take the DSFR as a basis, and then tweak it depending on the product / design needs. That's what I've been doing so far, but couldn't override the favicon set by DsfrHead component...

[garronej]

Ok, I'll add an option

[garronej]

Done.
It's beeing released.
It's ... v1.0.0

[rtaieb]

Thank you so much for this, and in fact for this whole module 🥇

[garronej]

You're welcome ☺️