Step 1 - Generate favicons
You can use “https://www.favicon-generator.org” to generate different sizes of favicon.
Step 2 - Create SEO component
import React from "react";
import Head from "next/head";
export default function Seo({
title = "your site title",
description = "your site description",
url = "https://example.com",
image = "/images/favicons/android-icon-192x192.png",
keywords = "tag1, tag2, tag3",
}) {
return (
<Head>
{/* Global Title */}
<title>
{title ?? process.env.NEXT_PUBLIC_APP_NAME ?? "Next js App"}
</title>
{/* URL's */}
<link rel="canonical" href={url} />
{/* <!-- Primary Meta Tags --> */}
<meta charSet="UTF-8"></meta>
<meta name="title" content={title} />
<meta name="description" content={description} />
<meta name="keywords" content={keywords}></meta>
{/* <!-- Open Graph / Facebook --> */}
<meta property="og:type" content="website" />
<meta property="og:url" content={url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />
{/* <!-- Twitter --> */}
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={url} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={image} />
{/* Favicons */}
<link
rel="apple-touch-icon"
sizes="57x57"
href="/images/favicons/apple-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="/images/favicons/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="/images/favicons/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="/images/favicons/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="/images/favicons/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="/images/favicons/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="/images/favicons/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="/images/favicons/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/images/favicons/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/images/favicons/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/images/favicons/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="/images/favicons/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/images/favicons/favicon-16x16.png"
/>
<link rel="manifest" href="/images/favicons/manifest.json" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta
name="msapplication-TileImage"
content="/images/favicons/ms-icon-144x144.png"
/>
<meta name="theme-color" content="#ffffff"></meta>
</Head>
);
}Step 1 - Usage
pages/index.jsx
return (
...
{/* SEO Component*/}
<Seo />
{/* /SEO Component*/}
...
)pages/posts/index.jsx
return (
...
{/* SEO Component*/}
<Seo title={"MySite | Posts"} url={'https://example.com/posts'} />
{/* /SEO Component*/}
...
)pages/posts/[slug].jsx
return (
...
{/* SEO Component*/}
<Seo
title={post.title}
description={post.excerpt}
url={'https://example.com/posts/'+post.slug}
/>
{/* /SEO Component*/}
...
)