Merge pull request #4445 from alphagov/transition-favicons-v5

Implement transitional crown favicons (v5.0)

CHANGELOG.md

@@ -20,6 +20,41 @@ Otherwise, to update to the new logo:
 
 This change was made in [pull request #4449: Implement transitional crown in the Header component (v5.0)](https://github.com/alphagov/govuk-frontend/pull/4449).
 
+#### Check your favicons, app icons and OpenGraph image still work
+
+We've changed the names, formats and sizes of icon assets that we distribute in Frontend. You will want to check that the correct files are in place.
+
+The following files have been added to the assets folder:
+
+- manifest.json
+- images/favicon.svg
+- images/govuk-icon-180.png
+- images/govuk-icon-192.png
+- images/govuk-icon-512.png
+- images/govuk-icon-mask.svg
+
+The following files have been removed from the assets folder:
+
+- images/govuk-apple-touch-icon.png
+- images/govuk-apple-touch-icon-152x152.png
+- images/govuk-apple-touch-icon-167x167.png
+- images/govuk-apple-touch-icon-180x180.png
+- images/govuk-mask-icon.svg
+
+If you're not using the Nunjucks page template, you will need to replace the list of icons in the template's `head` with the following:
+
+```html
+<link rel="icon" sizes="48x48" href="/assets/images/favicon.ico">
+<link rel="icon" sizes="any" href="/assets/images/favicon.svg" type="image/svg+xml">
+<link rel="mask-icon" href="/assets/images/govuk-icon-mask.svg" color="#0b0c0c">
+<link rel="apple-touch-icon" href="/assets/images/govuk-icon-180.png">
+<link rel="manifest" href="/assets/manifest.json">
+```
+
+You will need to update the file path to match your assets folder if it's not at the default location.
+
+This change was made in [pull request #4445: Implement transitional crown favicons (v5.0)](https://github.com/alphagov/govuk-frontend/pull/4445).
+
 ### Recommended changes
 
 We've recently made some non-breaking changes to GOV.UK Frontend. Implementing these changes will make your service work better.

packages/govuk-frontend/src/govuk/assets/manifest.json

@@ -0,0 +1,39 @@
+{
+  "icons": [
+    {
+      "src": "images/favicon.ico",
+      "type": "image/x-icon",
+      "sizes": "48x48"
+    },
+    {
+      "src": "images/favicon.svg",
+      "type": "image/svg+xml",
+      "sizes": "150x150",
+      "purpose": "any"
+    },
+    {
+      "src": "images/govuk-icon-180.png",
+      "type": "image/png",
+      "sizes": "180x180",
+      "purpose": "maskable"
+    },
+    {
+      "src": "images/govuk-icon-192.png",
+      "type": "image/png",
+      "sizes": "192x192",
+      "purpose": "maskable"
+    },
+    {
+      "src": "images/govuk-icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "maskable"
+    },
+    {
+      "src": "images/govuk-icon-mask.svg",
+      "type": "image/svg+xml",
+      "sizes": "150x150",
+      "purpose": "monochrome"
+    }
+  ]
+}

packages/govuk-frontend/src/govuk/template.njk

@@ -10,12 +10,11 @@
     <meta name="theme-color" content="{{ themeColor | default("#0b0c0c", true) }}"> {#- Hardcoded value of $govuk-black #}
 
     {% block headIcons %}
-      <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default("/assets", true) }}/images/favicon.ico" type="image/x-icon">
-      <link rel="mask-icon" href="{{ assetPath | default("/assets") }}/images/govuk-mask-icon.svg" color="{{ themeColor | default("#0b0c0c", true) }}"> {#- Hardcoded value of $govuk-black #}
-      <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default("/assets", true) }}/images/govuk-apple-touch-icon-180x180.png">
-      <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default("/assets", true) }}/images/govuk-apple-touch-icon-167x167.png">
-      <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default("/assets", true) }}/images/govuk-apple-touch-icon-152x152.png">
-      <link rel="apple-touch-icon" href="{{ assetPath | default("/assets", true) }}/images/govuk-apple-touch-icon.png">
+      <link rel="icon" sizes="48x48" href="{{ assetPath | default("/assets", true) }}/images/favicon.ico">
+      <link rel="icon" sizes="any" href="{{ assetPath | default("/assets", true) }}/images/favicon.svg" type="image/svg+xml">
+      <link rel="mask-icon" href="{{ assetPath | default("/assets", true) }}/images/govuk-icon-mask.svg" color="{{ themeColor | default("#0b0c0c") }}"> {#- Hardcoded value of $govuk-black #}
+      <link rel="apple-touch-icon" href="{{ assetPath | default("/assets", true) }}/images/govuk-icon-180.png">
+      <link rel="manifest" href="{{ assetPath | default("/assets", true) }}/manifest.json">
     {% endblock %}
 
     {% block head %}{% endblock %}

packages/govuk-frontend/src/govuk/template.test.js

@@ -94,7 +94,7 @@ describe('Template', () => {
 
     it('uses a default assets path of /assets', () => {
       const $ = renderTemplate('govuk/template.njk')
-      const $icon = $('link[rel="shortcut icon"]')
+      const $icon = $('link[rel="icon"][sizes="48x48"]')
 
       expect($icon.attr('href')).toEqual('/assets/images/favicon.ico')
     })
@@ -105,12 +105,51 @@ describe('Template', () => {
           assetPath: '/whatever'
         }
       })
-
-      const $icon = $('link[rel="shortcut icon"]')
+      const $icon = $('link[rel="icon"][sizes="48x48"]')
 
       expect($icon.attr('href')).toEqual('/whatever/images/favicon.ico')
     })
 
+    describe('favicons', () => {
+      it('has an .ico icon', () => {
+        const $ = renderTemplate('govuk/template.njk')
+        const $icon = $('link[rel="icon"][href$=".ico"]')
+
+        expect($icon.attr('sizes')).toEqual('48x48')
+        expect($icon.attr('href')).toEqual('/assets/images/favicon.ico')
+      })
+
+      it('has an .svg icon', () => {
+        const $ = renderTemplate('govuk/template.njk')
+        const $icon = $('link[rel="icon"][href$=".svg"]')
+
+        expect($icon.attr('sizes')).toEqual('any')
+        expect($icon.attr('href')).toEqual('/assets/images/favicon.svg')
+      })
+
+      it('has a mask-icon', () => {
+        const $ = renderTemplate('govuk/template.njk')
+        const $icon = $('link[rel="mask-icon"]')
+
+        expect($icon.attr('color')).toEqual('#0b0c0c')
+        expect($icon.attr('href')).toEqual('/assets/images/govuk-icon-mask.svg')
+      })
+
+      it('has an apple-touch-icon', () => {
+        const $ = renderTemplate('govuk/template.njk')
+        const $icon = $('link[rel="apple-touch-icon"]')
+
+        expect($icon.attr('href')).toEqual('/assets/images/govuk-icon-180.png')
+      })
+
+      it('has a linked web manifest file', () => {
+        const $ = renderTemplate('govuk/template.njk')
+        const $icon = $('link[rel="manifest"]')
+
+        expect($icon.attr('href')).toEqual('/assets/manifest.json')
+      })
+    })
+
     describe('opengraph image', () => {
       it('is not included if neither assetUrl nor opengraphImageUrl are set ', () => {
         const $ = renderTemplate('govuk/template.njk')