-
Notifications
You must be signed in to change notification settings - Fork 333
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 (v5.x) #4354
Conversation
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for e3e4ec4 |
f9c22e3
to
33dcaa2
Compare
33dcaa2
to
fcec906
Compare
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. |
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. |
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? |
@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.
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. |
fcec906
to
89dd846
Compare
89dd846
to
e3e4ec4
Compare
This comment was marked as off-topic.
This comment was marked as off-topic.
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. |
Implement the Tudor crown favicons (v5.x)
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
Assets included
favicon.ico
favicon.svg
govuk-icon-180.png
govuk-icon-192.png
govuk-icon-512.png
govuk-icon-mask.svg
govuk-opengraph-image.png
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.01
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 101
Both: Icon container
macOS 14.0 dock
Old: iOS icon2
New: iOS icon2
iOS 17.0 homescreen
Both: iOS icon
Android homescreen1
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
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 ↩3
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. ↩ ↩2