diff --git a/index.html b/index.html
index b7b55d75..2e87892f 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,7 @@
         <meta name="apple-mobile-web-app-status-bar-style" content="black">
         <meta name="apple-mobile-web-app-title" content="Hydrogen Chat">
         <meta name="description" content="A matrix chat application">
+        <link rel="apple-touch-icon" href="assets/icon-maskable.png">
         <link rel="stylesheet" type="text/css" href="src/ui/web/css/main.css">
         <link rel="stylesheet" type="text/css" href="src/ui/web/css/themes/element/theme.css" title="Element Theme">
         <link rel="alternate stylesheet" type="text/css" href="src/ui/web/css/themes/bubbles/theme.css" title="Bubbles Theme">
diff --git a/scripts/build.mjs b/scripts/build.mjs
index 1d632768..27e8eafb 100644
--- a/scripts/build.mjs
+++ b/scripts/build.mjs
@@ -129,6 +129,8 @@ async function buildHtml(doc, version, globalHash, modernOnly, assets) {
     // transform html file
     // change path to main.css to css bundle
     doc("link[rel=stylesheet]:not([title])").attr("href", assets.resolve(`hydrogen.css`));
+    // adjust file name of icon on iOS
+    doc("link[rel=apple-touch-icon]").attr("href", assets.resolve(`icon-maskable.png`));
     // change paths to all theme stylesheets
     findThemes(doc, (themeName, theme) => {
         theme.attr("href", assets.resolve(`themes/${themeName}/bundle.css`));