diff --git a/docs/src/assets/img/android-chrome-192x192.png b/docs/src/assets/img/android-chrome-192x192.png
new file mode 100644
index 000000000000..c281c4ca299c
Binary files /dev/null and b/docs/src/assets/img/android-chrome-192x192.png differ
diff --git a/docs/src/assets/img/android-chrome-512x512.png b/docs/src/assets/img/android-chrome-512x512.png
new file mode 100644
index 000000000000..8ab39a4d0c70
Binary files /dev/null and b/docs/src/assets/img/android-chrome-512x512.png differ
diff --git a/docs/src/assets/img/apple-touch-icon.png b/docs/src/assets/img/apple-touch-icon.png
new file mode 100644
index 000000000000..39e4aaaba529
Binary files /dev/null and b/docs/src/assets/img/apple-touch-icon.png differ
diff --git a/docs/src/assets/img/favicon-16x16.png b/docs/src/assets/img/favicon-16x16.png
new file mode 100644
index 000000000000..9046ee8964ef
Binary files /dev/null and b/docs/src/assets/img/favicon-16x16.png differ
diff --git a/docs/src/assets/img/favicon-32x32.png b/docs/src/assets/img/favicon-32x32.png
new file mode 100644
index 000000000000..eb09cf74c67c
Binary files /dev/null and b/docs/src/assets/img/favicon-32x32.png differ
diff --git a/docs/src/assets/img/favicon-48x48.png b/docs/src/assets/img/favicon-48x48.png
new file mode 100644
index 000000000000..df3c49beb657
Binary files /dev/null and b/docs/src/assets/img/favicon-48x48.png differ
diff --git a/docs/src/assets/img/favicon.ico b/docs/src/assets/img/favicon.ico
index 8b32f006f98f..57614f9c9675 100644
Binary files a/docs/src/assets/img/favicon.ico and b/docs/src/assets/img/favicon.ico differ
diff --git a/docs/src/assets/img/manifest.json b/docs/src/assets/img/manifest.json
deleted file mode 100644
index 482bebc3d65e..000000000000
--- a/docs/src/assets/img/manifest.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "name": "Angular Material",
-  "short_name": "Angular Material",
-  "theme_color": "#FFFFFF",
-  "background_color": "#d7e3ff",
-  "start_url": "/",
-  "display": "standalone",
-  "icons": []
-}
diff --git a/docs/src/assets/img/safari-pinned-tab.svg b/docs/src/assets/img/safari-pinned-tab.svg
new file mode 100644
index 000000000000..6b6b3640ae57
--- /dev/null
+++ b/docs/src/assets/img/safari-pinned-tab.svg
@@ -0,0 +1 @@
+<svg height="700pt" preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 700" width="700pt" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(.1 0 0 -.1 0 700)"><path d="m2640 6939c-36-17-114-54-175-81-60-28-175-81-255-118s-185-86-233-109c-49-22-90-41-92-41s-56-25-120-55-171-81-238-112c-67-30-164-75-215-99-52-24-95-44-97-44s-61-27-132-61c-70-33-148-70-173-81s-175-81-335-155c-159-75-307-142-329-151l-38-16 6-135c4-75 9-152 11-171 1-19 6-91 10-160s8-143 10-165 6-89 10-150c3-60 8-132 10-160 2-27 6-102 10-165 3-63 8-131 10-150s7-91 10-160 8-143 10-165 7-89 10-150c3-60 8-137 10-170 5-64 12-176 20-320 3-49 7-117 10-150 2-33 7-107 10-165s8-127 10-155c3-27 7-99 11-160 3-60 7-128 9-150s6-94 10-160 8-140 10-165 7-101 11-170 8-132 10-140c1-8 3-35 4-60l1-45 20 40c45 94 159 336 159 340 0 2 29 65 65 140 36 74 65 137 65 139s31 70 70 151 70 148 70 150c0 1 22 49 49 106 45 98 124 267 204 439 19 41 128 275 242 520s219 470 232 500c14 30 50 106 79 169 30 62 54 115 54 117s32 69 70 150c39 80 70 147 70 149 0 1 22 49 49 106 26 57 59 127 71 154 13 28 49 106 81 174 33 68 59 125 59 126 0 2 29 65 65 140 36 76 65 138 65 140 0 1 25 56 56 121 31 66 76 161 100 212 24 52 44 95 44 97 0 1 23 52 51 111 54 115 93 198 153 327 19 42 32 77 28 77s-36-14-72-31z"/><path d="m4290 6963c0-5 70-160 155-344 182-390 184-395 243-519 24-52 57-123 73-157 41-90 84-183 118-255 16-35 44-97 64-138 230-496 302-651 317-685 10-22 44-94 75-160s80-169 107-230c28-60 79-170 114-244 35-73 64-135 64-136 0-2 21-47 46-102 26-54 89-190 141-303 126-271 156-335 199-427 20-43 62-134 94-203s73-159 92-200c20-41 95-203 168-360s148-316 166-355l33-70 2 50c0 28 2 66 4 85 1 19 5 87 10 150 4 63 8 133 10 155 1 22 6 92 10 155 3 63 8 138 10 165 2 28 6 97 9 155 4 58 8 130 11 160 2 30 7 100 10 155 7 126 14 228 21 330 11 166 13 202 19 290 3 50 7 128 10 175s7 114 10 150c2 36 7 108 10 160s8 120 10 150 7 98 10 150 7 124 10 160c5 70 14 214 20 320 8 136 17 277 21 325 2 28 6 100 10 160 3 61 8 112 9 115 9 15-19 33-130 83-66 30-151 69-190 87-80 38-470 218-560 260-33 15-85 39-115 53s-89 41-130 60-169 78-285 132c-115 53-300 139-410 190-777 361-685 320-685 308z"/><path d="m3480 5065c-12-27-31-72-42-100-11-27-26-63-33-80-13-29-36-84-162-395-30-74-63-153-74-177-10-23-19-45-19-48s-8-25-19-48c-32-73-519-1261-523-1277-3-12 113-14 885-15 489 0 893 2 897 5 7 4-127 345-208 530-6 14-64 153-128 310s-142 348-174 425c-57 139-146 356-287 700-40 99-78 189-82 200-8 17-12 13-31-30z"/><path d="m2096 1746c-20-47-36-87-36-91 0-3-8-25-19-48-10-23-29-67-41-97s-28-68-35-85c-7-16-23-55-35-85s-28-68-35-85c-7-16-29-70-49-120-21-49-44-104-51-122l-14-31 261-149c143-81 276-157 297-168 20-11 288-164 595-339 308-176 564-319 570-319 6 1 178 96 381 213 204 116 390 223 415 237 24 14 202 115 395 225 192 111 366 210 385 220 142 80 140 78 131 101-18 46-320 773-332 800l-12 27h-1367-1368z"/></g></svg>
diff --git a/docs/src/assets/img/site.webmanifest b/docs/src/assets/img/site.webmanifest
new file mode 100644
index 000000000000..2568e3bccba9
--- /dev/null
+++ b/docs/src/assets/img/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "Angular Material",
+  "short_name": "Angular Material",
+  "icons": [
+    {
+      "src": "/assets/img/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/assets/img/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#FFFFFF",
+  "background_color": "#d7e3ff",
+  "display": "standalone"
+}
diff --git a/docs/src/index.html b/docs/src/index.html
index 853660012186..b08d8a49f61c 100644
--- a/docs/src/index.html
+++ b/docs/src/index.html
@@ -35,9 +35,20 @@
   <meta property="og:image:width" content="1339" />
   <meta property="og:image:height" content="943" />
 
-  <link rel="manifest" href="assets/img/manifest.json?v=19.1.0">
-  <link rel="shortcut icon" href="assets/img/favicon.ico?v=19.1.0">
-  <meta name="theme-color" content="#d7e3ff">
+  <link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png" />
+  <link rel="icon" type="image/png" sizes="48x48" href="assets/img/favicon-48x48.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png" />
+  <link rel="manifest" href="assets/img/site.webmanifest" />
+  <link rel="mask-icon" href="assets/img/safari-pinned-tab.svg" color="#d7e3ff" />
+  <link rel="shortcut icon" href="assets/img/favicon.ico" />
+  <link rel="canonical" href="https://material.angular.dev" />
+
+  <meta name="apple-mobile-web-app-title" content="Angular Material" />
+  <meta name="application-name" content="Angular" />
+  <meta name="msapplication-TileColor" content="#d7e3ff" />
+  <meta name="msapplication-config" content="assets/img/browserconfig.xml" />
+  <meta name="theme-color" content="#ffffff" />
 
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link rel="dns-prefetch" href="https://www.googletagmanager.com">