Vizzuality · mbarrenechea · Jul 21, 2021 · Jul 20, 2021 · Jul 20, 2021 · Jul 20, 2021
diff --git a/app/images/meta-icons/android-icon-144x144.png b/app/images/meta-icons/android-icon-144x144.png
diff --git a/app/images/meta-icons/android-icon-192x192.png b/app/images/meta-icons/android-icon-192x192.png
diff --git a/app/images/meta-icons/android-icon-36x36.png b/app/images/meta-icons/android-icon-36x36.png
diff --git a/app/images/meta-icons/android-icon-48x48.png b/app/images/meta-icons/android-icon-48x48.png
diff --git a/app/images/meta-icons/android-icon-72x72.png b/app/images/meta-icons/android-icon-72x72.png
diff --git a/app/images/meta-icons/android-icon-96x96.png b/app/images/meta-icons/android-icon-96x96.png
diff --git a/app/images/meta-icons/apple-icon-114x114.png b/app/images/meta-icons/apple-icon-114x114.png
diff --git a/app/images/meta-icons/apple-icon-120x120.png b/app/images/meta-icons/apple-icon-120x120.png
diff --git a/app/images/meta-icons/apple-icon-144x144.png b/app/images/meta-icons/apple-icon-144x144.png
diff --git a/app/images/meta-icons/apple-icon-152x152.png b/app/images/meta-icons/apple-icon-152x152.png
diff --git a/app/images/meta-icons/apple-icon-180x180.png b/app/images/meta-icons/apple-icon-180x180.png
diff --git a/app/images/meta-icons/apple-icon-57x57.png b/app/images/meta-icons/apple-icon-57x57.png
diff --git a/app/images/meta-icons/apple-icon-60x60.png b/app/images/meta-icons/apple-icon-60x60.png
diff --git a/app/images/meta-icons/apple-icon-72x72.png b/app/images/meta-icons/apple-icon-72x72.png
diff --git a/app/images/meta-icons/apple-icon-76x76.png b/app/images/meta-icons/apple-icon-76x76.png
diff --git a/app/images/meta-icons/apple-icon-precomposed.png b/app/images/meta-icons/apple-icon-precomposed.png
diff --git a/app/images/meta-icons/apple-icon.png b/app/images/meta-icons/apple-icon.png
diff --git a/app/images/meta-icons/browserconfig.xml b/app/images/meta-icons/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
diff --git a/app/images/meta-icons/favicon-16x16.png b/app/images/meta-icons/favicon-16x16.png
diff --git a/app/images/meta-icons/favicon-32x32.png b/app/images/meta-icons/favicon-32x32.png
diff --git a/app/images/meta-icons/favicon-96x96.png b/app/images/meta-icons/favicon-96x96.png
diff --git a/app/images/meta-icons/favicon.ico b/app/images/meta-icons/favicon.ico
diff --git a/app/images/meta-icons/manifest.json b/app/images/meta-icons/manifest.json
@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}
diff --git a/app/images/meta-icons/ms-icon-144x144.png b/app/images/meta-icons/ms-icon-144x144.png
diff --git a/app/images/meta-icons/ms-icon-150x150.png b/app/images/meta-icons/ms-icon-150x150.png
diff --git a/app/images/meta-icons/ms-icon-310x310.png b/app/images/meta-icons/ms-icon-310x310.png
diff --git a/app/images/meta-icons/ms-icon-70x70.png b/app/images/meta-icons/ms-icon-70x70.png
diff --git a/app/images/social-media/marxan-social-media.png b/app/images/social-media/marxan-social-media.png
diff --git a/app/images/social-media/share-fb.png b/app/images/social-media/share-fb.png
diff --git a/app/images/social-media/share-tw.png b/app/images/social-media/share-tw.png
diff --git a/app/layout/meta-icons/component.tsx b/app/layout/meta-icons/component.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import Head from 'next/head';
+
+import APPLE_XXXS from 'images/meta-icons/apple-icon-57x57.png';
+import APPLE_XXS from 'images/meta-icons/apple-icon-60x60.png';
+import APPLE_XS from 'images/meta-icons/apple-icon-72x72.png';
+import APPLE_S from 'images/meta-icons/apple-icon-76x76.png';
+import APPLE_M from 'images/meta-icons/apple-icon-114x114.png';
+import APPLE_L from 'images/meta-icons/apple-icon-120x120.png';
+import APPLE_XL from 'images/meta-icons/apple-icon-144x144.png';
+import APPLE_XXL from 'images/meta-icons/apple-icon-152x152.png';
+import APPLE_XXXL from 'images/meta-icons/apple-icon-180x180.png';
+
+import ANDROID_XL from 'images/meta-icons/android-icon-192x192.png';
+
+import FAVICON_S from 'images/meta-icons/favicon-16x16.png';
+import FAVICON_M from 'images/meta-icons/favicon-32x32.png';
+import FAVICON_L from 'images/meta-icons/favicon-96x96.png';
+
+import PIN_ICON from 'images/meta-icons/ms-icon-144x144.png';
+
+export interface MetaIconsProps {
+
+}
+
+export const MetaIcons: React.FC<MetaIconsProps> = () => {
+  return (
+    <Head>
+      <link rel="apple-touch-icon" sizes="57x57" href={APPLE_XXXS} />
+      <link rel="apple-touch-icon" sizes="60x60" href={APPLE_XXS} />
+      <link rel="apple-touch-icon" sizes="72x72" href={APPLE_XS} />
+      <link rel="apple-touch-icon" sizes="76x76" href={APPLE_S} />
+      <link rel="apple-touch-icon" sizes="114x114" href={APPLE_M} />
+      <link rel="apple-touch-icon" sizes="120x120" href={APPLE_L} />
+      <link rel="apple-touch-icon" sizes="144x144" href={APPLE_XL} />
+      <link rel="apple-touch-icon" sizes="152x152" href={APPLE_XXL} />
+      <link rel="apple-touch-icon" sizes="180x180" href={APPLE_XXXL} />
+      <link rel="icon" type="image/png" sizes="192x192" href={ANDROID_XL} />
+      <link rel="icon" type="image/png" sizes="32x32" href={FAVICON_M} />
+      <link rel="icon" type="image/png" sizes="96x96" href={FAVICON_L} />
+      <link rel="icon" type="image/png" sizes="16x16" href={FAVICON_S} />
+      <link rel="manifest" href="/manifest.json" />
+      <meta name="msapplication-TileColor" content="#ffffff" />
+      <meta name="msapplication-TileImage" content={PIN_ICON} />
+      <meta name="theme-color" content="#ffffff" />
+    </Head>
+  );
+};
+
+export default MetaIcons;
diff --git a/app/layout/meta-icons/index.ts b/app/layout/meta-icons/index.ts
@@ -0,0 +1 @@
+export { default } from './component';
diff --git a/app/layout/meta-tags/component.tsx b/app/layout/meta-tags/component.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import Head from 'next/head';
 
+import FB_IMAGE from 'images/social-media/share-fb.png';
+import TW_IMAGE from 'images/social-media/share-tw.png';
+
 export interface MetaTagsProps {
   name: string,
   title: string,
@@ -10,12 +13,10 @@ export interface MetaTagsProps {
   publisher?: string,
   section?: string,
   tag?: string,
-  image: string,
   imageURL?: string,
   imageWidth?: string,
   imageHeight?: string,
   twitterCard?: string,
-  twitterImage?: string,
   twitterSite?: string,
 }
 
@@ -28,12 +29,10 @@ export const MetaTags: React.FC<MetaTagsProps> = ({
   publisher,
   section,
   tag,
-  image,
   imageURL,
   imageWidth,
   imageHeight,
   twitterCard,
-  twitterImage,
   twitterSite,
 }: MetaTagsProps) => {
   return (
@@ -46,12 +45,12 @@ export const MetaTags: React.FC<MetaTagsProps> = ({
       {publisher && <meta property="article:publisher" content={publisher} key="publisher" />}
       {section && <meta property="article:section" content={section} key="section" />}
       {tag && <meta property="article:tag" content={tag} key="tag" />}
-      {image && <meta property="og:image" content={image} key="image" />}
+      <meta property="og:image" content={FB_IMAGE} key="image" />
       {imageURL && <meta property="og:image:secure_url" content={imageURL} key="imageURL" />}
       {imageWidth && <meta property="og:image:width" content={imageWidth} key="imageWidth" />}
       {imageHeight && <meta property="og:image:height" content={imageHeight} key="imageHeight" />}
       {twitterCard && <meta property="twitter:card" content={twitterCard} key="twitterCard" />}
-      {twitterImage && <meta property="twitter:image" content={twitterImage} key="twitterImage" />}
+      <meta property="twitter:image" content={TW_IMAGE} key="twitterImage" />
       {twitterSite && <meta property="twitter:site" content={twitterSite} key="twitterSite" />}
     </Head>
   );

diff --git a/app/layout/title/project-title/component.tsx b/app/layout/title/project-title/component.tsx
@@ -24,7 +24,6 @@ export const ProjectTitle: React.FC<ProjectTitleProps> = ({ title }:ProjectTitle
         {' '}
         {projectData?.name}
       </title>
-      <link rel="icon" href="/favicon.ico" />
     </Head>
   );
 };

diff --git a/app/layout/title/published-project-title/component.tsx b/app/layout/title/published-project-title/component.tsx
@@ -26,7 +26,6 @@ export const PublishedProjectTitle: React.FC<PublishedProjectTitleProps> = ({
         {' '}
         {projectData?.name}
       </title>
-      <link rel="icon" href="/favicon.ico" />
     </Head>
   );
 };

diff --git a/app/pages/404.tsx b/app/pages/404.tsx
@@ -2,15 +2,17 @@ import React from 'react';
 import Head from 'next/head';
 
 import Header from 'layout/header';
+import MetaIcons from 'layout/meta-icons';
 
 const Custom404: React.FC = () => {
   return (
     <>
       <Head>
         <title>404 - Page Not Found</title>
-        <link rel="icon" href="/favicon.ico" />
       </Head>
 
+      <MetaIcons />
+
       <main className="flex flex-col w-screen h-screen">
         <Header size="base" />
 

diff --git a/app/pages/about.tsx b/app/pages/about.tsx
@@ -7,12 +7,11 @@ import Contact from 'layout/statics/contact';
 import Header from 'layout/header';
 import Hero from 'layout/statics/hero';
 import Footer from 'layout/footer';
+import MetaIcons from 'layout/meta-icons';
 import MetaTags from 'layout/meta-tags';
 import Utilities from 'layout/about/utilities';
 import Values from 'layout/about/values';
 
-import MARXAN_SOCIAL_MEDIA_IMG from 'images/social-media/marxan-social-media.png';
-
 import { withUser } from 'hoc/auth';
 
 export const getServerSideProps = withUser();
@@ -27,15 +26,15 @@ const About: React.FC = () => {
     <>
       <Head>
         <title>About</title>
-        <link rel="icon" href="/favicon.ico" />
       </Head>
 
+      <MetaIcons />
+
       <MetaTags
         name="Marxan conservation Solutions"
         title={TITLE_TEXT}
         description={DESCRIPTION_TEXT}
         url={`${process.env.NEXT_PUBLIC_VERCEL_URL}${asPath}`}
-        image={MARXAN_SOCIAL_MEDIA_IMG}
         type="article"
         twitterCard="summary"
         twitterSite="@Marxan_Planning"

diff --git a/app/pages/auth/forgot-password.tsx b/app/pages/auth/forgot-password.tsx
@@ -3,6 +3,7 @@ import Head from 'next/head';
 
 import Header from 'layout/header';
 import ForgotPassword from 'layout/forgot-password';
+import MetaIcons from 'layout/meta-icons';
 
 import { withoutProtection } from 'hoc/auth';
 
@@ -13,9 +14,10 @@ const ForgotPasswordPage: React.FC = () => {
     <>
       <Head>
         <title>Forgot password</title>
-        <link rel="icon" href="/favicon.ico" />
       </Head>
 
+      <MetaIcons />
+
       <main className="flex flex-col w-screen h-screen">
         <Header size="base" />
 

diff --git a/app/pages/auth/sign-in.tsx b/app/pages/auth/sign-in.tsx
@@ -4,11 +4,10 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 
 import Header from 'layout/header';
+import MetaIcons from 'layout/meta-icons';
 import MetaTags from 'layout/meta-tags';
 import SignIn from 'layout/sign-in';
 
-import MARXAN_SOCIAL_MEDIA_IMG from 'images/social-media/marxan-social-media.png';
-
 import { withoutProtection } from 'hoc/auth';
 
 export const getServerSideProps = withoutProtection();
@@ -20,15 +19,15 @@ const SignInPage: React.FC = () => {
     <>
       <Head>
         <title>Sign in</title>
-        <link rel="icon" href="/favicon.ico" />
       </Head>
 
+      <MetaIcons />
+
       <MetaTags
         name="Marxan conservation Solutions"
         title="Sign in"
         description="Get in Marxan!"
         url={`${process.env.NEXT_PUBLIC_VERCEL_URL}${asPath}`}
-        image={MARXAN_SOCIAL_MEDIA_IMG}
         type="article"
         twitterCard="summary"
         twitterSite="@Marxan_Planning"

diff --git a/app/pages/auth/sign-up.tsx b/app/pages/auth/sign-up.tsx
@@ -4,11 +4,10 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 
 import Header from 'layout/header';
+import MetaIcons from 'layout/meta-icons';
 import MetaTags from 'layout/meta-tags';
 import SignUp from 'layout/sign-up';
 
-import MARXAN_SOCIAL_MEDIA_IMG from 'images/social-media/marxan-social-media.png';
-
 import { withUser } from 'hoc/auth';
 
 export const getServerSideProps = withUser();
@@ -20,15 +19,15 @@ const SignUpPage: React.FC = () => {
     <>
       <Head>
         <title>Sign up</title>
-        <link rel="icon" href="/favicon.ico" />
       </Head>
 
+      <MetaIcons />
+
       <MetaTags
         name="Marxan conservation Solutions"
         title="Sign up"
         description="Get Started!"
         url={`${process.env.NEXT_PUBLIC_VERCEL_URL}${asPath}`}
-        image={MARXAN_SOCIAL_MEDIA_IMG}
         type="article"
         twitterCard="summary"
         twitterSite="@Marxan_Planning"

diff --git a/app/pages/community/index.tsx b/app/pages/community/index.tsx
@@ -8,10 +8,9 @@ import Contact from 'layout/statics/contact';
 import Header from 'layout/header';
 import Hero from 'layout/statics/hero';
 import Footer from 'layout/footer';
+import MetaIcons from 'layout/meta-icons';
 import MetaTags from 'layout/meta-tags';
 
-import MARXAN_SOCIAL_MEDIA_IMG from 'images/social-media/marxan-social-media.png';
-
 import { withUser } from 'hoc/auth';
 
 export const getServerSideProps = withUser();
@@ -26,15 +25,15 @@ const Community: React.FC = () => {
     <>
       <Head>
         <title>Community</title>
-        <link rel="icon" href="/favicon.ico" />
       </Head>
 
+      <MetaIcons />
+
       <MetaTags
         name="Marxan conservation Solutions"
         title={TITLE_TEXT}
         description={DESCRIPTION_TEXT}
         url={`${process.env.NEXT_PUBLIC_VERCEL_URL}${asPath}`}
-        image={MARXAN_SOCIAL_MEDIA_IMG}
         type="article"
         twitterCard="summary"
         twitterSite="@Marxan_Planning"

diff --git a/app/pages/community/projects/[pid]/index.tsx b/app/pages/community/projects/[pid]/index.tsx
@@ -10,12 +10,11 @@ import { withPublishedProject } from 'hoc/projects';
 import Contact from 'layout/statics/contact';
 import Header from 'layout/header';
 import Footer from 'layout/footer';
+import MetaIcons from 'layout/meta-icons';
 import MetaTags from 'layout/meta-tags';
 import ProjectDetail from 'layout/community/published-projects/detail';
 import PublishedProjectTitle from 'layout/title/published-project-title';
 
-import MARXAN_SOCIAL_MEDIA_IMG from 'images/social-media/marxan-social-media.png';
-
 export const getServerSideProps = withUser(withPublishedProject());
 
 const PublishedProjectPage: React.FC = () => {
@@ -34,12 +33,13 @@ const PublishedProjectPage: React.FC = () => {
     <>
       <PublishedProjectTitle />
 
+      <MetaIcons />
+
       <MetaTags
         name="Marxan conservation Solutions"
         title={name}
         description={description}
         url={`${process.env.NEXT_PUBLIC_VERCEL_URL}${asPath}`}
-        image={MARXAN_SOCIAL_MEDIA_IMG}
         type="article"
         twitterCard="summary"
         twitterSite="@Marxan_Planning"

diff --git a/app/pages/community/projects/index.tsx b/app/pages/community/projects/index.tsx
@@ -7,11 +7,10 @@ import Contact from 'layout/statics/contact';
 import Header from 'layout/header';
 import Hero from 'layout/statics/hero';
 import Footer from 'layout/footer';
+import MetaIcons from 'layout/meta-icons';
 import MetaTags from 'layout/meta-tags';
 import PublishedProjects from 'layout/community/published-projects';
 
-import MARXAN_SOCIAL_MEDIA_IMG from 'images/social-media/marxan-social-media.png';
-
 import { withUser } from 'hoc/auth';
 
 export const getServerSideProps = withUser();
@@ -26,15 +25,15 @@ const CommunityProjects: React.FC = () => {
     <>
       <Head>
         <title>Community</title>
-        <link rel="icon" href="/favicon.ico" />
       </Head>
 
+      <MetaIcons />
+
       <MetaTags
         name="Marxan conservation Solutions"
         title={TITLE_TEXT}
         description={DESCRIPTION_TEXT}
         url={`${process.env.NEXT_PUBLIC_VERCEL_URL}${asPath}`}
-        image={MARXAN_SOCIAL_MEDIA_IMG}
         type="article"
         twitterCard="summary"
         twitterSite="@Marxan_Planning"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<?xml version="1.0" encoding="utf-8"?>
		<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
-Original file line number
+Diff line change
@@ Expand Up @@
             {' '}
             {projectData?.name}
           </title>
-          <link rel="icon" href="/favicon.ico" />
         </Head>
       );
     };
@@ Expand Down @@