Implement transitional crown favicons (v5.0)

[querkmachine]

Implements transitional crown assets for browser 'favourite' icons, homescreen icons and OpenGraph sharing graphics. That is, assets that utilise the formats agreed for Frontend v5 (#4175), but using the St. Edward's crown. Part of #4440.

This is intended to be a transitional step prior to launching the Tudor crown in a future version: #4354

Changes

• Carries over the ICO, mask icon and OpenGraph image from GOV.UK Frontend v4 unchanged.
• Renames all of the icons to be largely agnostic to their usage, instead being named for the image's dimensions.
• Changes the way the ICO favicon is referenced in HTML:
  • Fixes a potential issue with the sizes attribute where Chrome would always use the ICO even when an SVG favicon was available (sizes issue detailed here in section 2.3).
  • Changes rel="shortcut icon" to rel="icon". The shortcut keyword was only needed for supporting Internet Explorer 8 and earlier, which Frontend no longer does.
• Removes apple-touch-icon sizes smaller than 180×180. These aren't used by Apple devices released in the last few years and lower resolution Apple devices can scale down the larger image automatically.
• Adds an SVG version of the favicon graphic. We've opted not to have this icon change depending on the user's dark or light mode setting.
• Adds 192×192 and 512×512 PNG icons.
• Redesigns the 180×180 PNG icon to match the larger versions.
• Adds a manifest.json file listing all of the available icon sizes and their expected uses.
• Adds Jest tests for the icons and manifest file.

Assets included

Name	Type	Dimensions	Notes
Icon container favicon.ico	Icon container	16×16, 32×32, 48×48	Multiple PNGs bundled into a single container. Primarily used by Safari (iOS/iPadOS), IE and some third-parties. This has been carried over from v4.
SVG icon favicon.svg	SVG	variable	Primarily used by Chromium and Firefox. This is new for v5.
iOS icon govuk-icon-180.png	PNG	180×180	Primarily used on the iOS/iPadOS homescreen. This has been redesigned for v5.
Android icon govuk-icon-192.png	PNG	192×192	Primarily used on the Android homescreen. This is new for v5.
Large icon govuk-icon-512.png	PNG	512×512	Fallback for any applications that request a larger size but cannot use SVG. May also be used by Safari 17's "Add to dock" feature on macOS. This is new for v5.
Mask icon govuk-icon-mask.svg	SVG	variable	Primarily used by Safari (macOS) and MacBooks featuring the Touch Bar. This has been carried over from v4.
OpenGraph image govuk-opengraph-image.png	PNG	1200×630	Primarily used when sharing on third-party websites and services. This has been carried over from v4.

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-5.0.0-beta.1.min.css	114 KiB
dist/govuk-frontend-5.0.0-beta.1.min.js	37.93 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	77.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	72.89 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.86 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	113.64 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	38.11 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.38 KiB

Modules

File	Size
all.mjs	69.22 KiB
components/accordion/accordion.mjs	21.47 KiB
components/button/button.mjs	4.5 KiB
components/character-count/character-count.mjs	21.05 KiB
components/checkboxes/checkboxes.mjs	5.63 KiB
components/error-summary/error-summary.mjs	5.89 KiB
components/exit-this-page/exit-this-page.mjs	15.89 KiB
components/header/header.mjs	3.71 KiB
components/notification-banner/notification-banner.mjs	4.34 KiB
components/radios/radios.mjs	4.63 KiB
components/skip-link/skip-link.mjs	3.61 KiB
components/tabs/tabs.mjs	9.47 KiB

View stats and visualisations on the review app

---

Action run for b71b377

[colinrotherham]

Looking good @querkmachine 🙌

Mind if you and @claireashworth work together to add a new Breaking changes entry to the CHANGELOG specifically about:

1. Removing old govuk-apple-touch-* icons
2. Removing old govuk-mask-* icons
3. Adding new govuk-icon-* icons
4. Adding new manifest.json file

Perhaps consolidating it with other removed images changes?

#### Remove the fallback GOV.UK crown logo from your HTML

As lots of services may have these files committed, probably want them to confirm the new files are reachable from assetPath (or /assets) without 404s

[querkmachine]

I've added a changelog entry, though I have not consolidated it with the fallback crown entry as they feel conceptually separate and have fairly different associated HTML changes.

[claireashworth]

Just a couple of minor suggestions from me. Also, should this be moved within the rest of the v5 information or is that done for the release rather than the pre-release?

[colinrotherham]

@claireashworth It's useful for beta participants for now (separately) until the beta's over, then combine?