How to add a favicon in Nextjs?
Learn about how to add and troubleshoot favicons in Next.js, including setting up Apple Touch Icons, with practical steps and solutions for common issues.
Yogini Bende
Dec 11, 2023 • 4 min read
Nextjs is a very well-known and most commonly used JavaScript framework now. Many people use it as a static site generator as well because of its flexibility and SEO support. Building a static site in Nextjs is pretty popular and today we will talk about one important part of this, how to add a favicon to your Nextjs website or an app?.
Table of Contents
- What is a Favicon?
- Step 1: Getting a Favicon
- Step 2: Add Favicon to the Public Directory
- Step 3: Linking the Favicon in the Head Component
- Step 4: Testing Your Favicon
- Bonus Step: Setting up Apple Icon
- Nextjs favicon not showing
What is a Favicon?
A favicon is nothing but a "favorite icon," and it plays a very crucial role in branding and the user experience of a web application. Most often, the logo of a product is used as a favicon or if you have your portfolio, maybe a logo with your initials can be used as a favicon.
In Next.js, adding a favicon is generally straightforward, but there can be instances where it doesn't appear as expected. In this article, we will walk through adding a favicon to your Next.js project.
Step 1: Getting a Favicon
Favicons should be square, typically 16x16 or 32x32 pixels, and in formats like .ico, .png, or .svg. Most preferred formats are mostly .ico and .png. If you don't have one, there are many online tools that you can use to create your favicon.
Step 2: Add Favicon to the Public Directory
Place your favicon file in the public directory of your Next.js project. This directory is designed for static files and can be accessed directly from the root URL of your site. This will make sure your favicon files are accessible and browsers will be able to use it.
Step 3: Linking the Favicon in the Head Component
Use the Head component to link your favicon in the document head or a custom _app.js file. Here's a basic example:
import Head from 'next/head';
const MyPage = () => (
<>
<Head>
<link rel='icon' href='/favicon.ico' />
</Head>
{/* Other page content */}
</>
);
export default MyPage;
Remember to adjust the href value if your favicon has a different filename or format.
Step 4: Testing Your Favicon
After setting up your favicon, check if it displays in your browser. If it doesn't appear, or if an old favicon is showing, try clearing your browser's cache as it often caches favicons.
Bonus Step: Setting up Apple Icon
Besides the standard favicon, it's important to include an Apple Touch Icon for somone accessing your site on Apple devices. This icon appears when someone bookmarks your site on their iOS home screen. The recommended size for an Apple Touch Icon is 180x180 pixels and in .png format.
You can add this apple touch icon in a similar way as your favicon. Just below your favicon link URL, add the following line of code which will insert apple-touch icon
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.
You might need to adjust the href attributes to match your file paths and names.
And that's it! You will see new favicon updated on your site. 🥳
Nextjs favicon not showing
However, at times, we might face some issues with this. I have tried to address some of them below -
- Incorrect File Path: Ensure the favicon file is in the
publicdirectory and the path in theHeadcomponent is correct. Try opening the image in browser using its URL, just to ensure it is correct. - Caching Issues: Browsers cache favicons aggressively. Try clearing your browser's cache or opening your site in an incognito window to see if the issue persists.
- File Format Compatibility: While modern browsers support various favicon formats, some older versions may not. If compatibility is a concern, consider using the
.icoformat, which is widely supported. - Server-Side Caching: If you're using a service that caches your site, like a CDN, ensure that it's not serving an old version of your favicon. You might need to clear the cache on the server side.
- Using Dynamic Routes: If your Next.js application uses dynamic routes, ensure that the favicon is not linked dynamically, leading to incorrect paths. The favicon should be linked statically from the
publicdirectory. - Browser-Specific Issues: Sometimes, a favicon might display in one browser but not in another. This could be due to specific browser settings or extensions. Test your site in different browsers to diagnose this.
Conclusion
Adding a favicon in Next.js enhances your web application's professionalism and brand identity. The process of updating a favicon is pretty straightforward. By following these steps and troubleshooting tips, you can ensure that your favicon appears correctly across all browsers, providing a good user experience.
Remember, the favicon is a small yet significant element of your site's identity, so it's worth taking the time to get it right.
