updated favicon

dlevacher · Feb 19, 2019 · 2c27665 · 2c27665
1 parent c1df061
commit 2c27665
Show file tree

Hide file tree

Showing 28 changed files with 107 additions and 125 deletions.
diff --git a/assets/android-chrome-192x192.png b/assets/android-chrome-192x192.png
diff --git a/assets/android-chrome-512x512.png b/assets/android-chrome-512x512.png
diff --git a/assets/apple-touch-icon.png b/assets/apple-touch-icon.png
diff --git a/assets/favicon-120.png b/assets/favicon-120.png
diff --git a/assets/favicon-128.png b/assets/favicon-128.png
diff --git a/assets/favicon-144.png b/assets/favicon-144.png
diff --git a/assets/favicon-152.png b/assets/favicon-152.png
diff --git a/assets/favicon-167.png b/assets/favicon-167.png
diff --git a/assets/favicon-16x16.png b/assets/favicon-16x16.png
diff --git a/assets/favicon-180.png b/assets/favicon-180.png
diff --git a/assets/favicon-195.png b/assets/favicon-195.png
diff --git a/assets/favicon-196.png b/assets/favicon-196.png
diff --git a/assets/favicon-228.png b/assets/favicon-228.png
diff --git a/assets/favicon-32.png b/assets/favicon-32.png
diff --git a/assets/favicon-32x32.png b/assets/favicon-32x32.png
diff --git a/assets/favicon-96.png b/assets/favicon-96.png
diff --git a/assets/logo.svg b/assets/logo.svg
diff --git a/assets/safari-pinned-tab.svg b/assets/safari-pinned-tab.svg
diff --git a/browserconfig.xml b/browserconfig.xml
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/mstile-144x144.png b/public/mstile-144x144.png
diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png
diff --git a/public/mstile-310x150.png b/public/mstile-310x150.png
diff --git a/public/mstile-310x310.png b/public/mstile-310x310.png
diff --git a/public/mstile-70x70.png b/public/mstile-70x70.png
diff --git a/server/layout.js b/server/layout.js
@@ -3,19 +3,11 @@ const assets = require('../common/assets');
 const initScript = require('./initScript');
 
 module.exports = function(state, body = '') {
-  const firaTag = state.fira
-    ? html`
-        <link
-          rel="stylesheet"
-          type="text/css"
-          href="https://code.cdn.mozilla.net/fonts/fira.css"
-        />
-      `
-    : '';
   return html`
     <!DOCTYPE html>
     <html lang="${state.locale}">
       <head>
+        <title>${state.title}</title>
         <base href="/" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta charset="utf-8" />
@@ -36,66 +28,38 @@ module.exports = function(state, body = '') {
           content="${state.baseUrl}${assets.get('send-twitter.jpg')}"
         />
         <meta property="og:url" content="${state.baseUrl}" />
-        <meta name="theme-color" content="#0a84ff" />
-        <link rel="manifest" href="/app.webmanifest" />
+        <meta name="theme-color" content="#ffffff" />
+        <meta name="msapplication-TileColor" content="#da532c" />
 
-        <title>${state.title}</title>
+        <link rel="manifest" href="/app.webmanifest" />
         <link rel="stylesheet" type="text/css" href="/inter.css" />
         <link
           rel="stylesheet"
           type="text/css"
           href="${assets.get('app.css')}"
         />
-
-        <!-- generic favicons -->
-        <link rel="icon" href="${assets.get('favicon-32.png')}" sizes="32x32" />
-        <link rel="icon" href="${assets.get('favicon-96.png')}" sizes="96x96" />
         <link
-          rel="icon"
-          href="${assets.get('favicon-128.png')}"
-          sizes="128x128"
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="${assets.get('apple-touch-icon.png')}"
         />
         <link
           rel="icon"
-          href="${assets.get('favicon-228.png')}"
-          sizes="228x228"
-        />
-
-        <!-- Android -->
-        <link
-          rel="shortcut icon"
-          href="${assets.get('favicon-196.png')}"
-          sizes="196x196"
+          type="image/png"
+          sizes="32x32"
+          href="${assets.get('favicon-32x32.png')}"
         />
-
-        <!-- iOS -->
         <link
-          rel="apple-touch-icon"
-          href="${assets.get('favicon-120.png')}"
-          sizes="120x120"
-        />
-        <link
-          rel="apple-touch-icon"
-          href="${assets.get('favicon-152.png')}"
-          sizes="152x152"
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="${assets.get('favicon-16x16.png')}"
         />
         <link
-          rel="apple-touch-icon"
-          href="${assets.get('favicon-180.png')}"
-          sizes="180x180"
+          rel="mask-icon"
+          href="${assets.get('safari-pinned-tab.svg')}"
+          color="#5bbad5"
         />
-
-        <!-- Windows 8 IE 10 -->
-        <meta name="msapplication-TileColor" content="#FFFFFF" />
-        <meta
-          name="msapplication-TileImage"
-          content="${assets.get('favicon-144.png')}"
-        />
-
-        <!-- Windows 8.1 + IE11 and above -->
-        <meta name="msapplication-config" content="/browserconfig.xml" />
-
-        ${firaTag}
         <script defer src="${assets.get('app.js')}"></script>
       </head>
       <noscript>

diff --git a/server/routes/webmanifest.js b/server/routes/webmanifest.js
@@ -7,20 +7,20 @@ module.exports = function(req, res) {
     lang: req.language,
     icons: [
       {
-        src: assets.get('favicon-144.png'),
+        src: assets.get('android-chrome-192x192.png'),
         type: 'image/png',
-        sizes: '144x144'
+        sizes: '192x192'
       },
       {
-        src: assets.get('send_logo.svg'),
-        type: 'image/svg',
-        sizes: '192x192 512x512'
+        src: assets.get('android-chrome-512x512.png'),
+        type: 'image/png',
+        sizes: '512x512'
       }
     ],
     start_url: '/',
     display: 'standalone',
     orientation: 'portrait',
-    theme_color: '#0a84ff',
+    theme_color: '#ffffff',
     background_color: 'white'
   };
   res.set('Content-Type', 'application/manifest+json');