diff --git a/src/component/layout/index.js b/src/component/layout/index.js
index 4291c15f..10dfc863 100644
--- a/src/component/layout/index.js
+++ b/src/component/layout/index.js
@@ -196,6 +196,24 @@ layout.title = {
   }
 };
 
+layout.favicon = {
+  render: () => {
+
+    const favicon = document.querySelector('.favicon');
+
+    if (isValidString(state.get.current().layout.favicon)) {
+
+      favicon.href = trimString(state.get.current().layout.favicon);
+
+    } else {
+
+      favicon.href = trimString('icon/favicon.svg');
+
+    };
+
+  }
+};
+
 layout.init = () => {
   applyCSSVar([
     'layout.size',
@@ -218,6 +236,7 @@ layout.init = () => {
   ]);
   layout.area.render();
   layout.title.render();
+  layout.favicon.render();
 };
 
 export { layout };
diff --git a/src/component/menuContent/layoutSetting/index.js b/src/component/menuContent/layoutSetting/index.js
index 29ef0d2c..1b0401e4 100644
--- a/src/component/menuContent/layoutSetting/index.js
+++ b/src/component/menuContent/layoutSetting/index.js
@@ -447,6 +447,24 @@ layoutSetting.page = (parent) => {
     }
   });
 
+  layoutSetting.control.page.favicon = new Control_textReset({
+    object: state.get.current(),
+    path: 'layout.favicon',
+    id: 'layout-favicon',
+    value: state.get.current().layout.favicon,
+    defaultValue: state.get.default().layout.favicon,
+    placeholder: 'https://www.example.com/favicon.svg',
+    labelText: 'Favicon URL',
+    action: () => {
+      layout.favicon.render();
+      data.save();
+    }
+  });
+
+  layoutSetting.control.page.faviconHelper = new Control_helperText({
+    text: ['Not supported by all browsers.']
+  });
+
   layoutSetting.control.page.scrollbar = new Control_radio({
     object: state.get.current(),
     label: 'Scrollbar',
@@ -481,6 +499,8 @@ layoutSetting.page = (parent) => {
   parent.appendChild(
     node('div', [
       layoutSetting.control.page.title.wrap(),
+      layoutSetting.control.page.favicon.wrap(),
+      layoutSetting.control.page.faviconHelper.wrap(),
       node('hr'),
       layoutSetting.control.page.scrollbar.inline(),
       layoutSetting.control.page.scrollbarHelper.wrap(),
diff --git a/src/component/state/index.js b/src/component/state/index.js
index a7690432..2c32c3ba 100644
--- a/src/component/state/index.js
+++ b/src/component/state/index.js
@@ -18,6 +18,7 @@ state.default = {
     breakpoint: 'xs',
     scrollbar: 'auto',
     title: '',
+    favicon: '',
     overscroll: false
   },
   header: {
diff --git a/src/component/update/index.js b/src/component/update/index.js
index 5e6f57b4..447f9d53 100644
--- a/src/component/update/index.js
+++ b/src/component/update/index.js
@@ -575,6 +575,8 @@ update.mod['7.0.0'] = function(data) {
 
 update.mod['7.1.0'] = function(data) {
 
+  data.state.layout.favicon = '';
+
   data.state.group.toolbar = data.state.group.openAll;
 
   delete data.state.group.openAll;
diff --git a/src/index.html b/src/index.html
index d47a325c..35a56832 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,7 +9,7 @@
 
   <title>New Tab</title>
 
-  <link rel="icon" type="image/svg+xml" href="icon/favicon.svg" />
+  <link rel="icon" type="image/svg+xml" class="favicon" href="icon/favicon.svg" />
 
   <style media="screen" type="text/css">html,body {background-color: rgb(0, 0, 0);}@media (prefers-color-scheme: dark) {html,body {background-color: rgb(0, 0, 0);}}@media (prefers-color-scheme: light) {html,body {background-color: rgb(255, 255, 255);}}</style>