feat(dashboard-v2): add platform-specific favicons

packages/dashboard-v2/src/components/Metadata/Metadata.js

@@ -1,6 +1,13 @@
 import { Helmet } from "react-helmet";
 import { graphql, useStaticQuery } from "gatsby";
 
+import favicon from "../../../static/favicon.ico";
+import favicon16 from "../../../static/favicon-16x16.png";
+import favicon32 from "../../../static/favicon-32x32.png";
+import appleIcon144 from "../../../static/apple-touch-icon-144x144.png";
+import appleIcon152 from "../../../static/apple-touch-icon-152x152.png";
+import msTileIcon from "../../../static/mstile-144x144.png";
+
 export const Metadata = ({ children }) => {
   const { site } = useStaticQuery(
     graphql`
@@ -18,7 +25,15 @@ export const Metadata = ({ children }) => {
 
   return (
     <Helmet htmlAttributes={{ lang: "en" }} titleTemplate={`%s | ${title}`} defaultTitle={title}>
-      <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+      <meta name="application-name" content="Skynet Account Dashboard" />
+      <link rel="icon" type="image/x-icon" href={favicon} />
+      <link rel="icon" type="image/png" href={favicon16} sizes="16x16" />
+      <link rel="icon" type="image/png" href={favicon32} sizes="32x32" />
+      <link rel="apple-touch-icon-precomposed" sizes="144x144" href={appleIcon144} />
+      <link rel="apple-touch-icon-precomposed" sizes="152x152" href={appleIcon152} />
+      <meta name="msapplication-TileColor" content="#FFFFFF" />
+      <meta name="msapplication-TileImage" content={msTileIcon} />
+
       <meta name="description" content="Manage your Skynet uploads, account subscription, settings and API keys" />
       <link rel="preconnect" href={`https://${process.env.GATSBY_PORTAL_DOMAIN}/`} />
       {children}