Update favicon links in head (#2804)

Based on breaking changes from https://realfavicongenerator.net/

Fixes #2801

NEWS.md

@@ -1,5 +1,6 @@
 # pkgdown (development version)
 
+* Links to favicons in page headers were updated to reflect changes to https://realfavicongenerator.net/ (#2804). Favicons should be re-generated by manually removing the `pkgdown/favicon` directory and then running `pkgdown::build_favicons()`.
 * The language of the site is set from the first `Language:` in the `DESCRIPTION` if it is available and no other language is specified (@jonthegeek, #2808).
 
 # pkgdown 2.1.1

inst/BS3/templates/head.html

@@ -6,12 +6,11 @@
 
 {{#has_favicons}}
 <!-- favicons -->
-<link rel="icon" type="image/png" sizes="16x16" href="{{#site}}{{root}}{{/site}}favicon-16x16.png">
-<link rel="icon" type="image/png" sizes="32x32" href="{{#site}}{{root}}{{/site}}favicon-32x32.png">
-<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{{#site}}{{root}}{{/site}}apple-touch-icon.png" />
-<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="{{#site}}{{root}}{{/site}}apple-touch-icon-120x120.png" />
-<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="{{#site}}{{root}}{{/site}}apple-touch-icon-76x76.png" />
-<link rel="apple-touch-icon" type="image/png" sizes="60x60" href="{{#site}}{{root}}{{/site}}apple-touch-icon-60x60.png" />
+<link rel="icon" type="image/png" sizes="48x48" href="{{#site}}{{root}}{{/site}}favicon-48x48.png">
+<link rel="icon" type=”image/svg+xml” href="{{#site}}{{root}}{{/site}}favicon.svg">
+<link rel="apple-touch-icon" sizes="180x180" href="{{#site}}{{root}}{{/site}}apple-touch-icon.png">
+<link rel="icon" sizes="any" href="{{#site}}{{root}}{{/site}}favicon.ico" >
+<link rel="manifest" href="{{#site}}{{root}}{{/site}}site.webmanifest">
 {{/has_favicons}}
 
 <!-- jquery -->

inst/BS5/templates/head.html

@@ -5,12 +5,11 @@
 
 {{#has_favicons}}
 <!-- favicons -->
-<link rel="icon" type="image/png" sizes="16x16" href="{{#site}}{{root}}{{/site}}favicon-16x16.png">
-<link rel="icon" type="image/png" sizes="32x32" href="{{#site}}{{root}}{{/site}}favicon-32x32.png">
-<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="{{#site}}{{root}}{{/site}}apple-touch-icon.png" />
-<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="{{#site}}{{root}}{{/site}}apple-touch-icon-120x120.png" />
-<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="{{#site}}{{root}}{{/site}}apple-touch-icon-76x76.png" />
-<link rel="apple-touch-icon" type="image/png" sizes="60x60" href="{{#site}}{{root}}{{/site}}apple-touch-icon-60x60.png" />
+<link rel="icon" type="image/png" sizes="48x48" href="{{#site}}{{root}}{{/site}}favicon-48x48.png">
+<link rel="icon" type=”image/svg+xml” href="{{#site}}{{root}}{{/site}}favicon.svg">
+<link rel="apple-touch-icon" sizes="180x180" href="{{#site}}{{root}}{{/site}}apple-touch-icon.png">
+<link rel="icon" sizes="any" href="{{#site}}{{root}}{{/site}}favicon.ico" >
+<link rel="manifest" href="{{#site}}{{root}}{{/site}}site.webmanifest">
 {{/has_favicons}}
 
 {{#lightswitch}}<script src="{{#site}}{{root}}{{/site}}lightswitch.js"></script>{{/lightswitch}}

pkgdown/favicon/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}