Sign in Subscribe

What is a Favicon

A favicon is a small icon that appears in the browser tab next to the website title. Since everyone has dozens of tabs open at once, it allows your users to quickly identify your website in their broswer. You can use various favicon gnerator websites to create a favicon that you can use with your NextJs app.

Creating a Favicon for NextJS App

There are a bunch of different ways to create a favicon for your NextJS app. If you already have a logo for your app you can simply use something like: https://favicon.io/ or use a different favicon generator to convert it to a fav icon. If you don't have a logo you can either create one with a tool like Canva or Photoshop and then import it into https://favicon.io/.

Adding Favicon to NextJS Pages Directory

  1. Create a folder named "public" in the root directory of your NextJS app. (It should already exist. If it doesn't exist check if you are using the app directory.)
  2. Add your favicon to the public folder and make sure that the name is favicon.ico
  3. Add the following code to the `<head>`

<link rel="icon" href="/favicon.ico" sizes="any" />

Adding Favicon to NextJS App Directory

  1. Add your Favicon to the /app directory.
  2. Add the following code to your layout.tsx file
<head>
    <link rel='icon' href='/favicon.ico'/>
</head>

Why is my Favicon not showing in my NextJS App?

If your fav icon does not appear run through these troubleshooting steps:

  1. Ensure that you have the correct path set to your icon.
  2. Ensure that you are using a support format for your favicon. Try changing the file type of your favicon to `.png` from `.ico`.  See the NextJS Documentation For Full Reference
  3. Make sure you are using the correct method for your version of NextJs. If you are using the app directory follow the Adding Favicon to NextJS App Directory. If you are using the pages directory follow the Adding Favicon to NextJS Pages Directory.

NextJS: Creating a Favicon for your NextJS app | 2023

In this 2023 guide we will create a new favicon for your nextJS app. This guide will work both for the pages and app directory