Implement the Tudor crown favicons (v5.x)

[querkmachine]

Implements the Tudor crown for browser 'favourite' icons, homescreen icons and OpenGraph sharing graphics. Part of #4178. This follows the spike work in #4185 using the finalised set of icons and production-ready assets.

The code and filename changes that were previously in this PR have since moved to #4445.

Warning

This PR should not be merged until we have approval to do so.

Changes

• Replaces icons using the St. Edward's crown with equivalents using the Tudor crown.
• Redesigns the smallest icon sizes (48px and below) to use a simplified version of the Tudor crown icon.
• Inverts the design of the mask icon to be consistent with how the icon is presented elsewhere. The crown is now transparent and presented within a coloured box.

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. All images use simplified crown design. Primarily used by Safari (iOS/iPadOS), IE and some third-parties.
SVG icon favicon.svg	SVG	variable	Uses simplified crown design. Primarily used by Chromium and Firefox.
iOS icon govuk-icon-180.png	PNG	180×180	Primarily used on the iOS/iPadOS homescreen.
Android icon govuk-icon-192.png	PNG	192×192	Primarily used on the Android homescreen.
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.
Mask icon govuk-icon-mask.svg	SVG	variable	Uses simplified crown design. Primarily used by Safari (macOS) and MacBooks featuring the Touch Bar.
OpenGraph image govuk-opengraph-image.png	PNG	1200×630	Primarily used when sharing on third-party websites and services.

Screenshots

All screenshots show the current St. Edward's crown icon, as used on GOV.UK, alongside the new icon introduced in this PR.

Chrome 118, macOS 13.6

Old: Icon container
New: SVG icon

Chrome 117 (tab switcher), Android 14.0¹

Old: Icon container OR iOS icon (which was used kept changing between different tests)
New: Android icon

Firefox 118, macOS 13.6

Old: Icon container
New: SVG icon

Safari 17.0, macOS 13.6 (separate layout)

Both: Mask icon

Safari 17.0, macOS 13.6 (compact layout)

Both: Mask icon

Safari 17.0, iOS 17.0 (tab switcher)

Both: Icon container

Internet Explorer 11, Windows 10¹

Both: Icon container

macOS 14.0 dock

Old: iOS icon²
New: iOS icon²

iOS 17.0 homescreen

Both: iOS icon

Android homescreen¹

Old: iOS icon
New: Android icon

Circular icons, Android 14 (Google Pixel 8)

Squircle icons, Android 13 (Samsung Galaxy S23)

Rounded square icons, Android 13 (Xiaomi Redmi Note 12)

Footnotes

1. This screenshot was captured via a simulator or remote capturing device. It may not be displayed at the true resolution, and may appear blurrier or more pixellated than in reality. ↩ ↩² ↩³

2. macOS seems uses whichever PNG is listed first in the manifest file, so long as that is at least 180×180. If no suitable icon is in the manifest, or the manifest file doesn't exist, the apple-touch-icon meta tag is used. If that is absent, it uses the icon container favicon. If none are available, a generic letter/colour-based icon is generated instead. ↩ ↩²

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-5.0.0-beta.2.min.css	113.65 KiB
dist/govuk-frontend-5.0.0-beta.2.min.js	38.28 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	77.78 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	73.09 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.27 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.38 KiB

Modules

File	Size
all.mjs	69.41 KiB
components/accordion/accordion.mjs	21.67 KiB
components/button/button.mjs	4.7 KiB
components/character-count/character-count.mjs	21.24 KiB
components/checkboxes/checkboxes.mjs	5.83 KiB
components/error-summary/error-summary.mjs	6.09 KiB
components/exit-this-page/exit-this-page.mjs	16.08 KiB
components/header/header.mjs	3.9 KiB
components/notification-banner/notification-banner.mjs	4.54 KiB
components/radios/radios.mjs	4.83 KiB
components/skip-link/skip-link.mjs	3.81 KiB
components/tabs/tabs.mjs	9.66 KiB

View stats and visualisations on the review app

---

Action run for e3e4ec4

[querkmachine]

Rather frustratingly, the icons seem to work well absolutely everywhere except when added to the Android homescreen by Chrome.

In testing, this only happens specifically with Chrome too. Firefox and Edge on Android also have the ability to save webpages to the home screen, and both of these crop the icon in the expected manner—i.e. without breaching the defined safe area. This has been seen happening in Android versions 11 through 14.

This may be an issue specific to Android Chrome, in which case I'll probably raise it on the Chrome bug tracker. That would leave that part of this current implementation in a bit of a limbo state, however.

[querkmachine]

The issue with the Chrome on Android icons has now been reported: alphagov/reported-bugs#85

On the assumption that the issue there lies with Chrome, I think this PR can be reviewed for now.

[colinrotherham]

For comparison, can we recreate the issue with other site's manifest files?

Or if not, is there anything obviously different in ours that might cause the issue?

[querkmachine]

For comparison, can we recreate the issue with other site's manifest files?

@colinrotherham I haven't actually been able to find any equivalents in the wild.

Every website I've tried looking at so far either does not define any maskable icons in their manifest, or doesn't use a manifest at all. This includes many of the websites tutorialising on how to use them and Google's own PWAs, which may not be the most ringing endorsement.

Or if not, is there anything obviously different in ours that might cause the issue?

As far as I can gather our manifest is perfectly fine. It complies with the spec, Chrome's devtools don't raise anything pressing, and other Android browsers don't seem to have an issue with masking the icons.

[querkmachine]

Found one eventually, Mastodon. Their maskable icons also seem to be getting messed up by Android Chrome.

---

Edit: Also the Co-op.

[github-actions]

Uh oh! @querkmachine, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.