diff --git a/pages/_document.js b/pages/_document.js
index 0d78b2c0..86097d16 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -32,6 +32,10 @@ class MyDocument extends Document {
             name="viewport"
             content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
           />
+
+          <link rel="icon" href="/favicon.png" type="image/png" />
+          <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+
           {/* PWA primary color */}
           <meta name="theme-color" content={lightTheme.palette.primary.main} />
           <link
diff --git a/pages/article/[id].js b/pages/article/[id].js
index 566b423c..e7bbef85 100644
--- a/pages/article/[id].js
+++ b/pages/article/[id].js
@@ -2,7 +2,7 @@ import gql from 'graphql-tag';
 import Link from 'next/link';
 import { useEffect, useRef, useCallback, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { Box, Snackbar } from '@material-ui/core';
+import { Box, Hidden, Snackbar } from '@material-ui/core';
 import { ngettext, msgid, t } from 'ttag';
 
 import { useRouter } from 'next/router';
@@ -174,6 +174,10 @@ const useStyles = makeStyles(theme => ({
     lineHeight: '20px',
     margin: '0 12px',
   },
+  bannerImage: {
+    width: '100%',
+    borderRadius: theme.shape.borderRadius,
+  },
 }));
 
 const LOAD_ARTICLE = gql`
@@ -460,6 +464,16 @@ function ArticlePage() {
             </CardHeader>
             <CurrentReplies articleReplies={article.articleReplies} />
           </Card>
+
+          <Hidden smDown implementation="css">
+            <a href={LINE_URL}>
+              <img
+                className={classes.bannerImage}
+                src="/line-banner-desktop@2x.png"
+                alt={t`Add Cofacts as friend in LINE`}
+              />
+            </a>
+          </Hidden>
         </div>
 
         <aside className={classes.aside}>
@@ -484,6 +498,16 @@ function ArticlePage() {
           )}
         </aside>
       </div>
+      <Hidden mdUp implementation="css">
+        <a href={LINE_URL}>
+          <img
+            className={classes.bannerImage}
+            src="/line-banner-mobile@2x.png"
+            alt={t`Add Cofacts as friend in LINE`}
+            style={{ marginBottom: 24 }}
+          />
+        </a>
+      </Hidden>
       <Snackbar
         open={!!flashMessage}
         onClose={() => setFlashMessage('')}
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 00000000..8cd9e3a9
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 00000000..d8f845d7
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,16 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path class="foreground" d="M25.7422 12.4355C36.4283 12.4355 45.0488 21.0958 45.0488 31.7422C45.0488 42.4284 36.3886 51.0489 25.7422 51.0489C15.056 51.0489 6.43555 42.3887 6.43555 31.7422C6.43555 21.0958 15.056 12.4355 25.7422 12.4355ZM25.7422 6C22.286 6 18.9094 6.67537 15.7313 8.02604C12.6725 9.33698 9.89167 11.1643 7.54786 13.5479C5.20405 15.9314 3.33695 18.6725 2.02601 21.7314C0.675337 24.9094 0 28.2861 0 31.7422C0 35.1983 0.675337 38.575 2.02601 41.753C3.33695 44.8119 5.16432 47.5928 7.54786 49.9366C9.93139 52.2804 12.6725 54.1475 15.7313 55.4584C18.9094 56.8091 22.286 57.4844 25.7422 57.4844C29.1983 57.4844 32.575 56.8091 35.753 55.4584C38.8119 54.1475 41.5927 52.3201 43.9365 49.9366C46.2803 47.5531 48.1474 44.8119 49.4583 41.753C50.809 38.575 51.4844 35.1983 51.4844 31.7422C51.4844 28.2861 50.809 24.9094 49.4583 21.7314C48.1474 18.6725 46.32 15.8917 43.9365 13.5479C41.553 11.204 38.8119 9.33698 35.753 8.02604C32.575 6.67537 29.1983 6 25.7422 6Z" fill="currentColor"/>
+<path class="foreground" d="M54.3445 47.0366H43.8967V40.601H60.7801C60.7801 44.1366 57.9198 47.0366 54.3445 47.0366Z" fill="currentColor"/>
+<path d="M25.7422 25.3463C29.3175 25.3463 32.1777 28.2464 32.1777 31.782C32.1777 35.3573 29.2777 38.2175 25.7422 38.2175C22.1669 38.2175 19.3066 35.3175 19.3066 31.782C19.3066 28.2067 22.1669 25.3463 25.7422 25.3463ZM25.7422 18.9108C18.6313 18.9108 12.8711 24.6711 12.8711 31.782C12.8711 38.8928 18.6313 44.653 25.7422 44.653C32.853 44.653 38.6133 38.8928 38.6133 31.782C38.6133 24.6711 32.853 18.9108 25.7422 18.9108Z" fill="#FFB600"/>
+<path d="M57.761 34.9203H35.8722V28.4847H64.1965C64.1965 32.06 61.2966 34.9203 57.761 34.9203Z" fill="#FFB600"/>
+<style>
+  .foreground {
+    fill: #333;
+  }
+  @media (prefers-color-scheme: dark) {
+    .foreground {
+      fill: #fff;
+    }
+  }
+</style>
+</svg>
diff --git a/public/line-banner-desktop@2x.png b/public/line-banner-desktop@2x.png
new file mode 100644
index 00000000..0d910874
Binary files /dev/null and b/public/line-banner-desktop@2x.png differ
diff --git a/public/line-banner-mobile@2x.png b/public/line-banner-mobile@2x.png
new file mode 100644
index 00000000..319703cb
Binary files /dev/null and b/public/line-banner-mobile@2x.png differ