Update Favicon for Branding Consistency

canada-ca / aia-eia-js

Algorithmic Impact Assessment - Évaluation de l'incidence algorithmique (TS/JS)

https://canada-ca.github.io/aia-eia-js/

MIT License

57 stars 40 forks source link

Update Favicon for Branding Consistency #998

Open Dtphelan1 opened 2 years ago

Dtphelan1 commented 2 years ago

Is your feature request related to a problem? Please describe. Branding inconsistencies for websites can reduce user trust, a concern critical when collating sensitive information about business operations.

Describe the solution you'd like The project should use the maple-leaf favicon standard across other open.canada.ca pages, instead of the current default vue V-favicon.

Describe alternatives you've considered N/A

Additional context I'd be happy to make a PR introducing this change if that'd be helpful.

The site could also benefit from preview metatags like those generated by metatags.io, which I could also propose. This, however, is not something implemented on the default open.canada.ca webpage.

MrDeshaies commented 1 year ago

Hi Dylan (@Dtphelan1), thank you for noting this. However, when I view either the github site or the version deployed on open.canada.ca, I see the proper favicon (using Chrome on Windows). I confirmed in the network tab of DevTools that it fetches it from https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_30/assets/favicon.ico

Can you please confirm the steps you follow to see the Vue icon?

Dtphelan1 commented 1 year ago

Hmm very interesting! On Mac/Firefox, I still see the Vue favicon; see screenshot below. I'll poke around in the Head tags to see if I can come up with a more actionable description of the issue!

nickgertler commented 1 year ago

Just adding that I also see the Vue icon (MacOS/Safari).

The head tags show that it's fetching from /img/icons/favicon-32x32.png (along with the 16x16 variant). There are a few instances in the head where the proper icon is linked to, but they're all in "if IE" sections. One of the proper links still appears to be active despite being within an "if IE" section, but Safari seems to prefer the Vue icon. Chrome shows the proper icon.

The official icon is served as an ICO, while the Vue icon is a PNG. Is it possible Safari and Firefox prefer the PNG icons if given the option?

Dtphelan1 commented 1 year ago

Here's something more actionable: it looks like a number of tags in the document's <head> reference placeholder-favicon images that were created on the initial commit of the repository, located in public/img/icons. I don't see anywhere in your source code (i.e. what's on master) that imports or references those files, but it's possible the rel='icon' tags at fault are being dynamically generated and added on-build.

Removing the images found here might prevent the generation of those tags? Or at least it would render those tags irrelevant, and fallback to the proper favicon.