add more icons etc from realfavicongenerator.net

eins78 · Jul 18, 2021 · faa0151 · faa0151
1 parent 1d21604
commit faa0151
Show file tree

Hide file tree

Showing 16 changed files with 142 additions and 9 deletions.
diff --git a/pages/_app.js b/pages/_app.js
@@ -4,16 +4,28 @@ import '../styles/style.scss'
 
 const SITE_TITLE = 'audioplotter'
 
+// from favicons package
+function faviconsHead() {
+  return (
+    <>
+      <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
+      <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
+      <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
+      <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#500cbd" />
+      <meta name="apple-mobile-web-app-title" content="audiplotter" />
+      <meta name="application-name" content="audiplotter" />
+      <meta name="msapplication-TileColor" content="#500cbd" />
+      <meta name="theme-color" content="#500cbd" />
+    </>
+  )
+}
+
 // from https://github.com/vercel/next.js/blob/736db423528e66d3d8f7aa1174a3b5310d2a57a9/examples/progressive-web-app/pages/_app.js
-function pwaHead(params) {
+function pwaHead() {
   return (
-    <Head>
+    <>
       <link rel="manifest" href="/manifest.json" />
-      <link href="/icons/favicon-16x16.png" rel="icon" type="image/png" sizes="16x16" />
-      <link href="/icons/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32" />
-      <link rel="apple-touch-icon" href="/apple-icon.png"></link>
-      <meta name="theme-color" content="#317EFB" />
-    </Head>
+    </>
   )
 }
 
@@ -30,7 +42,8 @@ function MyApp({ Component, pageProps }) {
         <title>{SITE_TITLE}</title>
         {/* <meta name="description" content="Description" /> */}
         {/* <meta name="keywords" content="Keywords" /> */}
-        {pwaHead}
+        {pwaHead()}
+        {faviconsHead()}
       </Head>
       <Component {...pageProps} />
     </>

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="/icons/mstile-150x150.png"/>
+            <TileColor>#500cbd</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/icons/README.md b/public/icons/README.md
@@ -0,0 +1,23 @@
+# Your Favicon Package
+
+This package was generated with [RealFaviconGenerator](https://realfavicongenerator.net/) [v0.16](https://realfavicongenerator.net/change_log#v0.16)
+
+## Install instructions
+
+To install this package:
+
+Extract this package in the root of your web site. If your site is <code>http://www.example.com</code>, you should be able to access a file named <code>http://www.example.com/favicon.ico</code>.
+
+Insert the following code in the `head` section of your pages:
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
+    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#500cbd">
+    <meta name="apple-mobile-web-app-title" content="audiplotter">
+    <meta name="application-name" content="audiplotter">
+    <meta name="msapplication-TileColor" content="#500cbd">
+    <meta name="theme-color" content="#ffffff">
+
+*Optional* - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker)
diff --git a/public/icons/android-chrome-192x192.png b/public/icons/android-chrome-192x192.png
diff --git a/public/icons/android-chrome-512x512.png b/public/icons/android-chrome-512x512.png
diff --git a/public/icons/apple-touch-icon.png b/public/icons/apple-touch-icon.png
diff --git a/public/icons/favicon-16x16.png b/public/icons/favicon-16x16.png
diff --git a/public/icons/favicon-32x32.png b/public/icons/favicon-32x32.png
diff --git a/public/icons/favicon.ico b/public/icons/favicon.ico
diff --git a/public/icons/mstile-144x144.png b/public/icons/mstile-144x144.png
diff --git a/public/icons/mstile-150x150.png b/public/icons/mstile-150x150.png
diff --git a/public/icons/mstile-310x150.png b/public/icons/mstile-310x150.png
diff --git a/public/icons/mstile-310x310.png b/public/icons/mstile-310x310.png
diff --git a/public/icons/mstile-70x70.png b/public/icons/mstile-70x70.png
diff --git a/public/icons/safari-pinned-tab.svg b/public/icons/safari-pinned-tab.svg
diff --git a/public/manifest.json b/public/manifest.json
@@ -2,7 +2,7 @@
   "name": "audioplotter",
   "short_name": "audioplotter",
   "theme_color": "#500cbd",
-  "background_color": "#004740",
+  "background_color": "#500cbd",
   "display": "fullscreen",
   "orientation": "portrait",
   "scope": "/",
@@ -47,6 +47,16 @@
       "src": "icons/icon-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
+    },
+    {
+      "src": "icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
   ],
   "splash_pages": null