diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index d05daf47672..ba410e53cff 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -341,8 +341,6 @@ globalStyles.color.loadTimeColor = globalStyles.color.highlightBlue
 globalStyles.color.activeTabDefaultColor = globalStyles.color.chromePrimary
 globalStyles.color.switchBG_on = globalStyles.color.braveOrange
 
-globalStyles.spacing.tabHeight = globalStyles.spacing.tabsToolbarHeight
-
 globalStyles.braveryPanel.stats.colorAds = globalStyles.color.statsRed
 globalStyles.braveryPanel.stats.colorRedirected = globalStyles.color.statsBlue
 globalStyles.braveryPanel.stats.colorFp = globalStyles.color.statsYellow
diff --git a/app/renderer/components/styles/tab.js b/app/renderer/components/styles/tab.js
index 4ec97fe8872..ca132568db7 100644
--- a/app/renderer/components/styles/tab.js
+++ b/app/renderer/components/styles/tab.js
@@ -18,7 +18,6 @@ const styles = StyleSheet.create({
     boxSizing: 'border-box',
     color: '#5a5a5a',
     display: 'flex',
-    height: globalStyles.spacing.tabHeight,
     marginTop: '0',
     transition: `transform 200ms ease, ${globalStyles.transition.tabBackgroundTransition}`,
     left: '0',
@@ -29,6 +28,10 @@ const styles = StyleSheet.create({
     padding: globalStyles.spacing.defaultTabPadding,
     position: 'relative',
 
+    // globalStyles.spacing.tabHeight has been set to globalStyles.spacing.tabsToolbarHeight,
+    // which is 1px extra due to the border-top of .tabsToolbar
+    height: '-webkit-fill-available',
+
     ':hover': {
       background: 'linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(250, 250, 250, 0.4))'
     }
@@ -68,12 +71,6 @@ const styles = StyleSheet.create({
     overflow: 'hidden'
   },
 
-  // Add extra space for pages that have no icon
-  // such as about:blank and about:newtab
-  noFavicon: {
-    padding: '0 6px'
-  },
-
   alternativePlayIndicator: {
     borderTop: '2px solid lightskyblue'
   },
@@ -83,24 +80,28 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     display: 'flex',
     flex: '1',
-    minWidth: '0', // @see https://bugzilla.mozilla.org/show_bug.cgi?id=1108514#c5
+
+    // @see https://bugzilla.mozilla.org/show_bug.cgi?id=1108514#c5
+    minWidth: '0',
+
     // prevent the icons wrapper from being the target of mouse events.
     pointerEvents: 'none'
   },
 
   isPinned: {
-    paddingLeft: globalStyles.spacing.defaultIconPadding,
-    paddingRight: globalStyles.spacing.defaultIconPadding
+    padding: 0,
+    width: `calc(${globalStyles.spacing.tabsToolbarHeight} * 1.1)`,
+    justifyContent: 'center'
   },
 
   active: {
     background: `rgba(255, 255, 255, 1.0)`,
-    height: globalStyles.spacing.tabHeight,
     marginTop: '0',
     borderWidth: '0 1px 0 0',
     borderStyle: 'solid',
     borderColor: '#bbb',
     color: '#000',
+
     ':hover': {
       background: `linear-gradient(to bottom, #fff, ${globalStyles.color.chromePrimary})`
     }
@@ -138,13 +139,19 @@ const styles = StyleSheet.create({
     fontSize: globalStyles.fontSize.tabIcon,
     backgroundPosition: 'center',
     backgroundRepeat: 'no-repeat',
-    display: 'flex',
-    alignSelf: 'center',
-    position: 'relative',
-    textAlign: 'center',
-    justifyContent: 'center',
     paddingLeft: globalStyles.spacing.defaultIconPadding,
     paddingRight: globalStyles.spacing.defaultIconPadding
+  },
+
+  icon_audio: {
+    color: globalStyles.color.highlightBlue,
+
+    // 16px
+    fontSize: `calc(${globalStyles.fontSize.tabIcon} + 2px)`,
+
+    // equal spacing around audio icon (favicon and tabTitle)
+    padding: globalStyles.spacing.defaultTabPadding,
+    paddingRight: '0 !important'
   }
 })
 
diff --git a/app/renderer/components/tabs/content/audioTabIcon.js b/app/renderer/components/tabs/content/audioTabIcon.js
index f286d6dc53d..d8b1826df9c 100644
--- a/app/renderer/components/tabs/content/audioTabIcon.js
+++ b/app/renderer/components/tabs/content/audioTabIcon.js
@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
-const {StyleSheet, css} = require('aphrodite/no-important')
+const {css} = require('aphrodite/no-important')
 const Immutable = require('immutable')
 
 // Components
@@ -61,17 +61,11 @@ class AudioTabIcon extends React.Component {
 
   render () {
     return <TabIcon
-      className={css(tabStyles.icon, styles.audioIcon)}
+      className={css(tabStyles.icon, tabStyles.icon_audio)}
       symbol={this.audioIcon}
-      onClick={this.toggleMute} />
+      onClick={this.toggleMute}
+    />
   }
 }
 
 module.exports = ReduxComponent.connect(AudioTabIcon)
-
-const styles = StyleSheet.create({
-  audioIcon: {
-    color: globalStyles.color.highlightBlue,
-    fontSize: '16px'
-  }
-})
diff --git a/app/renderer/components/tabs/content/tabIcon.js b/app/renderer/components/tabs/content/tabIcon.js
index 8f8c32fabde..004df67ef14 100644
--- a/app/renderer/components/tabs/content/tabIcon.js
+++ b/app/renderer/components/tabs/content/tabIcon.js
@@ -17,14 +17,13 @@ const globalStyles = require('../../styles/global')
 class TabIcon extends ImmutableComponent {
   render () {
     const styles = StyleSheet.create({
-      icon: {
+      tabIcon: {
         fontSize: this.props.symbolContent ? '8px' : 'inherit',
         display: 'flex',
-        alignSelf: 'center',
         width: globalStyles.spacing.iconSize,
         height: globalStyles.spacing.iconSize,
         alignItems: 'center',
-        justifyContent: this.props.symbolContent ? 'flex-end' : 'left',
+        justifyContent: this.props.symbolContent ? 'flex-end' : 'center',
         fontWeight: this.props.symbolContent ? 'bold' : 'normal',
         color: this.props.symbolContent ? globalStyles.color.black100 : 'inherit'
       }
@@ -51,7 +50,7 @@ class TabIcon extends ImmutableComponent {
           ? <span
             className={cx({
               [this.props.symbol]: true,
-              [css(styles.icon)]: true
+              [css(styles.tabIcon)]: true
             })}
             data-test-id={this.props['data-test-id']}
             data-test2-id={this.props['data-test2-id']}