Update favicons to new formats

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

@@ -82,7 +82,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')
     })
@@ -93,12 +93,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')