Favicon is a great way to add branding to your website and is required by today's standards. It allows users to identify your website easily in the crowd. In this article, we will walk through the process of generating and adding favicon to a Next.js application built with the Pages and the App Router. Let's get started!
In the Pages Router, we add the favicon details in a special file called _document.tsx. In the App Router, we export a metadata object with the favicon details from the root layout.tsx file.
Generate favicon
Go to Favicon generator, click on the 'Select your Favicon image' button, and upload your logo. Once the upload is complete, adjust your preferences for favicon background color, radius, margin size, etc., and click on the 'Generate your Favicons and HTML code' button.
Once the files are generated, download them by clicking on the 'Favicon package'. Next, within the public directory of your project, create a layout directory. Within the layout directory, create a favicon directory. After that, unzip the downloaded files, and copy and paste them within the favicon directory.
Now, open the site.webmanifest file and update the name and short_name with your site details. After that, update the icons array by adding /layout/favicon at the beginning of the value of each src key.
Next, save the site.webmanifest file and open the browserconfig.xml file within the same directory. Update the src here as well by adding /layout/favicon at the beginning.
Add favicon in the Pages Router
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang='en'>
<Head>
<link
rel='apple-touch-icon'
sizes='180x180'
href='/layout/favicon/apple-touch-icon.png'
/>
<link
rel='icon'
type='image/png'
sizes='32x32'
href='/layout/favicon/favicon-32x32.png'
/>
<link
rel='icon'
type='image/png'
sizes='16x16'
href='/layout/favicon/favicon-16x16.png'
/>
<link rel='manifest' href='/layout/favicon/site.webmanifest' />
<link
rel='mask-icon'
href='/layout/favicon/safari-pinned-tab.svg'
color='#5bbad5'
/>
<link rel='shortcut icon' href='/layout/favicon/favicon.ico' />
<meta name='msapplication-TileColor' content='#da532c' />
<meta name='theme-color' content='#000000' />
<meta
name='msapplication-config'
content='/layout/favicon/browserconfig.xml'
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Copy the link and meta elements from the above Head component and paste them within the Head component in the _document.tsx file of your project.
Add favicon in the App Router
export const metadata: Metadata = {
icons: [
{
rel: 'apple-touch-icon',
sizes: '180x180',
url: '/layout/favicon/apple-touch-icon.png',
},
{
rel: 'icon',
type: 'image/png',
sizes: '32x32',
url: '/layout/favicon/favicon-32x32.png',
},
{
rel: 'icon',
type: 'image/png',
sizes: '16x16',
url: '/layout/favicon/favicon-16x16.png',
},
{
rel: 'mask-icon',
color: '#f8893a',
url: '/layout/favicon/safari-pinned-tab.svg',
},
{
rel: 'shortcut icon',
url: '/layout/favicon/favicon.ico',
},
],
manifest: '/layout/favicon/site.webmanifest',
};
Copy the above metadata object and paste it into the root layout.tsx file of your project.
Now, commit the changes and push them to a production environment. Once the build is ready, go to Favicon checker and put your application URL to check the implementation.
That's it! You've successfully added favicon to your Next.js application now. If you are interested in learning to add metadata in a Next.js application, I have an article on Add metadata in a Next.js application built with the Pages and the App Router that provides further insights.