Optimize Multi-Device Favicon

This commit is contained in:
Andrew MacLean 2020-11-09 12:37:14 -08:00
parent 580e74d842
commit 6db2b1fdb5
11 changed files with 114 additions and 0 deletions

View file

@ -1,4 +1,5 @@
import React from 'react';
import Head from "next/head";
import { IntlProvider } from 'react-intl';
import { Provider } from 'react-redux';
import { useStore } from 'redux/store';
@ -9,6 +10,7 @@ import 'styles/variables.css';
import 'styles/bootstrap-grid.css';
import 'styles/index.css';
const Intl = ({ children }) => {
const [locale] = useLocale();
@ -27,6 +29,15 @@ export default function App({ Component, pageProps }) {
return (
<Provider store={store}>
<Head>
<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="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
</Head>
<Intl>
<Component {...pageProps} />
</Intl>