diff --git a/apps/common/mobile/resources/img/header/header-logo-android.png b/apps/common/mobile/resources/img/header/header-logo-android.png
new file mode 100644
index 000000000..2e2eeb6a5
Binary files /dev/null and b/apps/common/mobile/resources/img/header/header-logo-android.png differ
diff --git a/apps/common/mobile/resources/img/header/header-logo-ios.png b/apps/common/mobile/resources/img/header/header-logo-ios.png
new file mode 100644
index 000000000..f7d3f1ad9
Binary files /dev/null and b/apps/common/mobile/resources/img/header/header-logo-ios.png differ
diff --git a/apps/common/mobile/resources/img/header/header-logo.png b/apps/common/mobile/resources/img/header/header-logo.png
deleted file mode 100644
index bace6a100..000000000
Binary files a/apps/common/mobile/resources/img/header/header-logo.png and /dev/null differ
diff --git a/apps/common/mobile/resources/img/header/header-logo@2x.png b/apps/common/mobile/resources/img/header/header-logo@2x.png
deleted file mode 100644
index 57644434a..000000000
Binary files a/apps/common/mobile/resources/img/header/header-logo@2x.png and /dev/null differ
diff --git a/apps/documenteditor/mobile/index.html b/apps/documenteditor/mobile/index.html
index 8e73ce3a2..5369ec484 100644
--- a/apps/documenteditor/mobile/index.html
+++ b/apps/documenteditor/mobile/index.html
@@ -46,14 +46,15 @@
 
             .loadmask > .brendpanel > div {
                 display: flex;
-                align-items: center;
+                align-items: flex-start;
                 height: 100%;
             }
 
             .loadmask > .brendpanel .loading-logo {
                 max-width: 200px;
-                height: 20px;
+                height: 26px;
                 margin: 0 auto;
+                margin-top: 12px;
             }
 
             .loadmask > .brendpanel .loading-logo > img {
@@ -64,12 +65,17 @@
             }
 
             .loadmask > .brendpanel .circle {
-                vertical-align: middle;
                 width: 28px;
                 height: 28px;
                 border-radius: 14px;
-                margin: 4px 10px;
-                background: rgba(255, 255, 255, 0.2);
+                margin: 0 16px;
+                margin-bottom: 10px;
+                align-self: flex-end;
+                background: rgba(255, 255, 255, 0.3);
+            }
+
+            .loadmask > .brendpanel.android .circle {
+                margin-bottom: 12px;
             }
 
             .loadmask > .placeholder {
@@ -119,7 +125,7 @@
         </style>
     </head>
     <body>
-        <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="circle"></div><div class="loading-logo"><img src="../../common/mobile/resources/img/header/header-logo.png"></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
+        <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="circle"></div><div class="loading-logo"><img src=""></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
 
         <script type="text/javascript">
             function getUrlParams() {
@@ -146,7 +152,11 @@
 
             var params = getUrlParams(),
                 lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-                logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
+                logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null,
+                logoOO = null;
+            if (!logo) {
+                logoOO = /Android/.test(navigator.userAgent) ? "../../common/mobile/resources/img/header/header-logo-android.png" : "../../common/mobile/resources/img/header/header-logo-ios.png";
+            }
 
                 window.frameEditorId = params["frameEditorId"];
 
@@ -160,6 +170,7 @@
                 var elem = document.querySelector('.loading-logo img');
                 if (elem) {
                     logo && (elem.setAttribute('src', logo));
+                    logoOO && (elem.setAttribute('src', logoOO));
                     elem.style.opacity = 1;
                 }
                 var placeholder = document.getElementsByClassName('placeholder')[0];
diff --git a/apps/documenteditor/mobile/index.html.deploy b/apps/documenteditor/mobile/index.html.deploy
index 228fc056c..7731d3648 100644
--- a/apps/documenteditor/mobile/index.html.deploy
+++ b/apps/documenteditor/mobile/index.html.deploy
@@ -45,7 +45,7 @@
 
             .loadmask > .brendpanel > div {
                 display: flex;
-                align-items: center;
+                align-items: flex-start;
                 height: 100%;
             }
 
@@ -53,6 +53,7 @@
                 max-width: 200px;
                 height: 20px;
                 margin: 0 auto;
+                margin-top: 12px;
             }
 
             .loadmask > .brendpanel .loading-logo > img {
@@ -63,12 +64,17 @@
             }
 
             .loadmask > .brendpanel .circle {
-                vertical-align: middle;
                 width: 28px;
                 height: 28px;
                 border-radius: 14px;
-                margin: 4px 10px;
-                background: rgba(255, 255, 255, 0.2);
+                margin: 0 16px;
+                margin-bottom: 10px;
+                align-self: flex-end;
+                background: rgba(255, 255, 255, 0.3);
+            }
+
+            .loadmask > .brendpanel.android .circle {
+                margin-bottom: 12px;
             }
 
             .loadmask > .placeholder {
@@ -118,7 +124,7 @@
         </style>
     </head>
     <body>
-        <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="circle"></div><div class="loading-logo"><img src="../../../apps/documenteditor/mobile/resources/img/header/header-logo.png"></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
+        <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="circle"></div><div class="loading-logo"><img src=""></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
 
         <script type="text/javascript">
             var ua = navigator.userAgent;
@@ -158,26 +164,31 @@
 
             var params = getUrlParams(),
                 lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-                logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null;
+                logo = params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : null,
+                logoOO = null;
+            if (!logo) {
+                logoOO = /Android/.test(navigator.userAgent) ? "../../common/mobile/resources/img/header/header-logo-android.png" : "../../common/mobile/resources/img/header/header-logo-ios.png";
+            }
 
-                window.frameEditorId = params["frameEditorId"];
+            window.frameEditorId = params["frameEditorId"];
 
             var brendpanel = document.getElementsByClassName('brendpanel')[0];
             if (brendpanel) {
                 if (/Android/.test(navigator.userAgent)) {
-                    brendpanel.classList.add('android');
+                     brendpanel.classList.add('android');
                 }
                 brendpanel.classList.add('visible');
 
                 var elem = document.querySelector('.loading-logo img');
                 if (elem) {
                     logo && (elem.setAttribute('src', logo));
+                    logoOO && (elem.setAttribute('src', logoOO));
                     elem.style.opacity = 1;
                 }
                 var placeholder = document.getElementsByClassName('placeholder')[0];
                 if (placeholder && /Android/.test(navigator.userAgent)) {
                     placeholder.classList.add('android');
-                 }
+                }
             }
 
             window.requireTimeourError = function(){
