diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 11b3ae28e8..1837a29a15 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -111,6 +111,7 @@ const globalStyles = {
     defaultTabPadding: '0 4px',
     defaultIconPadding: '2px',
     iconSize: '16px',
+    narrowIconSize: '12px',
     dialogTopOffset: '30px',
     paymentsMargin: '20px',
     modalPanelHeaderMarginBottom: '.5em',
diff --git a/app/renderer/components/tabContent.js b/app/renderer/components/tabContent.js
index 09e6e80243..8ade95d9b1 100644
--- a/app/renderer/components/tabContent.js
+++ b/app/renderer/components/tabContent.js
@@ -65,6 +65,10 @@ class Favicon extends ImmutableComponent {
       : null
   }
 
+  get narrowView () {
+    return this.props.tabProps.get('breakpoint') === 'smallest'
+  }
+
   render () {
     const iconStyles = StyleSheet.create({
       favicon: {backgroundImage: `url(${this.favicon})`}
@@ -73,7 +77,11 @@ class Favicon extends ImmutableComponent {
       ? <TabIcon
         data-test-favicon={this.favicon}
         data-test-id={this.loadingIcon ? 'loading' : 'defaultIcon'}
-        className={css(styles.icon, this.favicon && iconStyles.favicon)}
+        className={css(
+          styles.icon,
+          this.favicon && iconStyles.favicon,
+          this.narrowView && styles.faviconNarrowView
+        )}
         symbol={this.loadingIcon || this.defaultIcon} />
       : null
   }
@@ -274,6 +282,15 @@ const styles = StyleSheet.create({
     padding: 0
   },
 
+  faviconNarrowView: {
+    minWidth: globalStyles.spacing.narrowIconSize,
+    width: globalStyles.spacing.narrowIconSize,
+    backgroundSize: globalStyles.spacing.narrowIconSize,
+    padding: '0',
+    fontSize: '10px',
+    backgroundPosition: 'center center'
+  },
+
   audioIcon: {
     color: globalStyles.color.highlightBlue
   },