diff --git a/assets/elm/Views/Header.elm b/assets/elm/Views/Header.elm
index 6799065f..bd154170 100644
--- a/assets/elm/Views/Header.elm
+++ b/assets/elm/Views/Header.elm
@@ -27,7 +27,7 @@ logo =
           , class "header-item header-item-logo"
           ] [
             img [ class "header-item-icon"
-                , src "https://poac.pm/images/poacpm-speed.png"
+                , src "/images/icon.svg"
                 , alt "icon", width 30, height 30
                 ] [],
             text "poac"
@@ -63,7 +63,7 @@ headerMenu =
                 ]
             ],
             li [] [
-                a [ href "https://poacpm.github.io/poac/"
+                a [ href "https://docs.poac.pm/"
                   , class "header-item"
                   ] [
                     text "DOCS"
diff --git a/assets/scss/header.scss b/assets/scss/header.scss
index 0a6a4ff1..fc0d1c9d 100644
--- a/assets/scss/header.scss
+++ b/assets/scss/header.scss
@@ -35,7 +35,8 @@
   color: white;
 }
 .header-item-icon {
-  border-radius: 50%;
+  border-top-left-radius: 50%;
+  border-top-right-radius: 50%;
 }
 
 .header-list-menu li {
diff --git a/assets/scss/index.scss b/assets/scss/index.scss
index 9d7ee10b..0307d81b 100644
--- a/assets/scss/index.scss
+++ b/assets/scss/index.scss
@@ -3,7 +3,6 @@
   .top {
     background-size: cover;
     background-color: #0f071c;
-    //background-image: url("/images/poacpm-speed.png");
     .text {
       display: block;
       width: 80%;
diff --git a/assets/static/favicon.ico b/assets/static/favicon.ico
deleted file mode 100644
index 73de524a..00000000
Binary files a/assets/static/favicon.ico and /dev/null differ
diff --git a/assets/static/images/apple-touch-icon.png b/assets/static/images/apple-touch-icon.png
new file mode 100644
index 00000000..26727e63
Binary files /dev/null and b/assets/static/images/apple-touch-icon.png differ
diff --git a/assets/static/images/favicon.ico b/assets/static/images/favicon.ico
new file mode 100644
index 00000000..710a6352
Binary files /dev/null and b/assets/static/images/favicon.ico differ
diff --git a/assets/static/images/icon&logo.png b/assets/static/images/icon&logo.png
deleted file mode 100644
index 4a9c229c..00000000
Binary files a/assets/static/images/icon&logo.png and /dev/null differ
diff --git a/assets/static/images/icon-512x512.png b/assets/static/images/icon-512x512.png
new file mode 100644
index 00000000..c07bd4a4
Binary files /dev/null and b/assets/static/images/icon-512x512.png differ
diff --git a/assets/static/images/icon.png b/assets/static/images/icon.png
new file mode 100644
index 00000000..e77cb309
Binary files /dev/null and b/assets/static/images/icon.png differ
diff --git a/assets/static/images/icon.svg b/assets/static/images/icon.svg
new file mode 100644
index 00000000..5eef7805
--- /dev/null
+++ b/assets/static/images/icon.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="400px" height="420px" viewBox="0 0 400 420" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52 (66869) - http://www.bohemiancoding.com/sketch -->
+    <title>Shape</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <radialGradient cx="10.5172853%" cy="100%" fx="10.5172853%" fy="100%" r="119.945282%" gradientTransform="translate(0.105173,1.000000),scale(1.000000,0.952381),rotate(-51.739535),scale(1.000000,0.892357),translate(-0.105173,-1.000000)" id="radialGradient-1">
+            <stop stop-color="#3023AE" offset="0%"></stop>
+            <stop stop-color="#53A0FD" offset="79.8743881%"></stop>
+            <stop stop-color="#51DEEC" offset="100%"></stop>
+        </radialGradient>
+    </defs>
+    <g id="icon-gradient-new" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon" transform="translate(-20.000000, -20.000000)" fill="url(#radialGradient-1)">
+            <path d="M20,220 C20,20 203.916355,20 220,20 C236.083645,20 420,20 420,220 C420,380.602127 283.263237,420 220,420 C189.940075,420 150.053436,403.872837 130.053436,380 C103.687159,348.528108 101.654023,307.441333 120,300 C140,291.887777 164.702055,340 220,340 C275.297945,340 340,290.651856 340,220 C340,149.348144 300,100 220,100 C140,100 99.9607444,149.348144 99.9607444,220 L99.9607444,400 C99.9607444,420.484491 72.5173973,440 60,440 C47.4826027,440 20,418.833096 20,400 L20,220 Z M220,280 C186.862915,280 160,253.137085 160,220 C160,186.862915 186.862915,160 220,160 C253.137085,160 280,186.862915 280,220 C280,253.137085 253.137085,280 220,280 Z" id="Shape"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/static/images/logo.png b/assets/static/images/logo.png
new file mode 100644
index 00000000..6418ae24
Binary files /dev/null and b/assets/static/images/logo.png differ
diff --git a/assets/static/images/logo.svg b/assets/static/images/logo.svg
new file mode 100644
index 00000000..a5608314
--- /dev/null
+++ b/assets/static/images/logo.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="963px" height="420px" viewBox="0 0 963 420" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52 (66869) - http://www.bohemiancoding.com/sketch -->
+    <title>Group</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <radialGradient cx="10.5172853%" cy="100%" fx="10.5172853%" fy="100%" r="119.945282%" gradientTransform="translate(0.105173,1.000000),scale(1.000000,0.952381),rotate(-51.739535),scale(1.000000,0.892357),translate(-0.105173,-1.000000)" id="radialGradient-1">
+            <stop stop-color="#3023AE" offset="0%"></stop>
+            <stop stop-color="#53A0FD" offset="79.8743881%"></stop>
+            <stop stop-color="#51DEEC" offset="100%"></stop>
+        </radialGradient>
+    </defs>
+    <g id="logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(-40.000000, -20.000000)" id="Group">
+            <g transform="translate(40.000000, 20.000000)">
+                <path d="M0,200 C0,0 183.916355,3.55271368e-15 200,0 C216.083645,0 400,0 400,200 C400,360.602127 263.263237,400 200,400 C169.940075,400 130.053436,383.872837 110.053436,360 C83.687159,328.528108 81.6540229,287.441333 100,280 C120,271.887777 144.702055,320 200,320 C255.297945,320 320,270.651856 320,200 C320,129.348144 280,80 200,80 C120,80 79.9607444,129.348144 79.9607444,200 L79.9607444,380 C79.9607444,400.484491 52.5173973,420 40,420 C27.4826027,420 7.10542736e-15,398.833096 0,380 L0,200 Z M200,260 C166.862915,260 140,233.137085 140,200 C140,166.862915 166.862915,140 200,140 C233.137085,140 260,166.862915 260,200 C260,233.137085 233.137085,260 200,260 Z" id="Shape" fill="url(#radialGradient-1)"></path>
+                <text id="poac" font-family="ArialRoundedMTBold, Arial Rounded MT Bold" font-size="251" font-weight="normal" letter-spacing="-12.55" fill="#000000">
+                    <tspan x="406" y="367">poac</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/assets/static/images/poacpm-speed.png b/assets/static/images/poacpm-speed.png
deleted file mode 100644
index 2731058a..00000000
Binary files a/assets/static/images/poacpm-speed.png and /dev/null differ
diff --git a/lib/poacpm_web/templates/layout/app.html.eex b/lib/poacpm_web/templates/layout/app.html.eex
index 65ca7e26..951fbe09 100644
--- a/lib/poacpm_web/templates/layout/app.html.eex
+++ b/lib/poacpm_web/templates/layout/app.html.eex
@@ -16,22 +16,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <title>poacpm</title>
-    <meta name="description" content="Modern Package Manager for C++ Developers. poacpm is the package manager that for open source. Easy to introduce to your C++ project, you can use the package intuitively.">
+    <meta name="description" content="Modern Package Manager for C++ Developers. poac is the package manager that for open source. Easy to introduce to your C++ project, you can use the package intuitively.">
     <meta name="author" content="matken">
-    <meta property="og:title" content="poacpm">
-    <meta property="og:site_name" content="poac.pm">
+    <meta property="og:title" content="poac">
+    <meta property="og:site_name" content="poac">
     <meta property="og:type" content="website">
     <meta property="og:url" content="https://poac.pm">
-    <!-- <meta property="og:image" content="ogpのURL貼る">  -->
-    <meta property="og:description" content="Modern Package Manager for C++ Developers. poacpm is the package manager that for open source. Easy to introduce to your C++ project, you can use the package intuitively.">
-    <!-- <meta name="twitter:card" content="summary">
-    <meta name="twitter:site" content="サイトのURL貼る">
-    <meta name="twitter:image" content="ogpのURL貼る"> -->
+    <meta property="og:image" content="https://poac.pm/images/icon-512x512.png">
+    <meta property="og:description" content="Modern Package Manager for C++ Developers. poac is the package manager that for open source. Easy to introduce to your C++ project, you can use the package intuitively.">
+    <meta name="twitter:card" content="poac | Package manager for C/C++">
+    <meta name="twitter:site" content="https://poac.pm">
+    <meta name="twitter:image" content="https://poac.pm">
 
-    <!--
     <link rel="icon" type="image/x-icon" href="<%= static_path(@conn, "/static/images/favicon.ico") %>" />
     <link rel="apple-touch-icon" sizes="152x152" href="<%= static_path(@conn, "/static/images/apple-touch-icon.png") %>" />
-    -->
 
     <meta name="csrf" content="<%= Plug.CSRFProtection.get_csrf_token() %>">