diff --git a/css/style.css b/css/style.css
index 15851cb067..5c55d43217 100644
--- a/css/style.css
+++ b/css/style.css
@@ -199,8 +199,8 @@ header #banner {
 }
 header #banner #logo-img, 
 .navbar-brand #logo-img {
-    mask: url('img/friendica-logo.svg#logo_mask');
-    mask-image: url('img/friendica-25.png');
+    /*mask: url('network#m1');*/
+    /*mask-image: url('img/friendica-25.png');*/
     -webkit-mask-image: url('img/friendica-25.png');
     background-color: $nav_icon_color;
     height: 25px;
@@ -208,6 +208,7 @@ header #banner #logo-img,
     margin-left: auto;
     margin-right: auto;
 }
+
 #navbrand-container {
     display: flex;
 }
diff --git a/js/theme.js b/js/theme.js
index 00008fc3e2..18eab67a5b 100644
--- a/js/theme.js
+++ b/js/theme.js
@@ -49,6 +49,17 @@ $(document).ready(function(){
 		$("ul.tabbar").appendTo("#topbar-second > .container > #tabmenu");
 	}
 
+	// add mask css url to the logo-img container
+	//
+	// This is for firefox - we use a mask which looks like the friendica logo to apply user collers
+	// to the friendica logo (the mask is in nav.tpl at the botom). To make it work we need to apply the
+	// correct url. The only way which comes to my mind was to do this with js
+	// So we apply the correct url (with the link to the id of the mask) after the page is loaded.
+	if($("#logo-img")) {
+		var path= "url('" + window.location.pathname + "#logo-mask')";
+		$("#logo-img").css({"mask": path});
+	}
+
 	// make responsive tabmenu with flexmenu.js
 	// the menupoints which doesn't fit in the second nav bar will moved to a 
 	// dropdown menu. Look at common_tabs.tpl
diff --git a/templates/nav.tpl b/templates/nav.tpl
index e0eff64a9b..d6d5965e9c 100644
--- a/templates/nav.tpl
+++ b/templates/nav.tpl
@@ -9,6 +9,9 @@
 		{{if $nav.remote}}
 		<a href="{{$baseurl}}"><div id="remote-logo-img"></div></a>
 		{{else}}
+		{{* #logo-img is the the placeholder to insert a mask (friendica logo) into this div 
+		For Firefox we have to call the paths of the mask (look at the bottom of this file).
+		Because for FF we need relative paths we apply them with js after the page is loaded (look at theme.js *}}
 		<a href="{{$baseurl}}"><div id="logo-img"></div></a>
 		{{/if}}
 	</div>
@@ -269,3 +272,13 @@
 	</li>
 </ul>
 {{/if}}
+
+{{* This is the mask of the firefox logo. We set the background of #logo-img to the user icon color and apply this mask to it
+The result is a friendica logo in the user icon color.*}}
+<svg id="friendica-logo-mask" x="0px" y="0px" width="0px" height="0px" viewBox="0 0 250 250">
+	<defs>
+		<mask id="logo-mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
+			<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;" d="M0.796,0L0.172,0.004C0.068,0.008,0.008,0.068,0,0.172V0.824c0,0.076,0.06,0.16,0.168,0.172h0.652c0.072,0,0.148-0.06,0.172-0.144V0.14C1,0.06,0.908,0,0.796,0zM0.812,0.968H0.36v-0.224h0.312v-0.24H0.36V0.3h0.316l0-0.264l0.116-0c0.088,0,0.164,0.044,0.164,0.096l0,0.696C0.96,0.912,0.876,0.968,0.812,0.968z"/>
+		</mask>
+	</defs>
+</svg>