diff --git a/CHANGELOG.md b/CHANGELOG.md
index a539e69d84..0bbb5e0a8f 100644
--- a/CHANGELOG.md
+++ b/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
+
+
+
+
+
+```
+
+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.
diff --git a/packages/govuk-frontend/src/govuk/assets/images/favicon.svg b/packages/govuk-frontend/src/govuk/assets/images/favicon.svg
new file mode 100644
index 0000000000..a420392d2b
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/assets/images/favicon.svg
@@ -0,0 +1,4 @@
+
\ No newline at end of file
diff --git a/packages/govuk-frontend/src/govuk/assets/images/govuk-apple-touch-icon-152x152.png b/packages/govuk-frontend/src/govuk/assets/images/govuk-apple-touch-icon-152x152.png
deleted file mode 100755
index 4804b9ac5c..0000000000
Binary files a/packages/govuk-frontend/src/govuk/assets/images/govuk-apple-touch-icon-152x152.png and /dev/null differ
diff --git a/packages/govuk-frontend/src/govuk/assets/images/govuk-apple-touch-icon-167x167.png b/packages/govuk-frontend/src/govuk/assets/images/govuk-apple-touch-icon-167x167.png
deleted file mode 100755
index a4cbdbe3d3..0000000000
Binary files a/packages/govuk-frontend/src/govuk/assets/images/govuk-apple-touch-icon-167x167.png and /dev/null differ
diff --git a/packages/govuk-frontend/src/govuk/assets/images/govuk-apple-touch-icon-180x180.png b/packages/govuk-frontend/src/govuk/assets/images/govuk-apple-touch-icon-180x180.png
deleted file mode 100755
index 3b9475f607..0000000000
Binary files a/packages/govuk-frontend/src/govuk/assets/images/govuk-apple-touch-icon-180x180.png and /dev/null differ
diff --git a/packages/govuk-frontend/src/govuk/assets/images/govuk-apple-touch-icon.png b/packages/govuk-frontend/src/govuk/assets/images/govuk-apple-touch-icon.png
deleted file mode 100755
index d84eac2061..0000000000
Binary files a/packages/govuk-frontend/src/govuk/assets/images/govuk-apple-touch-icon.png and /dev/null differ
diff --git a/packages/govuk-frontend/src/govuk/assets/images/govuk-icon-180.png b/packages/govuk-frontend/src/govuk/assets/images/govuk-icon-180.png
new file mode 100644
index 0000000000..c9f5978748
Binary files /dev/null and b/packages/govuk-frontend/src/govuk/assets/images/govuk-icon-180.png differ
diff --git a/packages/govuk-frontend/src/govuk/assets/images/govuk-icon-192.png b/packages/govuk-frontend/src/govuk/assets/images/govuk-icon-192.png
new file mode 100644
index 0000000000..cf4acb7363
Binary files /dev/null and b/packages/govuk-frontend/src/govuk/assets/images/govuk-icon-192.png differ
diff --git a/packages/govuk-frontend/src/govuk/assets/images/govuk-icon-512.png b/packages/govuk-frontend/src/govuk/assets/images/govuk-icon-512.png
new file mode 100644
index 0000000000..e201301e48
Binary files /dev/null and b/packages/govuk-frontend/src/govuk/assets/images/govuk-icon-512.png differ
diff --git a/packages/govuk-frontend/src/govuk/assets/images/govuk-icon-mask.svg b/packages/govuk-frontend/src/govuk/assets/images/govuk-icon-mask.svg
new file mode 100644
index 0000000000..f9acce6b73
--- /dev/null
+++ b/packages/govuk-frontend/src/govuk/assets/images/govuk-icon-mask.svg
@@ -0,0 +1,3 @@
+
diff --git a/packages/govuk-frontend/src/govuk/assets/images/govuk-mask-icon.svg b/packages/govuk-frontend/src/govuk/assets/images/govuk-mask-icon.svg
deleted file mode 100644
index d7dc2bbd05..0000000000
--- a/packages/govuk-frontend/src/govuk/assets/images/govuk-mask-icon.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/packages/govuk-frontend/src/govuk/assets/manifest.json b/packages/govuk-frontend/src/govuk/assets/manifest.json
new file mode 100644
index 0000000000..0d183a2a53
--- /dev/null
+++ b/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"
+ }
+ ]
+}
diff --git a/packages/govuk-frontend/src/govuk/template.njk b/packages/govuk-frontend/src/govuk/template.njk
index 9ab120360f..d5c74d23c8 100644
--- a/packages/govuk-frontend/src/govuk/template.njk
+++ b/packages/govuk-frontend/src/govuk/template.njk
@@ -10,12 +10,11 @@
{#- Hardcoded value of $govuk-black #}
{% block headIcons %}
-
- {#- Hardcoded value of $govuk-black #}
-
-
-
-
+
+
+ {#- Hardcoded value of $govuk-black #}
+
+
{% endblock %}
{% block head %}{% endblock %}
diff --git a/packages/govuk-frontend/src/govuk/template.test.js b/packages/govuk-frontend/src/govuk/template.test.js
index ef09cfff7c..f9ebf30cec 100644
--- a/packages/govuk-frontend/src/govuk/template.test.js
+++ b/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')