Jordan/1894 favicons (#1923)

* favicon all the places * group static assets using vue 'static' folder * close head tag in index.ejs
luniehq · Feb 4, 2019 · 33ad52d · 33ad52d
1 parent 37eae3b
commit 33ad52d
Show file tree

Hide file tree

Showing 25 changed files with 93 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -64,6 +64,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [\#1804](https://github.com/cosmos/voyager/issues/1804) Moved Voyager to the web @faboweb
 - [\#1835](https://github.com/cosmos/voyager/issues/1835) allow user to use different signing methods @faboweb
 - [\#1338](https://github.com/cosmos/voyager/issues/1338) Add Ledger Nano S support for signing transactions @fedekunze
+- [\#1894](https://github.com/cosmos/voyager/issues/1894) Added favicons for all the browsers and devices @jbibla
 
 ### Changed
 

diff --git a/app/icons/icon.icns b/app/icons/icon.icns
diff --git a/app/icons/icon.ico b/app/icons/icon.ico
diff --git a/app/index.ejs b/app/index.ejs
@@ -1,16 +1,26 @@
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 
-<head>
-  <meta name=viewport content="width=device-width, user-scalable=no">
-  <meta charset="utf-8">
-  <title>Cosmos Voyager</title>
-  <% if (htmlWebpackPlugin.options.appModules) { %>
-    <% } %>
+  <head>
+    <meta name=viewport content="width=device-width, user-scalable=no">
+    <meta charset="utf-8">
+    <meta name="msapplication-TileColor" content="#603cba">
+    <meta name="theme-color" content="#ffffff">
+    <title>Cosmos Voyager</title>
 
-      <body style="background: #15182d">
-        <script async src='https://www.google-analytics.com/analytics.js'></script>
-        <div id="app" style="background: #15182d"></div>
-      </body>
+    <link rel="apple-touch-icon" sizes="180x180" href="static/icons/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/icons/favicon-16x16.png">
+    <link rel="manifest" href="static/icons/site.webmanifest">
+    <link rel="mask-icon" href="static/icons/safari-pinned-tab.svg" color="#5bbad5">
+
+      <% if (htmlWebpackPlugin.options.appModules) { %>
+      <% } %>
+  </head>
+
+  <body style="background: #15182d">
+    <script async src='https://www.google-analytics.com/analytics.js'></script>
+    <div id="app" style="background: #15182d"></div>
+  </body>
 
 </html>
diff --git a/app/static/icons/android-chrome-192x192.png b/app/static/icons/android-chrome-192x192.png
diff --git a/app/static/icons/android-chrome-512x512.png b/app/static/icons/android-chrome-512x512.png
diff --git a/app/static/icons/apple-touch-icon.png b/app/static/icons/apple-touch-icon.png
diff --git a/app/static/icons/browserconfig.xml b/app/static/icons/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/static/icons/mstile-150x150.png"/>
+            <TileColor>#603cba</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/app/static/icons/favicon-16x16.png b/app/static/icons/favicon-16x16.png
diff --git a/app/static/icons/favicon-32x32.png b/app/static/icons/favicon-32x32.png
diff --git a/app/static/icons/favicon.ico b/app/static/icons/favicon.ico
diff --git a/app/static/icons/mstile-150x150.png b/app/static/icons/mstile-150x150.png
diff --git a/app/icons/png/1024x1024.png → app/static/icons/png/1024x1024.png b/app/icons/png/1024x1024.png → app/static/icons/png/1024x1024.png
diff --git a/app/icons/png/128x128.png → app/static/icons/png/128x128.png b/app/icons/png/128x128.png → app/static/icons/png/128x128.png
diff --git a/app/icons/png/16x16.png → app/static/icons/png/16x16.png b/app/icons/png/16x16.png → app/static/icons/png/16x16.png
diff --git a/app/icons/png/24x24.png → app/static/icons/png/24x24.png b/app/icons/png/24x24.png → app/static/icons/png/24x24.png
diff --git a/app/icons/png/256x256.png → app/static/icons/png/256x256.png b/app/icons/png/256x256.png → app/static/icons/png/256x256.png
diff --git a/app/icons/png/32x32.png → app/static/icons/png/32x32.png b/app/icons/png/32x32.png → app/static/icons/png/32x32.png
diff --git a/app/icons/png/48x48.png → app/static/icons/png/48x48.png b/app/icons/png/48x48.png → app/static/icons/png/48x48.png
diff --git a/app/icons/png/512x512.png → app/static/icons/png/512x512.png b/app/icons/png/512x512.png → app/static/icons/png/512x512.png
diff --git a/app/icons/png/64x64.png → app/static/icons/png/64x64.png b/app/icons/png/64x64.png → app/static/icons/png/64x64.png
diff --git a/app/icons/png/96x96.png → app/static/icons/png/96x96.png b/app/icons/png/96x96.png → app/static/icons/png/96x96.png
diff --git a/app/static/icons/safari-pinned-tab.svg b/app/static/icons/safari-pinned-tab.svg
diff --git a/app/static/icons/site.webmanifest b/app/static/icons/site.webmanifest
@@ -0,0 +1,19 @@
+{
+  "name": "Voyager",
+  "short_name": "Voyager",
+  "icons": [
+    {
+      "src": "/static/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/static/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/webpack.renderer.config.js b/webpack.renderer.config.js
@@ -46,7 +46,7 @@ const rendererConfig = {
             loader: `url-loader`,
             query: {
               limit: 10000,
-              name: `imgs/[name].[ext]`
+              name: `images/[name].[ext]`
             }
           }
         ]
@@ -73,15 +73,18 @@ const rendererConfig = {
     new VueLoaderPlugin(),
     // the global.GENTLY below fixes a compile issue with superagent + webpack
     // https://github.com/visionmedia/superagent/issues/672
-    new webpack.DefinePlugin({ "global.GENTLY": false }),
+    new webpack.DefinePlugin({
+      "global.GENTLY": false
+    }),
     new HtmlWebpackPlugin({
       filename: `index.html`,
       template: `./app/index.ejs`,
       appModules:
         process.env.NODE_ENV !== `production`
           ? path.resolve(__dirname, `app/node_modules`)
           : false,
-      styles: fs.readFileSync(`./app/src/renderer/styles/index.css`, `utf8`)
+      styles: fs.readFileSync(`./app/src/renderer/styles/index.css`, `utf8`),
+      favicon: `./app/static/icons/favicon.ico`
     }),
     new webpack.NoEmitOnErrorsPlugin(),
     // warnings caused by websocket-stream, which has a server-part that is unavailable on the the client