Decide how much we want to change the favicon

[christopherthomasdesign]

What

As we're updating the crown, now would be a good time to revisit the favicon. This should be a short investigation to work out the best way forward.

The simplest version of this is to update the existing graphic to use the new crown. But there are other possibilities – some browsers now support SVG for favicons, and we could generally do some work to make sure our favicon implementation is up to date with modern standards.

We could also simplify the design of the crown to work better at very small sizes (to use only in the favicon). But we're not currently sure if that's something we can do.

Why

• To create consistency with the new crown
• Potentially, to improve performance and visual clarity over the current solution

Who needs to be involved

Developer, designer

Done when

[querkmachine]

I've trawled through our existing favicon and sharing graphics, seen what's shakin' in the space currently, and come up with the following thoughts.

These are strictly for v5 onwards.
v4.x and older will use updated versions of the existing favicons they shipped with.

Keep these

Current filename	Filetype	Dimensions	Notes
favicon.ico	Icon	(up to) 32×32	Used by iOS/iPadOS Safari in the browser. Also used by legacy browsers. This is still used in enough contexts that we're probably best keeping it. We may need to change how we're using the sizes attribute, however.
govuk-mask-icon.svg	SVG	[square]	Used by macOS Safari. Expected to be a flat colour, background-less, black icon that is coloured according to a meta tag in HTML.
govuk-apple-touch-icon-180x180.png	PNG	180×180	Used by iOS and iPadOS. Has unchangingly been the standard size for iOS app icons since around 2017. Could be renamed with removal of other Apple icons.
govuk-opengraph-image.png	PNG	1200×630	Used for OpenGraph-based sharing. Different services crop the image differently so practically speaking only the centre square is a safe zone.

Bin these

Current filename	Filetype	Dimensions	Notes
govuk-apple-touch-icon.png	PNG	120×120	Outdated. Lower density displays will scale down the 180x180 version automatically.
govuk-apple-touch-icon-152x152.png	PNG	152×152	As above.
govuk-apple-touch-icon-167x167.png	PNG	167×167	As above.

Add these

Potential filename	Filetype	Dimensions	Notes
favicon.svg	SVG	[square]	Favoured by Chromium and Firefox.
govuk-android.png	PNG	192×192	Android homescreen icon. Lower density displays will automatically scale this icon down as needed.
manifest.webmanifest1			A webmanifest file is required when defining icons for Android. It also allows for defining other types of metadata, including theme colours and how pages saved to the homescreen should be titled.

Optionally add these

Potential filename	Filetype	Dimensions	Notes
govuk-android-512.png	PNG	512×512	A super-size version of the icon for Android. This is seemingly only used for PWAs published to the Play Store but may be a nice-to-have in case future devices want an icon larger than 192×192.
govuk-android-maskable.png	PNG	192×192	A "maskable" version of the Android homescreen icon with a transparent background. Many Android launchers and themes allow users to apply their own custom background colours, textures and crop shapes to homescreen icons. Has a practically circular safe area but may be displayed at any shape. May require special considerations to ensure contrast. https://web.dev/maskable-icon/

Other thoughts

• Currently we include the 'GOV.UK' text on the iOS icons but not the others. Do we want to consider changing to only showing the crown to align with the others? This may be useful given the new crown is proportionally taller.
  • Displaying the text on the Android icons is less viable due to unpredictable ways that different Android launchers may crop the icon (e.g. to be circular).
• SVG favicons and Safari's mask icons allow for different colours to be used depending on the user's dark or light mode preference. If we wanted, we could use background-less versions of the crown for these icons and use the color scheme preference to ensure legibility across dark/light mode instead.
• Adding a manifest file allows us to specify what name should be used on a user's homescreen. Whilst we could default to just "GOV.UK", there's a good chance that services may want to be able to customise this aspect to mirror the name of their service. I don't think we have a good way of handling that, however. It isn't a requirement.

Footnotes

1. Not all web server software is initially configured to serve .webmanifest files with the expected Content-Type header. We could ship this file as manifest.json instead, though as far as I'm aware this is supported for legacy reasons and is not the preferred name in contemporary implementations. ↩

[querkmachine]

A draft pull request implementing the majority of the above thoughts is here, with many many screenshots:
#4185

[christopherthomasdesign]

Ok I've done a quick exploration into whether we should simplify the crown for the favicon. The hypothesis being that by removing a few dots from the crown, we can make a simpler, bolder image for really small sizes.

Three favicons, in order from left to right: the current GOV.UK one; the new crown; a simplified new crown.

We'd only use this in the favicon, nowhere else. Even for things like app icons or social media avatars, we should use the full crown because it's been signed off by GCS and will be what's being used in other digital gov comms.

For what it's worth I do think the simplified one looks a bit better. But there's only so much improvement you can get with a complex image at such a small size. Interested to see what others think.

[christopherthomasdesign]

Moving to blocked till beeps gets back from holiday and whilst we focus on Design System Day graphics.

[christopherthomasdesign]

Had a catch up with @querkmachine last week and made a couple of decisions to close this card:

• We'll use a simplified icon (as in my comment above) but as stated, only for favicons
• We're going to keep the favicons as white on black, rather than changing with light/dark mode – this is for visual clarity and brand consistency

We've now made a list of assets we need to create so can crack on with #4058