Work out where we need to update the crown in GOV.UK Frontend

[stevenjmesser]

What

Work out where the GOV.UK crown needs to change.

Why

So it's consistent across GOV.UK Frontend.

Who needs to be involved

Designer, developer

Done when

• Have a list of places we need to change things and assets we need to create

[colinrotherham]

Lots of crown related assets here:
https://github.com/alphagov/govuk-frontend/tree/main/packages/govuk-frontend/src/govuk/assets/images

Social media share icons, "mask icon" for browser toolbars etc

[querkmachine]

When backporting to v4 and earlier versions of Frontend, there's also a PNG version of the header crown that needs creating.

[matteason]

Sorry to butt in - I came across this change the other day and noticed today that e-petitions uses the crown to signify government responses:

I've opened an issue with them here: alphagov/e-petitions#878

[christopherthomasdesign]

List of places we need to change the crown in GOV.UK Frontend, with some notes and questions we still need to answer. List made in a scoping session between @christopherthomasdesign, @stevenjmesser and @36degrees.

Header inline SVG (the obvious one)

• Intention for new SVG to be a lockup that includes the GOV.UK text (see Use SVG lockup for GOV.UK in header #1739)
• Need to ensure this is accessible, has an accessible name
• Do we need to remove role="presentation"?
• Ensure it still aligns with the text in product name headers
• Assumption: From v5 onwards we only need to support the new crown
• Assumption: We'll keep the existing inline implementation. (This means we want to keep the file size of the SVG as small as possible as it's sent on every request)
• Question: How clever do we want to be? Mirrored SVG for example can't be opened in Illustrator

Header fallback PNG (<v4 only)

• We need to support the old and new crown at the same time
• Question: Are we going to ship a v4 or older version that includes the crown change?
• Question: Do we include a fallback PNG to match the existing implementation, or just remove it when using the new logo
• Question: Do we want to use a full lockup for v4 as well or just switch out the crown?

Favicon

• Question: Do we want to optimise the favicon's design for even smaller display? e.g. by removing some of the dots and simplifying the graphic? Can it actually be changed without needing further sign off?
• Question: Is the favicon image used anywhere other than browser tabs, especially where it would appear at a larger size? In which case we probably don't want to change the design.
• Do we want to look at what the 'state of the art' is for the technical implementation of the favicon (https://www.leereamsnyder.com/blog/favicons-in-2021)
• How does this work with v4?

Apple iPhone / iPad icon

• Required in different sizes (120x120, 152x152, 167x167, 180x180)
• Think these are PNG
• How does this work with v4?

Mask SVG (used for pinned tabs in Safari?)

• Single colour, with colour defined in the HTML
• Potential for dark mode aware colour?
• How does this work with v4?

Open Graph image (used when e.g sharing links on social media)

• PNG
• How does this work with v4?

---

NB the footer crest is not in scope for being updated just yet, but that might change in the future.