diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
index 28bdc48a9ed4..18d730db26a7 100644
--- a/config/webpack/webpack.common.js
+++ b/config/webpack/webpack.common.js
@@ -82,6 +82,7 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
                 {from: 'web/favicon.png'},
                 {from: 'web/favicon-unread.png'},
                 {from: 'web/og-preview-image.png'},
+                {from: 'web/apple-touch-icon.png'},
                 {from: 'assets/css', to: 'css'},
                 {from: 'assets/fonts/web', to: 'fonts'},
                 {from: 'node_modules/react-pdf/dist/esm/Page/AnnotationLayer.css', to: 'css/AnnotationLayer.css'},
diff --git a/web/apple-touch-icon.png b/web/apple-touch-icon.png
new file mode 100644
index 000000000000..625b519e2cfa
Binary files /dev/null and b/web/apple-touch-icon.png differ
diff --git a/web/index.html b/web/index.html
index 90011c87e7a9..d207fa54b97a 100644
--- a/web/index.html
+++ b/web/index.html
@@ -120,6 +120,7 @@
         }
     </style>
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, interactive-widget=resizes-content">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="shortcut icon" id="favicon" href="/favicon.png">
     <% if (htmlWebpackPlugin.options.usePolyfillIO) { %>
         <!-- polyfill.io is only needed on Web to support older browsers. It should not be loaded for desktop -->