Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Favicon for Branding Consistency #998

Open
Dtphelan1 opened this issue Aug 24, 2022 · 4 comments
Open

Update Favicon for Branding Consistency #998

Dtphelan1 opened this issue Aug 24, 2022 · 4 comments

Comments

@Dtphelan1
Copy link

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.
@Dtphelan1 Dtphelan1 changed the title Updated Favicon for Branding Consistency Update Favicon for Branding Consistency Aug 24, 2022
@MrDeshaies
Copy link
Contributor

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

image

image

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

@Dtphelan1
Copy link
Author

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

@nickgertler
Copy link

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
Copy link
Author

Dtphelan1 commented Mar 14, 2023 •
edited

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Dtphelan1 @MrDeshaies @nickgertler