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.

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

Implement the Tudor crown favicons (v4.x) #4376

Merged
merged 1 commit into from
Jan 4, 2024
Merged

Conversation

querkmachine
Copy link
Member

Implements the Tudor crown for browser 'favourite' icons, homescreen icons and OpenGraph sharing graphics whilst maintaining the same set of formats provided in prior v4 releases. Part of #4179.

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.
Apple touch icon (120)
govuk-apple-touch-icon.png
PNG 120×120 Primarily used on the iOS homescreen on iPhones with @2x retina displays. May also be used by Android devices.
Apple touch icon (152)
govuk-apple-touch-icon-152.png
PNG 152×152 Primarily used on the homescreen of iPads and iPad minis. May also be used by Android devices.
Apple touch icon (167)
govuk-apple-touch-icon-167.png
PNG 167×167 Primarily used on the homescreen of iPad Pros. May also be used by Android devices.
Apple touch icon (180)
govuk-apple-touch-icon-180.png
PNG 180×180 Primarily used on the iOS homescreen on iPhones with @3x retina displays. May also be used by Android devices and docked webpages in macOS Sonoma.
Mask icon
govuk-mask-icon.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.

@querkmachine querkmachine self-assigned this Oct 24, 2023
@govuk-design-system-ci govuk-design-system-ci temporarily deployed to govuk-frontend-pr-4376 October 24, 2023 10:49 Inactive
@querkmachine querkmachine requested a review from a team October 24, 2023 10:57
@querkmachine querkmachine marked this pull request as ready for review October 24, 2023 10:57
@querkmachine querkmachine linked an issue Oct 30, 2023 that may be closed by this pull request
@querkmachine querkmachine changed the title [DO NOT MERGE] Implement the Tudor crown favicons (v4.x) Implement the Tudor crown favicons (v4.x) Jan 4, 2024
@querkmachine
Copy link
Member Author

Merging in preparation for release w/c 15th January.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Implement the new crown assets in Frontend (v4)
3 participants